Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius

By Henrik Helmers Introduction Previous articles have covered the basics of CSS3 transitions and 2D transforms and CSS3 borders, backgrounds and box-shadows; refer to those articles if you need to read up on the basics of using these properties. This article takes things further, showing how to use these properties to create beautiful UI elements without the use of any images, JavaScript or Flash. Contents: Where can they be applied? Support for these CSS3 features was introduced in Opera 10.50, and you’ll also be able to rely on most of them in the latest versions of Firefox, Safari and Chrome. Of course, in the real web most of us are stuck having to support Internet Explorer, which doesn’t yet support any of these properties. For the Web at large, however, all is not lost. It is really a matter of who your target audience is, and providing an acceptable user experience to them. Take 1: Buttons One of the most obvious applications of these properties is to simplify button design. Summary

CSS tutorial - Using borders to produce angled shapes This is a suppliment to the tutorial, and is here only for illustrative purposes. It is not part of the main tutorial. These examples will not work in Netscape 4 or WebTV, because they do not allow you to define individual borders, or Escape because it does not handle borders correctly. Internet explorer 4 and 5 may have trouble with some of the examples due to their problems with the box model. Note that these examples are based on you using the default 'Moosified' style for this page, where the background colour of the body is #f6f6f6. If you use the other styles, the shapes may not work correctly. Thick borders A div element with a border If all four borders are defined as being thick, they should be tapered into each other: border-top: 20px solid red; border-bottom: 20px solid #fc0; border-left: 20px solid blue; border-right: 20px solid green; MultiColour Square All of these examples are done using a <div> element, with no contents: The lack of contents makes all points sharp. Down arrow

CSS Triangle You can make them with a single div. It’s nice to have classes for each direction possibility. The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle. Demo See the Pen Animation to Explain CSS Triangles by Chris Coyier (@chriscoyier) on CodePen. Examples Dave Everitt writes in: For an equilateral triangle it’s worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width