QTT: Awesome CSS3

For this quick tip I’m going to show you some of my favorite new features in CSS3. There are lots of amazing things happening with html5 and css3, but here are some of my favorite and what they do. CSS3 is not fully supported by every browser so be aware that not all these can be done in all browser but they provide some awesome effects.

Border-Radius

This is one of the best new additions to CSS. No javascript or images required for rounded corners anymore. Firefox and Safari have support for a border-radius that gives you rounded corners. This one is pretty simple to do, although Mozilla currently has a different format then Webkit at the moment and it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.roundedCorners {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
 
.topRounded {
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
 
.rightRounded {
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}

Along my course of using border-radius I attempted to add rounded corners directly to an image. This works as expected in Safari but Firefox does not round them. It seems Firefox has a bug in its support of border-radius on img. This isn’t supported by Internet Explorer yet so they will not see these rounded corners. However, remember, not all sites need to look the same in every browser. The other solution to rounded corners that I use when IE support is needed would be jQuery Corners.

Text-Shadow

Another new addition to css is text-shadow which can give some amazing looks to text. Pair it with @font-face and web typography has never been better. This can give you a slick and appealing letterpress look to a header. Text shadow lets you specify the x-offset, y-offset, blur and color. Check it out:

1
2
3
4

h2 {
	color: #333;
	text-shadow: 0px 2px 3px #555;
}

Pretty easy and gives you an amazing effect for text. Again this won’t be supported in older browsers, luckily the fallback is just plain text, so no problem there.
(more…)