- Overview
- Transcript
5.2 CSS Circles
In the previous lesson I showed you how to create triangles in CSS. Circles are just as easy to create and the technique is actually easier to understand.
1.Introduction
1.1Welcome00:41
2.Typography
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.Forms
3.1Create Custom Radio Buttons and Checkboxes06:38
3.2Create Awesome States on Form Elements04:14
4.Positioning
4.1Horizontal and Vertical Centering03:48
4.2Absolutely Center an Image03:41
4.3Properly Clear and Contain Floats05:00
5.CSS Generated Elements
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 Techniques
6.1Create a Fixed Back to Top Button03:35
6.2Even and Odd Rows03:36
6.3Create Fluid Images01:41
7.Conclusion
7.1Recap01:47
5.2 CSS Circles
In the previous lesson, I showed you how to create triangles in CSS. Circles are just as easy to create, and the technique is actually easier to understand. So let's see an example. I have a document here with a div class circle, which is blank. And then an image of 200 by 200 with a class of round-image. So, let's see the circle first. Circle, we'll start with this background-color, so we can see it better. Let's do a green. And then set a width, let's say 10em, set a height, also 10em. And to make this round, all you gotta do is set a border-radius to half its width and height, so 5em. Save, and there you go, [LAUGH] that's a perfect circle. Now, I added this image because you can also create circles from images. So, round-image. We gotta set a width of 200 and a height of 200 pixels. And then a border-radius, oops, of 100 pixels. And now this image is also a circle. And there you go, really simple technique. Browser support is pretty good, it will work in all major browsers, except IE8.
