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.

Box-Shadow

Box shadow is one I haven’t used as much as I’ve wanted to. This can give you a nice drop shadow on your section or an image as opposed to just a border. This new addition takes 4 values like text-shadow; x-offset, y-offset, blur and color. Here it is:

1
2
3

.shadow {
	 box-shadow: -5px -5px 0px #333;
}

Font-Face

Last but not least is @font-face. The future of web typography is here and it looks amazing. No more using flash to display non websafe fonts. This is supported now more then ever including by Internet Explorer and is just as easy as the rest to start using. Lets see what it looks like:

1
2
3
4
5
6
7
8
9
10

@font-face {
	  font-family: 'Century Gothic';
	  src: url('CenturyGothic.eot');
	  src: local('Century Gothic Regular'), local('Century Gothic'), 
	  url('CenturyGothic.otf') format('opentype');
}
 
h1 {
	  font-family: Century Gothic;
}

Currently IE only supports its .eot format. The above is bulletproof font-face syntax. It allows IE to load its .eot and delivers a .otf for other browsers or load the local version if present. The above is from Paul Irish’s post on Bulletproof font-face syntax which provides great detail on why this is the best way along with a demo for crossbrowser testing. Its a great article.

Thats it. Three of my favorite new css techniques. There are plenty more in the css3 spec like multiple backgrounds and border-image, which will be awesome to finally have. If you want to follow the css3 spec and what the css working group is doing, check out the Current Work section of W3C.