The use of CSS3 in web design is beginning to see more and more popularity. Unfortunately, users of Internet Explorer (which still has a large browser market share) are left out of the party until the release of IE 9. However, this doesn’t mean that you should abandon the cool features that the next generation of CSS has to offer. CSS3 allows designers to simplify their efforts which used to be based on designing images in Photoshop. Now designers can let the code do the work of rounding corners and adding shadows. Here are three simple CSS3 methods that every designer should know.
Rounded Corners
The old way of rounding corners in your design was to painstakingly include photoshoped images. This process bloated your code and made it frustrating if you wanted to change aspects of your design after including the images. With the CSS3 property of border-radius, the process is much simpler.
Simply add the following code to the element you want rounded in your CSS file. If you want your corners to be only slightly rounded use a smaller number of px. If you want large rounded corners use a larger number of px.
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
Does the code above seem kind of repetitive? Well, it is. The top line is the official code to transform your element to have rounded corners. However, CSS3 is not uniformly supported by all browsers yet. As a result (-moz-border-radius) is needed for Firefox and (-webkit-border-radius) is needed for browsers such as Safari that use the WebKit engine. Once CSS3 is adopted across the board, the only code you will need is (border-radius).
Box Shadow
To make a really beautiful design that stands out from the crowd, it’s all about the details. The CSS3 element
box-shadow allows you to add a subtle shadow to the outside of a box element.
Take a look at the code below.
box-shadow: 3px 3px 10px #000;
-moz-box-shadow: 3px 3px 10px #000;
-webkit-box-shadow: 3px 3px 10px #000;
Here is what the values mean after the box-shadow property.
- The first value controls how far the shadow moves left or right. Use a positive number to move it to the right and a negative number to move your shadow to the left.
- The second value controls whether the shadow will be above your box or below it. Use a positive number for the shadow to appear below the box and use a negative number for the shadow to appear above it.
- The third value controls how blurry your shadow will be. If you set the value to 0 the shadow will be sharp, if you set the value higher it will be blurrier.
- Finally, the fourth value you will recognize as a standard RGB code for color. In the code listed above the color is set to black (#000)
Take note that I included the Firefox (-moz-box-shadow) and WebKit ( -webkit-box-shadow) versions of this property. You should include this code in your own design.
Text Shadow
To add more emphasis to your headlines (or any other text) a cool new feature in CSS3 is the text-shadow property.
Take a look at the code below.
text-shadow: 2px 2px 1px #000;
Here is what the values mean after the text-shadow property (they are exactly the same as the box shadow values.
- The first value controls how far the shadow moves left or right. use a positive number to move it to the right and use a negative number to move your shadow to the left.
- The second value controls whether the shadow will be above your text or below it. Use a positive number for the shadow to appear below the text and use a negative number for the shadow to appear above it.
- The third value controls how blurry your shadow will be. If you set the value to 0 the shadow will be sharp, if you set the value higher it will be blurrier.
- Finally, the fourth value you will recognize as a standard RGB code for color. In the code listed above, the color is set to black (#000)
With these three CSS3 properties you can make dramatic changes to your design with a few lines of code that before were only possible with Photoshopped images. As support of CSS3 becomes more widespread it will become the standard used on websites everywhere. How are you using CSS3 in your designs? If you have any comments or questions about CSS3 please let me know in the comment section below.
