CSS3 has been split into “modules”. It contains the “old CSS specification” (which has been split into smaller pieces). In addition, new modules are added.
CSS3 Modules
CSS3 Borders
You can create rounded borders, add shadow to boxes, and use an image as a border – without using a design program, like Photoshop.
1 2 3 4 | div { border: 2px solid; border-radius: 25px; } |
CSS3 The border-image Property
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <head> <style> div { border: 15px solid transparent; width: 250px; padding: 10px 20px; } #round { -webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */ border-image: url(border.png) 30 30 round; } #stretch { -webkit-border-image: url(border.png) 30 30 stretch; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 30 stretch; /* Opera 11-12.1 */ border-image: url(border.png) 30 30 stretch; } </style> </head> <body> <div id="round">Here, the image is tiled (repeated) to fill the area.</div> <br> <div id="stretch">Here, the image is stretched to fill the area.</div> </body> </html> |
CSS3 Linear Gradients
Example 1. Radial Gradient – Evenly Spaced Color Stops (this is default)
1 2 3 4 5 6 | #grad { background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */ background: radial-gradient(red, green, blue); /* Standard syntax */ } |
Example 2. Radial Gradient – Differently Spaced Color Stops.
1 2 3 4 5 6 | #grad { background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */ background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6-12.0 */ background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6-15 */ background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */ } |
CSS3 Text Effects
CSS3 has a sevral new text shaddow effect.
1 2 3 | h1 { text-shadow: 5px 5px 5px #FF0000; } |
CSS3 Transitions
You can use animation effects using CSS3 Transitions without using Flash animations or JavaScripts.
1 2 3 4 | div { -webkit-transition: width 2s, height 2s,-webkit-transform 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s, height 2s, transform 2s; } |
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: CSS, Tip and tricks, Tutorials, Web development
