January 25, 2012 In labs
This article covers a few introductory CSS3 styles. Several samples are shown in the article below.
CSS3 Effects can be very useful. What could previously only be accomplished by creating images can now be done with a few simple lines of CSS code. An introduction to these effects can be found in this article.
The stand-alone demo can be viewed here, or you can download the source files here.
CSS3: Rounded Edges
.rounded-corners { -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Chrome */ border-radius: 10px; /* CSS3 */ }
Rounded Edges Sample
CSS3: Gradients
You can create awesome gradients using only CSS. Probably the best way to do this is using an online gradient editor like Colorzilla CSS Gradient Generator.
.gradient-button { background: #a7cfdf; background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); background: -webkit-linear-gradient(top, #a7cfdf 0%,#23538a 100%); background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); background: -ms-linear-gradient(top, #a7cfdf 0%,#23538a 100%); background: linear-gradient(top, #a7cfdf 0%,#23538a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); }
CSS3: Text Shadows
It is easy to create Photoshop-like drop-shadows using CSS3.
h1.shadow { text-shadow: 0 1px 5px rgba(100, 100, 100, 0.95); }
Text with Shadows
CSS3: Box Shadows
Apply Shadows to Boxes as well.
.box-shadow { -moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5px #000; box-shadow: 5px 5px 5px #000; }
Box Shadow
CSS3: Combination of Effects
And now for a combination of all effects listed in this article!
Combined Effects
That’s all there is to it!
If you want to dig a little deeper you can view the stand-alone demo or view the source code below.
Leave a Reply
You must be logged in to post a comment.