CSS3 approach to styling web pages

CSS3 flying

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
Source: Mozilla

This page is full of things that we can do with CSS3.  I have been working with CSS in web development for well over a decade and when these functions first became available with it was so exciting.  CSS is one of my favourite web development tools to work with and, whilst this post was written a few years ago, I don’t think it hurts to keep in on my blog to show some of the things that can be acheived.

This doesn’t look like a big deal on the surface but for a web 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.

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 an old version of 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 because we are no longer dealing with static content with fixed heights and widths, we need to be able to cope with dynamic content that is constantly being updated.

You can create text columns on the fly, so that means that no matter how much text is put into a page or post the columns will adjust and resize automatically.  Large amounts of text on a web page can end up looking very boring but when you break the text up into columns it becomes more readable.

We have moved on quite a lot with grids in website development.  Today we have things like Flexbox to play with and brand new tools like CSS Grid.  All designed to make fantastic websites with great layouts and all designed to cope with ever changing content.

Web development is fab

I really cannot wait to see what comes along next and to see how I can use it in my projects.

CSS3 | MULTIPLE BACKGROUNDS OVERLAYING EACH OTHER

CSS3 | OPACITY

.
.
.
.

CSS3 | TEXT SHADOW

Text Shadows

CSS3 | TRANSFORM

These transforms are great, when you use them in conjunction with a mouse hover you can create some great movement and effects.

Rotate.

Scale.

Skew.

This is a brilliant CSS3 generator to help you to create the perfect effect in your web development projects.

More Reading

10 Reasons to hire a professional freelane web designer & developer

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