Web Industry Blog - Discussion, Comments, News

20th October 2011

CSS is the web's paintbrush. Without it web pages would be pretty damn boring to look at. Which is just one reason to get excited about the new CSS standard - CSS3.

Sadly, some currently released new features may not work on certain browsers, this CSS3 browser compatibility grid should help to clarify.

Now, onto some of the wonderful new features.

ROUNDED BORDERS

ohhh, rounded borders

Browser compatibility

Currently available in all major browsers, excluding versions of IE8 and older.

the code:

#rounded_borders{

background-color: #eff9fd

-moz-border-radius: 15px; /*for firefox*/

-webkit-border-radius: 15px; /*for chrome, safari*/

border-radius: 15px; /*for IE*/

border: 1px solid #5a737d;

padding: 10px;

width: 500px;

height:50px;

}

BOX SHADOW

ohhh, box shadow

Browser compatibility

Currently available in all major browsers, excluding versions of IE8 and older.

the code:

#box_shadow{

background-color: #eff9fd;

-moz-box-shadow: 10px 10px 5px #888; /* for firefox */

-webkit-box-shadow: 10px 10px 5px #888; /* for chrome, safari */

box-shadow: 10px 10px 5px #888; /* for IE */

border: 1px solid #5a737d;

padding: 10px;

width: 500px;

height:50px;

}

Box shadow properties accept 5 values. From left to right - x axis offset (distance from left), y axis offset (distance from top), blur distance (optional), spread distance (optional), and color.

TEXT SHADOW

ohhh, text shadow

Browser compatibility

Currently available in all major browsers except IE.

the code:

#box_shadow{

text-shadow: 2px 2px 7px #111; /* for all browsers except IE */

color:white;

font-size: 2em;

margin-bottom:5px;

}

Text shadow properties take 4 values. From left to right - x axis offset (distance from left), blur/feathering radius and color.

EMBEDDED FONTS

You can now embed/use any font you wish on a webpage, providing you have the original font file.

Browser compatibility

Currently available in all major browsers, including older versions of IE.

the code:

@font-face{

font-family:"name_of_font";

src: url('fonts/name_of_font.otf);

}

In typical IE fashion, it doesn't accept any fonts other than eot files. If you want to ensure that IE users can view your embedded fonts, you'll need to convert your font file to EOT using a service such as Kirsle's TTF2EOT, use server or clientside scripting to identify the user's browser, and if they're using IE, overwrite the above CSS rule to include the correct .eot font file.

MULTIPLE COLUMNS

The multiple column property can be used to split text/images into separates columns.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,

Browser compatibility

Currently available in Firefox, Chrome, and IE10.

the code:

#multiple_columns{

-moz-column-count:4; /* for firefox */

-webkit-column-count:4; /* for chrome, safari */

column-count:4; /* for IE */

-moz-column-width: 10px;

-webkit-column-width: 10px;

column-width: 10px; /* for IE */

-moz-column-gap: 20px;

-webkit-column-gap: 20px;

column-gap: 20px; /* for IE */

-moz-column-rule: 1px solid #ddccb5;

-webkit-column-rule: 1px solid #ddccb5;

column-rule: 1px solid #ddccb5; /* for IE */

}

Most of the code is reasonably self explanatory. The column-rule property is for the line inbetween the columns.

GRADIENTS

Browser compatibility

Currently available in all major browsers, excluding versions of IE5 and older.

the code:

#gradient{

background: -moz-linear-gradient(top, #ecceff 0%, #540089 100%); /* for firefox */

background: -webkit-gradient(linear, left top, left bottom, from(#ecceff), to(#540089)); /* for chrome, safari */

background: -o-linear-gradient(rgb(100,100,100),rgb(200,200,200));; /* for opera */

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ecceff', endColorstr='#540089'); /* for IE6 & IE7 */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ecceff', endColorstr='#540089'); /* for IE8 */

}

OPACITY

Browser compatibility

Currently available in all major browsers, excluding versions of IE8 and older.

the code:

#opacity{

opacity: 0.3; /* all browsers */

background-image: url(link_to_image);

background-repeat: no-repeat;

background-position: center top;

width:width_of_image.px

height:height_of_image.px

}

Those are some of the main features that we're going to cover, however there are lots more to be learned. Check out some of the references below.

Enjoy!

REFERENCES

- W3Schools
- Find Me By IP
- Smashing Magazine
- CSS3.info