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.
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.
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
CSS3 | TRANSFORM
These transforms are great, when you use them in conjunction with a mouse hover you can create some great movement and effects.
This is a brilliant CSS3 generator to help you to create the perfect effect in your web development projects.