If I had to choose 3 important CSS3 styles, they would have to be text-shadow, box-shadow, and border-radius. With these styles you can create all kinds of interesting effects. From embossed and debossed text to realistic shadows and rounded corners without png’s and gif’s.

You can see that I have used a lot of these types of styles on my website, download Firebug and check out some of the code for yourself.

Here’s an example how the CSS code looks.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.textshadow {
text-shadow: 1px 1px 2px #333;
}

.boxshadow {
-webkit-box-shadow: 10px 10px 10px #333;
-moz-box-shadow: 10px 10px 10px #333;
box-shadow: 10px 10px 10px #333;
}

.roundedcorners {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

I will be updating the blog very soon with lots of tutorials and web design tips so stay tuned…

SHARE: