New in CSS3

Posted on December 21, 2010 in CSS

CSS3 isn’t that much different from CSS; however are the possibilities much greater. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more.

Transform and transitions

Rounded Borders

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

Note *This does not work in some versions of Internet Explorer

border-color
border-image
box-shadow

Box Shadow

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

Text Shadow

.font {
font-size: 20px;
color: #2178d9;
}

.font {
text-shadow: 0 1px 0 #000;
}

The quick brown fox jumps over the lazy dog

text-overflow
word-wrap

Fancy Font

@font-face {
font-family: ‘Loyal’;
src: url(‘loyal.ttf’);
}

.font {
font-family: Loyal;
font-size: 20px;
}

Opacity

.box {
opacity: .6;
}

RGBA

.box {
background: url(rgba.php?r=239&g=182&b=29&a=.25);
}

HSL colors
HSLA colors
opacity

Background Size

.box {
background: #ccc url(http://d2o0t5hpnwv4c1.cloudfront.net/423_screenr/200×200.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
}

box-sizing
resize
outline
nav-top, nav-right, nav-bottom, nav-left

Multiple Backgrounds

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

background-origin and background-clip
background-size

Columns

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

Border Image

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