New CSS techniques with CSS3

What is CSS3? It's the same CSS you've been using, but updated and improved. Now you can replace image effects or even some javascript code with simple CSS code.

So let's get started – no needless writing or boring descriptions, just clear, simple and easy to understand examples below. 12 of my favorite CSS3 tricks:

1.Rounded corners
Use it in your div, add background color, set your border and done.

<style type="text/css">  
                      .box {  
                        border-radius: 10px;  
                        -moz-border-radius: 10px;  
                        -webkit-border-radius: 10px;
                        background-color: #ccc;  
                      }  
                      </style>  
                      
                      <div class="box">  
                        <!--your content-->  
                      </div>

Open in new window

Learn more:
http://www.css3.info/preview/rounded-border/
http://css-tricks.com/snippets/css/rounded-corners/

2.Box shadow:
Add a drop shadow to your div or image.

<style type="text/css">  
                      .box {  
                        box-shadow: 5px 5px 2px black;  
                        -moz-box-shadow: 5px 5px 2px black;  
                        -webkit-box-shadow: 5px 5px 2px black;  
                      }  
                      </style>  
                      
                      <div class="box">  
                        <!--your content-->  
                      </div>

Open in new window

Learn more:
http://www.css3.info/preview/box-shadow/
http://css-tricks.com/snippets/css/css-box-shadow/

3.Text shadow:
Add a shadow to your text. Nice when used for headlines on your website.

<style type="text/css">  
                      .font {  
                        font-size: 20px;  
                        color: #2178d9;  
                      }  
                      .font {  
                        text-shadow: 0 1px 0 #000;  
                      }  
                      </style>  
                        
                      <span class="font">
                        Your fancy text here
                      </span>

Open in new window

Learn more:
http://www.css3.info/preview/text-shadow/
http://css-tricks.com/snippets/css/css-text-shadow/

4.Cool font:
Instead of using javascript and cufon (http://cufon.shoqolate.com/generate/), use this simple CSS technique to include your font on your website.

<style type="text/css">  
                      @font-face {  
                        font-family: 'Loyal';  
                        src: url('loyal.ttf');  
                      }  
                      .font {  
                        font-family: Loyal;  
                        font-size: 20px;  
                      }  
                      </style>  
                       
                      <span class="font">
                        Text with your fancy font!
                      </span>

Open in new window

Learn more:
http://www.css3.info/preview/web-fonts-with-font-face/
http://css-tricks.com/snippets/css/using-font-face/

5.Gradient:
Use a gradient in your div or body tag. Requires an image to use as the gradient.

<style type="text/css">  
                      #gradient {
                        height: 100px;
                        background-color: #1a82f7;
                        background: url(images/linear_bg_1.png);
                        background: -moz-linear-gradient(100% 100% 180deg, #2F2727, #1a82f7);
                        background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
                      }
                      </style> 
                      
                      <div id="gradient">  
                        <!--your content-->  
                      </div>

Open in new window

Learn more:
http://css-tricks.com/css3-gradients/

6.Opacity:
Simple trick to make your page elements transparent.

<style type="text/css">  
                      .box {  
                        opacity: .6;  
                      }  
                      </style>  
                         
                      <div class="box">  
                        <!--your content-->  
                      </div>

Open in new window

Learn more:
http://www.css3.info/preview/opacity/
http://css-tricks.com/snippets/css/cross-browser-opacity/

7.RGBA:
Red, green, blue, alpha (transparency). It's fun to experiment with this technique.

<style type="text/css">  
                      .box {  
                        background: rgba(239, 182, 29, .25);  
                      }  
                      </style>  
                        
                      <div class="box">  
                        <!--your content-->  
                      </div>

Open in new window

Learn more:
http://www.css3.info/preview/rgba/

8.Background size:
Resize your background with pure CSS. Opera 9.5, Safari 3 and Konqueror only.

<style type="text/css">  
                      .box {  
                        background: #ccc url(images/xxx.jpg) no-repeat;  
                        -webkit-background-size: 50%; /* Safari */  
                        -o-background-size: 50%; /* Opera */  
                        -khtml-background-size: 50%; /* Konqueror */  
                      }  
                      </style>  
                        
                      <div class="box">  
                        <!--your content-->  
                      </div>

Open in new window

Learn more:
http://www.css3.info/preview/background-size/

9.Multiple backgrounds:
Use more than one background in a very easy to implement way. Safari 3 only.

<style type="text/css">  
                      .box {  
                        width: 200px;  
                        height: 150px;  
                        background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;  
                      }  
                      </style>  
                         
                      <div class="box">  
                        <!--your content-->  
                      </div>

Open in new window

Learn more:
http://www.css3.info/preview/multiple-backgrounds/
http://css-tricks.com/snippets/css/multiple-backgrounds-syntax/

10.Text columns:
Instead making tables or using javascript, you can now define columns in your stylesheet.

<style type="text/css">  
                      .columns {  
                        -moz-column-count: 2;  
                        -webkit-column-count: 2;  
                      }  
                      </style>  
                      
                      <div class="columns">  
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
                        <p>Lorem ipsum dolor sit amet.</p>  
                      </div>

Open in new window

Learn more:
http://www.css3.info/preview/multi-column-layout/
http://css-tricks.com/snippets/css/multiple-columns/

11.Image border:
Don't use boring 'border' property, make it fun with borders from an image.

<style type="text/css">  
                      .box {  
                        border-width: 20px;  
                        -webkit-border-image: url(images/border.png) 27 round;  
                        -moz-border-image: url(images/border.png) 27 round;  
                        border-image: url(images/border.png) 27 round;  
                      }  
                      </style>  
                       
                      <div class="box">  
                        <!--your content-->  
                      </div>

Open in new window

Learn more:
http://www.css3.info/preview/border-image/

12.Animations:
Believe it or not, you can animate elements with simple and short css code!

<style type="text/css">  
                      .box {  
                        position: relative;  
                        -webkit-transition: top 300ms linear;  
                      }  
                      .box:hover {  
                        top: 20px;  
                      }  
                      </style>  
                      
                      <div class="box">  
                        <!--your content-->  
                      </div>

Open in new window

Learn more:
http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/

Please note, these techniques are new. They can only be used in browsers that support CSS3 and will not work in older browsers.

Search the net for even more sophisticated techniques, tips and tricks for CSS3. This article just scratched the surface of CSS3 possibilities. It's a great tool for every day use if you are a web designer. And it's just plain fun to play with and experiment! I've seen some fantastic websites on the internet made with pure html/css3 (and images obviously). CSS3 is a huge step forward in web design.

Thanks for your time reading this and good luck.
Hope you find it useful :-)

LEARN CSS3:
http://www.css3.info/
http://designshack.co.uk/articles/introduction-to-css3-part-1-what-is-it
DESIGN WITH CSS3:
http://www.themeflash.com/60-excellent-css3-tutorials-and-techniques-you-should-know/
http://www.dzinepress.com/2010/03/50-excellent-tutorials-for-web-development-using-css3/

Comments (1)