In Depth CSS Part 4: New CSS3 Styles




In the first part of In Depth CSS we talked about margins, padding and the box model. Our second post was on the difference between floats and positions and our third post was all about text.

In the fourth, and last, part of our In Depth CSS series, we’ll talk about several new CSS3 features – from fancy styling to mobile Webkit development.

*Note: You’ll need to be using a webkit browser (Safari or Chrome) to see all of these examples or Firefox to see most of them.

Media Queries

Newer touchscreen devices like the iPhone ignore the handheld media specification and instead display the desktop version of a website. If you want to target these devices, you’ll need to use the media queries in CSS3. This way is also recommended by Apple itself.

<link rel="stylesheet" href="iphone.css" type="text/css" media="only screen and (max-device-width: 480px)">

This targets any screen device with a resolution of 480px or less and the ability to read screen type stylesheets. This means you can still set a mobile stylesheet for less capable devices.

Transformations

Pitched by Apple as well, and now part of the CSS3 spec are pure CSS transformations!

	div.transform { 
	width: 35px;
	height: 25px;
	background: #CCC;
	font-size: 10px; 
	margin: 10px 0 15px 50px;
	-webkit-transform: skew(-5deg) rotate(-10deg) translate(0em, 0em) scale(2);
	}

	div.transform:hover { 
	width: 35px;
	height: 25px;
	background: #CCC;
	font-size: 10px; 
	margin: 10px 0 15px 50px;
	-webkit-transform: skew(-20deg) rotate(-20deg) translate(0.8em, 0.5em) scale(3);
	}
Skew!

What is this mess of vendor code? If you’re in Safari, you should be able to hover your mouse over it and see the animation!

Skew changes the shape, or distortion, of the image. Rotate turns in, translate positions it and scale resizes the image.

CSS3 Effects

There are plenty of effects in CSS3 that enable us to no longer rely on so many images.

Box Shadow

Box Shadow gives a drop shadow to any element but text.

	div.box {
	width: 100%; 
	height: 100px; 
	box-shadow: 5px 5px 20px #666;  /*For IE9/Final CSS3 spec*/
	-moz-box-shadow: 5px 5px 20px #666;  /*For Firefox*/
	-webkit-box-shadow: 5px 5px 20px #666;  /*For Chrome/Safari*/
	background: #CCC;
	}
This is a div with a box shadow

Border Radius

Finally an easy way for rounded corner! Border radius even works if you use an image for the background.

	div.border {
	width: 100%; 
	height: 100px; 
	-webkit-border-radius: 5px; /*For Chrome/Safari*/
	-moz-border-radius: 5px;  /*For Firefox*/
	border-radius: 5px;  /*For IE9/Final CSS3 Spec*/
	background: #CCC;
	}
This is a div with rounded corners

Color

CSS3 gives you two new opportunities to define color and transparency.

HSL

HSL is color made up of hue, saturation and lightness. Black therefor would be:

	div { background: hsl(0, 100%, 0%); }

RGBA

Black in RGBA, or red green blue alpha, would be:

	div { background: rgba(0, 10, 0); }

Opacity

Opacity can be applied by itself, which results in making the entire element and its contents transparent, or to RGBA/HSL to make only the color itself transparent.

	div.opacity {
	width: 100%; 
	height: 100px; 
	opacity: 0.5;
	filter: alpha(opacity=50); /*For IE */
	background: #000;
	}
Both the text and background color are at 50% transparency.
	div.opacity2 {
	width: 100%; 
	height: 100px; 
	background: rgba(0,0,0,0.5);
	}
Only background color is at 50% transparency.

Pseudo-Classes

There are a lot of new pseudo classes in CSS3. Here are a few of them.

  • div:nth-child(n) – selects the # of a child of the parent. You can even specify odd or even values.
  • div:nth-last-of-type(n) – selects the same type of element starting from the last child.
  • div:last-child – selects the last child of an element.
  • div:first-of-type – selects the first type of a specified element.
  • div:last-of-type – selects the last type of a specified element.
  • div:only-child – selects an element only if there’s one child.

There are so many more new selectors, that once widely supported, will go a long way to cleaning up our markup!

Type Effects

Text Shadow

Works just like box shadow, but adds a shadow to the text.

	div.type {
	width: 100%; 
	height: 100px; 
	text-shadow: 1px 1px #FFF;
	background: #CCC;
	}
This is some text with a shadow

Word Wrap

Word wrap breaks long words into new lines, instead of letting them break out of the container box.

	div.type2 {
	width: 100px; 
	height: 100px; 
	word-wrap: break-word;
	background: #CCC;
	}
thiswordshouldbebrokenup

Font Face

Font-face allows the use of any font without image or flash replacement. You’ll have to upload the font to your server and link to it like you would any asset.

	@font-face { font-family: Gothic; src: ("/fonts/Gothic.ttf"); }
	p { font-family: Gothic, sans-serif; }

Multiple Backgrounds

Multiple backgrounds for complicated layouts have been my #1 CSS request, No longer will we need a container within a container within a container!

	div.background { background: url('bkg1.jpg') no-repeat, url('bkg2.jpg') no-repeat; }

We can also resize background images with percentage, pixels or em units.

In Conclusion

While most of these are supported in everything but IE, I forsee that it’ll be awhile before we can really use any CSS3 on every site that’s not Mac-specific or targeted to a more advanced audience.

What do you think?

The In Depth CSS Series


Amber Weinberg

About the author:

Amber is a freelancer with over 10 years of experience and specializes in clean, semantic and valid 1.0 Strict XHTML, CSS and Wordpress development. She also writes a web development blog on her portfolio at www.amberweinberg.com.

Comments:

Scroll back to the top
Content


Receive the top stories from SpyreStudios and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!