CSS3 approach to styling web pages

INTRODUCTION

This page is full of CSS3 tricks. Things that we will be able to do with new styling methods.

This doesn’t look like a big deal on the surface but for a developer it is amazing. To be able to create rounded corners without lots of Javascript or hours spend creating images in Photoshop. The same applies to the shading, opacity and multi-column layouts. More about the availability of CSS3 can be viewed here »

CSS3 doesn’t work in all browsers yet, many versions of Internet Explorer being an example but it’s not far off now. So, if you are viewing this in Internet Explorer 8.0 or earlier, simple answer is don’t bother! If you are viewing this in latest versions of Chrome, Safari or Firefox it will display as it should.

WEB FONTS

The headings on this page are created using a specially formatted Web Font. By using this code in the web page everyone is able to view the font, regardless of their browser and the fonts they have on their machine.

CSS3 | BORDER IMAGE

I have a border and it’s an image!

CSS3 | BORDER RADIUS – A ROUNDED CONTAINER

This is a rounded container. The corners can all be different. In this case the top right and bottom left corners are more rounded than the top left and bottom right corners.

CSS3 | BOX SHADOWS | A SHADY CONTAINER

The inner box here has shading and shadows to give the impression that it is slightly raised above the dark box surrounding it. It also has shadowing to give the impression that light is passing over it.

CSS3 | GRADIENTS

Please note that if you are viewing this page in internet explorer then there will be nothing to view here. Maybe try downloading Google Chrome to get a better web experience.

CSS3 | MULTI COLUMN CONTAINER

This is the header

This is probably one of the least impressive things to look at but for a developer it’s monumental. In order to display the newspaper column look, which is much more readable we have always had to set up individual columns and align them on the page. Not too much of a challenge for an experienced developer but this type of layout will be so much easier!

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna.

This Is Another Header

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna.

CSS3 | MULTIPLE BACKGROUNDS OVERLAYING EACH OTHER

CSS3 | OPACITY

.
.
.
.

CSS3 | TEXT SHADOW

Text Shadows

CSS3 | TRANSFORM

Rotate.

Scale.

Skew.


SHARE THIS ...

Share on FacebookTweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someone

© Tracey Rickard. If you want to use any of my content please ask me first, you can't use it without permission that's stealing. You can use an excerpt as long as it is linked back to this article.