10 CSS3 techniques you might need to know

webdesign Enrico Deleo October 17, 2011

I suppose you already heard about CSS3. If you gave attention to the web design field you know this is the new must for a modern web site.

Thanks to the new Cascading Style Sheets standard you’ll build nicer layouts with some of the hottest features (shadows, border radius etc.) without even a line of JS or one of those tricky image-based workarounds!

Border Radius

In modern web design people ask for border radius. Personally speaking, I love square, tidy borders, but you know you don’t need a thing after you know how to build it ;)

CSS3

.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

HTML markup

<div class="box">
<!--CONTENT-->
</div>

Box Shadows

That’s really tricky to accomplish if you follow the image-based way. With CSS3 it’s a shoot. You can add shadows with just few line.

CSS3

.box {
 box-shadow: 5px 5px 2px black;
 -moz-box-shadow: 5px 5px 2px black;
 -webkit-box-shadow: 5px 5px 2px black;
 }

HTML markup

<div class="box">
 <!--CONTENT-->
 </div>

Text Shadows

Same as above, but it applies to texts. Very useful and cool if combined with the right font/background.

CSS3

.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}

HTML markup

<span class="font">The quick brown fox jumps over the lazy dog.</span>

@font-face

Typography is very important both on the side of readability and look. Designing an interface with just safe fonts is definitively too restrictive. Now you can add some new spice to your text!

CSS3

@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}

HTML markup

<span class="font">The quick brown fox jumps over the lazy dog.</span>

Opacity

Another tricky effect is opacity: some people use .png images to reach this goal. CSS3 makes this effect easy with an unique propriety.

CSS3

.box {opacity: .6;}

HTML markup

<div class="box"> <!--CONTENT--></div>

RGBA

RGBA is one of the most interesting propriety here. With RGBA you can set the exact RGB value you want and Alpha Channel, in other words you’ll set color and opacity in one shoot.

CSS3

.box {background: rgba(239, 182, 29, .25); /*in order: R, G, B, A*/}

HTML markup 

<div class="box"> <!--CONTENT--></div>

Multiple Backgrounds

Multiple background compatibility is here. You won’t need to create multiple divs, just use CSS3! Yeey!

CSS3

.box {width: 200px;height: 150px;background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;}

HTML markup

<div class="box"><!--CONTENT--></div>

Columns

Now it’s easy to have newspaper-like columns without different divs or jquery.

CSS3

.columns {-moz-column-count: 2;-webkit-column-count: 2;}

HTML markup

<div class="columns"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p></div>

Border Images

Make your borders uniques with this propriety.

CSS3

.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;}

HTML markup

<div class="box"><!--CONTENT--></div>

Animations

Yes, animations are cool. And you haven’t to load jQuery and use the famous animate() to make simple but effective animations.

CSS3

.box {position: relative;-webkit-transition: top 300ms linear;}.box:hover {top: 20px;}

HTML markup

<div class="box"><!--CONTENT--></div>

Related Posts