With Internet Explorer 9 looking promising, boasting CSS 3 support for all selectors it’s a dream come true for all web designers, especially if the browser is released in the next few months. So let’s start using some fancy new CSS 3 selectors that will work in all browsers except Internet Explorer unless you’re using the beta version of IE 9.

CSS 3 Selectors:

@font-face: – Lets you use custom font in your web pages
Text-shadow: – adds a shadow to the text
Box-shadow: – Adds a drop shadow effect to a div
Border-radius: – Easy way to make curvy corners, to make this work in IE check out curvycorners

To get started create a basic html page in your favourite text editor.

<html>
<head>
<title> CSS 3 Tips and Tricks for Web Site Design</title>

<style type="text/css">
</style>
</head>

<body>

<p></p>

</body>
</html>

Nothing special going on here the <!DOCTYPE HTML> is the new doctype declaration telling the bowser this page is HTML 5. For more on HTML 5 check our blog post on HTML 5

The style tags are for embedded CSS which makes it a lot quicker to apply style rules however its good practice to put all CSS in an external style sheet and call it like so <link rel=”stylesheet” type=”css/text” href=”yourStylesheet.css”> all other tags you should be familiar with.

“HELLO WORLD”

 

Lets start with the cliché industry standard and type Hello World in between the <p> </p> Tags and wrap them in a div and give it the id css3.

Example:

<div id="css3">

<p>Hello World</p>

</div>

Now go to the style tags and copy this in between them

body { margin:  350px auto;  width: 700px; }

p { margin-left: 200px;}

This just brings the <p></p> tag to the centre of the screen and the left margin set on the <p></p> tag gets it ready for what we are going to do to it. Up 1st is @font-face.

@fontface

Not a totally new CSS 3 feature but after some research I found that actually Microsoft’s Internet Explorer had the ability to use custom fonts since IE 5! but because it used proprietary embedded open type format and no other browsers did it never took off, until recently with  Firefox, Safari, Chrome and Opera all supporting @fontface using TrueType or OpenType font.

To use it go get a free custom font from dafont and put it in the folder with your HTML page.

To use the font declare the font by using @fontface followed by open and closing parenthesis (Curly Brackets) in between them write font-family: then the name of your font and don’t forget the closing semi colon.

Then you need the css to find the font, do this by writing src: url(‘your/font-here’);

Example:

@fontface {

font-family: Arista;

src: url('Arista.ttf');

}

If you refresh your page now this is what you will see.

hello World example

It won’t work until you add the font-family property to the <p> tag or any tag that you want to use the font.

Example:

p { font-family: Arista; margin-left: 180px;}

Now refresh your page, you should now see the below. If not go back and see where you have gone wrong.

hello World New Font example

So that’s how you apply custom fonts and always remember to list similarback up fonts in case a user who comes to your site doesn’t have a browserthat supports @fontface.

Border-radius

The border-radius property makes it easy to create rounded corners and to pick what corners get rounded without using multiple divs and images. to make this work in IE check here

Here is the syntax:

-moz-border-radius: 20px; to use in Firefox add “-moz-” to the font of border-radius

webkit-border-radius: 20px; to make it work in Safari and Chrome add “-webkit-” before border-radius

border-radius: 20px; and finally for opera just use border-radius

css 3 border Radius

Here is an example of the border radius in action with 20 pixels applied to the corners.

To get started copy the following in between the style tags:

#css3 {

-moz-border-radius: 20px;

-webkit-border-radius:20px;

border-radius: 20px;

background-color: #BBB;

}

This selects the div with an id of css3 and applies a 20 pixel border to it and gives it a grey background colour so you can see the border radius working.

You can also choose what corners you want to style with border-radius like so:

#css3 {

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 20px;

-webkit-border-top-right-radius: 20px;

-webkit-border-top-left-radius: 20px;

border-top-left-radius: 20px;

border-top-left-radius: 20px;

background-color: #BBB;

}

border Radius Top Left top Right

Top left and top right border radius

Have a play around you can have the bottom corners curved or the top right and bottom right for example.

Text-shadow

This allows you to add a simple but effective text shadow to text. Only works in Firefox, Safari, Chrome, Opera and Internet Explorer 9

Example:

text-shadow

To do this all you need to do is edit the p selector and add the text-shadow property like this:

P {

font-family: Arista;

margin-left: 200px;

font-size: 60px;

color: #fff;

text-shadow: 3px 3px #000;
}

The first value moves the shadow left and moves right if you put a minus in front of the digit. The second value moves the shadow down and moves up if you put a minus in front of the digit the last value is the colour of the text shadow.

To make yours look like mine add in the colour value #fff to get white text with a black drop shadow.

Box Shadow

box-shadow

Another popular design feature is drop shadows and its easy to do with a little bit of CSS 3. Works in all browsers except IE8 and below

Add the following lines of code to #css3

Example:

#css3 {

-moz-border-radius: 20px;

-webkit-border-radius:20px;

border-radius: 20px;

background-color: #BBB;

-moz-box-shadow: 10px 10px 5px #333;

-webkit-box-shadow: 10px 10px 5px #333;

box-shadow: 10px 10px 5px #333;

}

You should now have a box shadow to the #css3 div, you can position the shadow exactly the same way as moving the text-shadow about. I hope this quick tutorial taught you something new about CSS3.