A while ago I wrote an article about CSS3 and some of the features that it can perform to allow users to develop more efficient and better looking websites.

In this article I will be looking at some of the essential CSS3 techniques that all designers and developers should know about. Only the most modern browsers such as Safari, Firefox and Chrome partially or fully support CSS3 but this won’t stop people from experimenting with it in their sites.

Text Shadow

This property allows you to add a shadow underneath any text in HTML. If you use it make sure that your text can be read in other browsers that don’t support CSS3. To add a shadow to text you just add text-shadow to an element in the CSS code for example :

h2 { text-shadow: #560000 1px 5px 1px; }

This will add a dark red shadow, which is 1px to the right, 5px to the bottom and a blur radius of 1px to all h2 elements.

Font Face

The font face property will allow you to use other fonts instead of the standard Arial, Helvetica and Georgia fonts that everyone uses. Providing the custom font can be called from a web location, it can be displayed anywhere on a site. If you use this property you will need to make sure you can use the font due to copyright issues.

To use this property you need to put @font-face in your css code, then give the font a name and specify the location of the font. For example:

@font-face { font-family: Rockwell; src: url('http://example.co.uk/fonts/Rockwell.ttf'); }

h1 { font-family: Rockwell; font-size: 2em; }

Once the font has been defined you need to use the font-family property to set the font of each element.

Selectors

Selectors allow you to select elements and apply styles to them with greater specificity. These selectors will save you time and also keep your HTML code to a minimum. The amount of IDs and classes will be reduced and allow you to be more organised with your stylesheet.

General sibling combinator

This selector allows you to target siblings of a specified element. For instance, if you wanted paragraphs in the same hierarchy as a h1 then you would put:

h1~p { color: green; }

This will make all the text under a h1 green but only if it is on the same level as the h1 but if there is text in a div under the first paragraph, it won’t be affected.

<h1>Heading</h1>
<p>This paragraph is green</p>
<div>
<p>This paragraph is not green</p>
</div>


Multiple Backgrounds

CSS3 allows you to use multiple backgrounds in an element using a few different properties, which include background-image, repeat, position and size. To use multiple backgrounds in a single element you need to specify the correct properties and separate them with commas.

For example:

body { background: url(images/bg-bottom-left.png) top right fixed no-repeat,
url(images/bg-bottom-right.png) top left fixed no-repeat,
url(images/bg-top-left.png) bottom left fixed no-repeat,
url(images/bg-top-right.png) bottom right fixed no-repeat;
background-color: #000; }


Rounded Corners

Creating rounded corners isn’t an easy task but with CSS3 it’s much easier when you use the property border-radius. This will set the roundness for each corner of a box.

The example code below will give a div 5px rounded corners.

div { border: 2px solid #ccc; padding: 5px; background: #560000; -moz-border-radius: 5px; -webkit-border-radius: 5px; width: 500px; }

You will notice that –moz and –webkit are used in the code. These are used to display the rounded corners in Firefox, Safari and Chrome.

Resizing Elements

Now you are able resize elements using the resize property. The only problem with this property is that it only works in Safari. If you add the code below to a div it will display a small triangle in the bottom right corner of the div and allow you to drag and resize it.

div { resize: both; }

CSS3 opens up more possibilities to be able to create more flexible and complex websites that reduce the need for graphics and scripting. If you would like to learn more about CSS3, then visit the W3C CSS3 Current Work page.

Related posts:

1. Quick Tip – CSS3 Rounded Borders
2. Simple CSS Sprites
3. CSS Absolute Positioning
4. Grid Frameworks
5. Safari and HTML5

Posted By: Oli

I’ve been interested in web design for a while and I went to university to study a degree in media and graphics. While at university I developed my design skills using Adobe Photoshop, Flash, Dreamweaver and Adobe After Effects.

Visit Authors Website

Tags: CSS, CSS3

This entry was posted on Friday, March 26th, 2010 at 3:33 pm and is filed under CSS, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.