Check out a free preview of the full CSS In-Depth, v2 course:
The "Design Elements" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle looks at different design features people have created with generated content.

Get Unlimited Access Now

Transcript from the "Design Elements" Lesson

[00:00:01]
>> Estelle Weyl: So, we talk a little bit about design elements, let's go back to it. So, here's another thought bubble. So the first thought bubble was with the triangle, this thought bubble is using border radius and positioning. So it's basically putting a 50% border radius on the thought bubble.

[00:00:20] And then it's creating two circles before and after, which just basically have two different sizes. One has a height and width of 40, the other one has a height and width of 20, so one is half the size of the other one, border radius of 50%. And then I position them absolutely to make it look like a thought bubble.

[00:00:37] Is this okay to use? Yes, there is no significant information to the screen reader that the screen reader would need to know though the text is still there. If this was really important, like in a comic, its roosters would say that the guys or the character said it, not that he thought it.

[00:01:00] But you could actually add accessibility features to say that it was a thought and not. Then Chris Coyier put out this neat little blog, and it is The Shapes of CSS. And he used generated to content to create all of these shapes. These are just one element with generated content and you can do all sorts of things.

[00:01:22] I'm going through it quickly because it's just to show you that it's possible. How was yin yang done before and after, that is really impressive. Isn't that pretty awesome?
>> Estelle Weyl: Okay, and then some more thoughts of what you could do. The shapes article was included, the printing of the URLs, remember that one?

[00:01:51] Clearing floats, that we don't need to do anymore pretty soon because I'm gonna show you Flex box and Grid.
>> Estelle Weyl: Samurai, I think it was, made all of these icons out of generated content.
>> Estelle Weyl: Remember when we were talking about, let me see if I can make this bigger?

[00:02:12]
>> Estelle Weyl: Okay, so here is an idea of adding based on attributes and the size of the screen, adding features. So on a large monitor when you see an email you get the email printed afterwards and the email icon before. If it's a medium screen, it's just the name and the email address printed afterwards.

[00:02:34] If it's a tablet, the word email comes before, if it's smaller still, you get just the icon, and if it's even smaller, you just get the link and that's it. So it's basically saying, what is the size of my screen? Depending on the size of your screen, add these features.

[00:02:52]
>> Estelle Weyl: Let's see a few more, ribbons.
>> Estelle Weyl: Yeah, here's a ribbon. Okay, and here's the badass tooltip.
>> Group: [LAUGH]
>> Estelle Weyl: Which is kind of what we did earlier with the Google thing.
>> Estelle Weyl: Okay.
>> Estelle Weyl: So we're not gonna do this, this is an example, but this is a very clear case of why you would not wanna make this as position relative.

[00:03:26] Because if this was position relative, this word tool tip all the time, then I went over generated content, the word tool tip would come right through. We're going to take a five minute break, now before we hit Media Queries. So if you want to, you can actually go hit this and try figuring out how to do this.