A CSS3 Tutorial - Features, Techniques, Tips, Tricks

The genesis of the Cascading style sheets began 13 years ago and the widely adopted CSS 2.1 standard has existed for 11 years now. The world is changing fast with its technology and when we look at the so called ‘ancient websites’ that has just completed a decade we find a wide difference in the World Wide Web.

The CSS hacks and JavaScript-dependent techniques for styling were the ideal eye openers to ring out a way to progress the idea of introducing CSS3. Many unanswered questions left them diffident in experimenting with new ideas and foremost to leave the past and move forward to cultivate for a better techno- world.

CSS is a style sheet format, endorsed by the World Wide Web Consortium (W3C) that works with HTML documents using simple syntax and various style properties denoted by English language keywords.

CSS1 incorporated innumerable layout settings suitable for downloadable HTML pages which provide additional XML support, downloadable fonts and audio presentations for visually impaired users. CSS3 continues in development and its improved highlights include: vertical texts, backgrounds and borders, speech recognition and user interaction. Text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, multi-column layout, etc are various new rules that help save time. CSS3 has been proved to be flexible in making it much easier to recreate the previously so complex effects.

Supported by most web browsers, CSS3 has gained a lot of popularity in recent times. Here are some features and techniques that can help you when designing a website:  

Border Radius- Create Rounded Corners

CSS3 styling rule allows rounded corners to be set up. Supported by Firefox, Chrome and Safari3, the feature allows you to create round corners on box-items.

Using the code:

 

<div style=" background-color: #ccc; -moz-border-radius: 
5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >


You can get rounded corners like this:

This is how it can look when using rounded corners around a block of text.


CSS3 has a much wider range of color support with new colors like HSL, CMYK, HSLA and RGBA. 

CSS

 

Border Image

This lets you use an image file as the order of an object.

To get the following

1.CSS

2.CSS

The syntax is:

1. border-image: url(border.png) 27 27 27 27 round round;

2. border-image: url(border.png) 27 27 27 27 stretch stretch;

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

Box Shadow and Text Shadow

Shadow just adds that missing factor to a design and with CSS3 it's much easier to get them. Without wasting your time in photoshop , you can add that extra oomph to the box or text.

The property takes 3 lengths and a color as its attributes, the lengths are:

  1. the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
  2. the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
  3. the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

CSS

CSS

The text shadow property can be used with the following syntax:

text-shadow: 2px 2px 2px #000;

CSS

http://www.css3.info/preview/box-shadow

http://www.css3.info/preview/text-shadow

Multiple background Images

CSS3 allows you to add multiple background images on one element. So adding more than one background to a box or paragraph is very simple with the use of CSS3.

CSS

You just need to put commas between multiple backgrounds:

background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;

http://www.css3.info/preview/multiple-backgrounds

Multiple Columns

Using the new modules on Multiple Column the content of an element can be laid out in multiple columns. CSS3 based columns offer a lot of flexibility in terms of the flow of content from one column to another. Based on the size of the viewport, number of columns keeps varying.

CSS

http://www.w3.org/TR/2007/WD-css3-multicol-20070606

Opacity and RGBA

CSS3 brought an extensive usage of opacity. It became much easier to set the transparency level for images, texts and boxes with the help of opacity feature. Where an opacity value 1 corresponds to fully opaque element, opacity value 0 means the element is completely transparent.

CSS

http://www.css3.info/preview/opacity

Preview Custom Web Fonts

With CSS3, adding custom fonts to your website couldn't get easier. An HTML5/ CSS3 powered web app Font Dragr lets you drag and drop fongt into the webpage and you can preview and edit the example text.

CSS

http://labs.thecssninja.com/font_dragr

CSS3 Selectors to Apply Link Icon

CSS3 lets you apply a number of icons to your link. Using CSS3 Selectors, you can apply an icon to any tag with an attribute.

CSS

http://www.css3.info/using-css-3-selectors-to-apply-link-icons

While these features come handy in enriching you design even more, there are a few problems that you might be ready to deal with. Most of the features are not compatible with Internet Explorer so there would be large number of visitors who might not see these features at all. It's very important then that you keep the basic necessities in place. Things like a regular border and primary colors should be a part of the design.

Written 2010-02-12 (Updated 2016-10-10)

Chad Bean

Share your thoughts

Warma,  27 September, 2010

thanks great post..

Umarfaruk M,  23 August, 2010

thanks for this post... keep post...

Show all related articles..

Overall Best Web Hosts

Buying Guide

Are you finding it difficult to understand what type of hosting you need or which provider to go with? Go through our guide and find the best solution

TO BUYING GUIDE

User Reviews

Make your voice heard! Rate and review your web hosting provider - good or bad, we want to know

  •  
  •  
  •  
  •  
Everything has been very stabile and I was very impressed with all the features and extras that were included in the plan.

Bill about iPage

Read iPage Review


Why wait? Get today's best deals now!