CSS3 is awesome. With each new property, selector and features released so far, it is simplifying the task of the web designer. All the new rules and properties introduced so far are adding to the productivity of the designer. CSS3 is quite handy for designing attractive and interactive websites. Box shadow, rounded corners, animations and all the tedious tasks and design elements which earlier required either Photoshop, Flash or Javascript are now possible with a stylesheet. Sounds great!
Fresh, new and improved features of CSS3 are so accessible that it becomes fairly easy to apply transformations and styles to HTML elements. For instance adding rounded borders is a snap of finger. This is not an exaggeration! You can simply apply rounded-borders by using the property called border-radius. No image editor required. Similarly adding animations is a fun with CSS3.
There are scores of new features added to CSS with CSS3. Lets have a quick look on some of the utility features of CSS3 and dive in action for styling the elements with great ease and flexibility.
-
Rounded Corners
Earlier in CSS2 it was too difficult to add rounded corners. We had to fire up Photoshop, create an image with rounded borders and apply the image for adding the rounded borders. With CSS3, it’s a wink of an eye. We can easily create rounded corners by using the border-radius property.
element { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ }
-
Borders with Image
CSS3 gives us an amazing technique to create borders with images as well. You can use border-image property for creating decorative borders. Just select some beautiful floral ornaments and here you are all set to design beautiful borders with CSS3.
element { border-image:url(border_img.png) 30 30 round; -moz-border-image:url(border_img.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border_img.png) 30 30 round; /* Safari and Chrome */ -o-border-image:url(border_img.png) 30 30 round; /* Opera */ } -
Box Shadow
CSS3 allows you to add shadows to the boxes by using box-shadow property. Here you need to mention the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow.
element { box-shadow: 10px 10px 5px #888888; }
By default, box-shadow property adds drop shadow to the box element. CSS3 also gives us an amazing feature called inset box-shadow. Inset keyword allows you to add inner-shadow for vignetting effect. Let’s see how to apply inset box-shadow:element { box-shadow:inset 0px 0px 85px rgba(0,0,0,.5); -webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5); -moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5); } -
Multiple Columns
Coding for multiple columns is old-fashioned. CSS3’s column property is a blessing in disguise. It provides an ease of creating multiple columns with column-count property.
element { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; }You can also specify the gap between the columns and use column-rule property to specify the width, style and color of the rule between columns; thus relieving you of setting margin and padding for individual columns.
element { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; /* column-rule */ -moz-column-rule:3px outset #ff00ff; /* Firefox */ -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ column-rule:3px outset #ff00ff; } -
Transformations
Scaling, skewing, rotating elements is one of the coolest feature of CSS3. You can do all this crazy stuff with CSS3 transformations; basically the transform property. CSS3 includes two types of transformations 2D and 3D. Both these transformations have some unique features which can be applied to the elements. While 2D transformations allow you to translate, rotate, scale or skew the box element, 3D transformations support rotations through the properties: rotateX and rotateY. Learn more about CSS3 transform property here.
-
Transitions
Want to add transitions? The first thing that clicks is Flash animations or Javascript / jQuery. Well, now you also have CSS3 as an option. CSS3 transitions allow an element to gradually change the states — from one style to another. For adding the transitions, we have to use the CSS property transition and mention the duration for the transitions.
element { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ }We can also apply multiple transition effects to an element. Check it out here:
element { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; } -
Animations
Like transitions we can also apply animations without using animated images, Flash animations, or Javascript with CSS3 alone. For creating animations you will need to define @keyframes rule. @keyframes rule specifies the CSS animation style; where from specifies the initial state and to represents the final state.
Defining the rule:
@keyframes my_animation { from { background: green; color:white } to { background: white; color:black } }Implementation of the rule:
After creating the animation or defining the rule, we need to bind it to the element. Here we need to specify the name and the duration of the animation.element { animation: my_animation 5s; -moz-animation: my_animation 5s; /* Firefox */ -webkit-animation: my_animation 5s; /* Safari and Chrome */ } -
Text Shadows
Typography has also had a bing with CSS3. Now you can apply text-shadow to the text and thus replicate emboss, engrave effects in CSS3 itself. For applying shadow to the text you have to specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow, as in the code below:
h1 { text-shadow: 5px 5px 5px #FF0000; }
-
Flexible Box Model
CSS3 provides an all new box model. The new box model is widely popularized as flexible box model. This all new feature allows you to create fluid layouts which adapts itself to browser size, thus making styling with CSS device independent.
CSS3 box model improvises over CSS2 and CSS1 box model. To start using the flexible box model, you need to set the value of display property to box. CSS3 box model allows you to distribute the boxes vertically as well as horizontally, set the alignment of boxes, specify the order and make the boxes flexible by specifying the box-flex property.
This all new model categorizes the web-page into various levels of boxes: content-box (the area occupied by content), padding-box (area occupied by content as well as the content-padding) and then we also have a border-box explicitly for defining the border-area. These values come in handy for specifying the background-origin.
Want to learn more about CSS3 box model. Check out the flexible box model at Mozilla Hacks.
-
Web Fonts
Web fonts is another boost to CSS3 typography. Now we can use our own fonts. We just need to upload the font file to our web server and use @font-face rule to define your own fonts.
Defining the rule:
@font-face { font-family: my_Font; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ }Using the newly created font:
element { font-family:my_Font; } -
CSS3 Backgrounds
CSS3 includes many new background properties. First is background-size property which allows you to specify the size of the background image. We can also set the position of the background image by using background-origin property.
element { background:url(img_flwr.gif); -moz-background-size:80px 60px; /* Firefox 3.6 */ background-size:80px 60px; background-repeat:no-repeat; background-origin:content-box; -webkit-background-origin:content-box; /* Safari */ }But the best of all is applying multiple background images. With CSS3 you can actually set multiple backgrounds. The following lines of code show the above mentioned background properties in action.
body { background-image:url(img_flwr.gif),url(img_tree.gif); }
What do you like most about CSS3?
