5 Very Cool CSS3 Tricks
Most CSS3 specifications have been around for five years, but browser support has been gradual, with some still not supporting certain CSS2 standards. Because of this, it is important to know that the techniques explained in this document may not work correctly in browsers like Internet Explorer. There are, however, ways to get the results you want in unsupported browsers, without compromising your future-proof design.
1. Border Radius
There is probably some scientific explanation for human beings’ attraction to rounded corners, but regardless of the reason, they look cool and add some visual stimuli to websites. Boxes are cool, but rounded corners are sexy.
The easiest way to round the corners of a DIV is to add a border-radius property to the associated selector:
#mydiv {
border-radius: 15px;
}
For webkit-based browsers, you will have instant rounding, but that only accounts for Apple Safari, Google Chrome, and a few others. To get Mozilla Firefox support, you need to add the -moz prefix.
#mydiv {
-moz-border-radius: 15px;
border-radius: 15px;
}
Just like normal border settings, you can specify top, right, bottom, and left and also change the radius size to whatever you want.
For example:
#mydiv {
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 30px;
border-top-left-radius: 10px;
border-bottom-right-radius: 30px;
}
This example will make the top left corner slightly rounded, and the bottom right corner very rounded. The other two corners will be square.
2. Gradient
In the past, creating color gradients required you to assign background images with pre-designed gradient colors. If you ever wanted to change them, you had to go back and edit your images. CSS3 allows you to create gradients with relative ease and no images.
You will need to create a fallback background color for browsers that do not support the feature and also assign properties for both Webkit and Mozilla.
#mydiv {
background-color: #A4C0E4; /* fallback color */
background: -moz-linear-gradient(100% 100% 90deg, #879EBC, #A4C0E4);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A4C0E4), to(#879EBC));
}
3. Text Shadow
Before CSS it was pretty much impossible to have shadows behind text unless the text was not truly text but rather an image of text. With CSS3, it is quite easy to put shadows behind any text with the “text-shadow” property. In the example, I am applying shadows to all second-level headers.
h2 {
text-shadow: 2px 2px 2px #BBB;
}
Text shadow has actually been around since CSS2, but browsers are just now starting to catch up.
4. Box Shadow
Aside from cleverly stacking DIVs, there was no real decent way to get shadows behind boxes without using images, and that always led to messy code. With CSS3, adding a shadow to a DIV will only take you a few seconds. There are 4 values you can assign: horizontal offset, vertical offset, blur distance, and spread distance. The last two are optional. After those, you should add a shadow color value.
#mydiv {
box-shadow: 5px 7px 10px 2px #BBB;
}
Because CSS3 is still experimental, however, adding that property alone will only get you shadows in Opera. For Firefox, Safari, and Chrome, you need -moz and -webkit properties:
#mydiv {
box-shadow: 5px 7px 10px 2px #BBB;
-moz-box-shadow: 5px 7px 10px 2px #BBB;
-webkit-box-shadow: 5px 7px 10px 2px #BBB;
}
5. Multiple Columns
Despite the complexity involved in creating shadows or rounding corners, they wither and retreat in comparison to what was required to get usable columns on a single page. Most websites, even newspapers, did not use columns because it was simply more trouble than it was worth. With CSS3, it is easy and silky smooth. There are two ways to accomplish it, either by defining the width of columns or by defining the number of columns.
#mydiv {
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}
OR
#mydiv {
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}
With the “width” setting, the browser will determine the number of columns based on the size of the container and browser window. You can also specify the amount of space between columns and the add dividers with “column-rule”. We should note that Opera does not currently support the column property.
Fixing Internet Explorer
You could always roll your own javascript or create special images for IE, but someone has already done the work for you. A project called CSS3 Pie allows you to have border-radius, box-shadow, and linear-gradient support within Internet Explorer 6,7, and 8. It only requires the installation of one file and one additional property in each CSS3 selector.
Auto CSS3 Generation
To quickly generate the CSS3 code you need, our techs at UK dedicated hosting company 34SP.com recommend CSS3Generator.com. It walks you through the process and shows you the live changes as you make them.
For more information about CSS3 in general, visit w3schools.com.
Guest post by: Tavis J. Hampton is a librarian and writer with a decade of experience in information technology, web hosting, and Linux system administration. His freelance services include writing, editing, tech training, and information architecture.
Nice read. Any links to some
Nice read. Any links to some examples would be nice too.
Post new comment