By: Prem Tiwari | Last Updated: | In: Web Technologies
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; } |
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
Tags: CSS, Tip and tricks, Tutorials, Web development
