CSS3 Techniques

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.

css3 techniques CSS3 Techniques

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 page.

Related posts:

  1. Web Design GM’s jQuery Favorites

Tags: ,

Leave a Reply


Contact Us Today...

If you have any questions about our services or want to arrange a free no obligation consultation contact us today or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Bit Torrent Study Discovers Most File Sharers Are Now Monitored

Ever heard of torrents or used Bit Torrent to download movies, music or shared files over the internet? Researchers have discovered that anyone who does use Bit Torrent to download files over the World Wide Web will most probably be monitored. Studies were carried out by Birmingham University and they have discovered that if someone [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482