12

An Intro to CSS3 Effects

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 ); 
}
Gradient Button

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.

View Stand-Alone Example

Download the Source


Leave a Reply