Are you new to CSS? The initial process of learning this nifty language can be a little daunting, there’s so much to learn it can sometimes be difficult to figure out where to start. Luckily there’s plenty of valuable information and resources out there on the web that covers everything from the basics through to advanced topics. This collection of 15 articles pulls together some of the best must read blog posts for anyone looking to get started with CSS styling.
This article presents 7 New CSS3 techniques that every web designer and developer should be aware of. CSS3 for sure will leads to greater flexibility and make effects that was previously complex and difficult to create much easier. Unfortunately it is not currently all the leading browsers that support CSS3. In some cases other techniques are available making our life easier while waiting for CSS3 to break through and these will be briefly covered as well.
Be aware that CSS3 features are not yet accessed directly in most browsers and in some it is not even implemented at all, ex. Internet Explorer. Firefox use a prefixed with -moz-, resulting in fx. -moz-box-sizing. Safari 3 / WebKit uses -webkit-box-sizing and Opera just accepts plain box-sizing. Coding CSS3 is therefore currently a bit irritating as you have to write the same code multiple times with different prefixes. Anyway playing with and understanding the oppertunities that new features in CSS3 will offer is is worth investing a bit of your time for.
Border Radius: Create rounded corners
There are many ways to create rounded corners on boxes. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation. While most of these techniques are interesting to investigate, they are not really elegant. The strength and main goal of CSS is to separate content from presentation, yet using these techniques we are adding “unnecessary” mark-up to our code in order to create a visual effect. The reason that all these creative techniques have been invented is simple. With CSS2.1 we can only assing a single background image per element.
The good news is that W3C has offered some new options in CSS3. With CSS3 you’ll be able to add not one, not four, but eight background images to a single element. This means you’ll be able to create all kinds of interesting effects without the need of those additional elements. CSS3 is also adding border-radius that may eliminate the need for images to create rounded corners in most cases. Both Mozila/Firefox and Safari have implemented this new function, it’s not supported in any IE yet. Below you will see an example:
<div style=" background-color: #ccc;
border: 1px solid #000;
padding: 10px;" >
See working example here.
Many exciting new functions and features are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc…
1. Border Radius: Create rounded corners
W3C has offered a very interesting option for borders in CSS3, of which one is border-radius. This CSS3 styling rule allows rounded corners to be set. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.
While the CSS working group still seem to be arguing over the exact syntax, Dave Hyatt went ahead and implemented the currently suggested mechanism into Safari. The technique is fiendishly simple, and I think we’ll all be a lot better off once the W3C stop arguing over the details and allow browser vendors to get on and provide the tools we need to build better websites.
To create a CSS3 rounded corner box, simply start with your box element and apply your 4 corner images, separated by commas.
background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
We don’t want these background images to repeat, which is the normal behaviour, so lets set all their background-repeat properties to no-repeat. Continue reading
For the last part of our introductory series to CSS3, we will be taking a look at the new background properties. These include background size, using more than one background for an element, and background origin (which effects the position of a background).
The new features allow greater control of the background element and will provide designers with a whole array of new possibilities. As usual, examples can be found below:
Before CSS3, background size was determined by the actual size of the image used. It will be possible with the next CSS revision to specify in terms of percentage or pixels how large a background image should be. This will allow you to re-use images in several different contexts and also expand a background to fill an area more accurately. Continue reading
Multiple columns are a major facet of laying out text – newspapers have used them for decades. So important are they that it is amazing that the current way to achieve a multi column layout is one of the most complex techniques for a new designer to grasp.
CSS3 introduces a new module known, appropriately, as multi-column layout. It allows you to specify how many columns text should be split down into and how they should appear. As usual, examples can be found below:
Multiple columns using CSS3
At present, this feature is available in Firefox and Safari 3. When the module becomes finalised in the CSS3 specification it will be adopted by other browsers and rolled into their updates.
There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each: