- Overview
- Transcript
5.4 Get Creative With the List Bullets
Lists are extensively used in web design so styling them is something every developer should know. In this lesson I’ll show you how to use some previously learned techniques to add custom bullet points.
1.Introduction1 lesson, 00:41
1.1Welcome00:41
2.Typography6 lessons, 17:23
2.1Use CSS Shorthand04:05
2.2Change Text Selection Color01:50
2.3Awesome Font Stacks04:10
2.4Drop Caps03:00
2.5Style Placeholder Text02:15
2.6Remove Dotted Outline on Links02:03
3.Forms2 lessons, 10:52
3.1Create Custom Radio Buttons and Checkboxes06:38
3.2Create Awesome States on Form Elements04:14
4.Positioning3 lessons, 12:29
4.1Horizontal and Vertical Centering03:48
4.2Absolutely Center an Image03:41
4.3Properly Clear and Contain Floats05:00
5.CSS Generated Elements4 lessons, 17:44
5.1CSS Triangles05:14
5.2CSS Circles01:36
5.3Create a Layered Paper Effect05:30
5.4Get Creative With the List Bullets05:24
6.Useful Techniques3 lessons, 08:52
6.1Create a Fixed Back to Top Button03:35
6.2Even and Odd Rows03:36
6.3Create Fluid Images01:41
7.Conclusion1 lesson, 01:47
7.1Recap01:47
5.4 Get Creative With the List Bullets
Lists are extensively used in web design so styling them is something every developer should know. In this lesson, I'll show you how to use some previously learned techniques to add custom bullet points. So, to do that, I have three lists right here. And the first thing I wanna do is remove the default list style type. So, I'm gonna do this demo container ul. List, style type, none. Now that gets rid of all the bullets. All right. The first list we're gonna use an image to display on each list item. So, list-1, and this is how I have them numbered, list-1, list-2, and list-3. So list-1, list item, we'll do this background: url(bullet.png). bullet.png is an image I've already prepared. We'll set it to left center no-repeat. Okay. And let's also add a padding-left of 1m. And that will push the text to the right. So this is how you position them. Basically, each list item has the same background image position to the left and to the center vertically. If you want to alter the vertical position, instead of center you can do like maybe 0 just to see where it is and then start nudging them down, 5 pixels, 10 pixels, whatever you want. But normally you would just leave them in the center like this. All right, the second list will use some triangles as bullets. So, list-2 list item before, we'll use a pseudo element for this. We'll do this, content set to nothing. Display, we'll set it to inline-block because we need to set a height and a width. So height: 0. This is the same as the triangle example. Width will be set to 0. The only difference is we'll do things a bit differently on the border. So we'll set border-color, we'll use the two value notation, transparent and this. That means you get the transparent value for vertical and #111 for horizontal. Then we'll set the border style to solid. This is common to all borders. And then we'll set border width, let's see, we want the border to point to the right. So, top, bottom and left borders should have the same width. So 4 pixels top, 0 right, 4 bottom, and 4 left. Save and there it is. Let's also do a margin. Let's do a margin-right of 0.5 em, just push the text a little bit. And you can also tamper with the left-border width. Make it 6 pixels so that the small triangles have equal sides. Okay, perfect. Now for the third list we're gonna use circles. So, list-3, list item before content, again, set to nothing. And then, display set to inline-block. Oops, let's give it a background color of blue, so we can see them. We'll give them a width of about 6 pixels, a height, same value. And, what else? Let's make them round. That means border-radius, half of the width and height, so 3 pixels. And let's check it out. Okay, not bad. Let's add some margins to them. Top 0, let's see, right we'll do .5 m's. Bottom probably like 1 pixel so we can push it up, and 0 for left. And there you go. So three very simple bullet point types that you can apply to your own lists. And you can take this even further because you can show content in the pseudo-element, you can grab any kind of icon or symbol, just like I showed you in the custom radio button and check box video. So check out that lesson to see exactly what I'm talking about.