In Depth CSS Part 4: New CSS3 Styles

Mar

In Depth CSS Part 4: New CSS3 Styles

by Amber Weinberg » 19 Comments » Add Your Own » grab the rss feed

Tweet 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

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.

Related Entries:

jump to the comment form ↓

David W.
March 29th, 2010

Hey Amber! Nice summary of the new CSS3 candy we get to play with. You should mention the optional blur value for text-shadow though! http://www.w3.org/TR/css3-text/#text-shadow
Andrew
March 29th, 2010

Nice article, but pseudo-classes you mention doesn’t work in IE, but moste of this works fine in ff, safari, chrome, and for font face better use opent type fonts. Waiting for part 5 :)
Amber Weinberg
March 29th, 2010

@Andrew no CSS3 works in IE, which is why I mentioned you needed to be using webkit or gecko to view it.
Ahmed El Gabri
March 29th, 2010

Nice Article Amber , But i don`t agree that it will take a long time to use “any” CSS3 on every site .

cause some of this styles can be used now like , Border radius , Box Shadow ,Text Shadow cause they don`t affect the usability of the site or break the layout they are just for polishing & adding nice effects , but for new features like pseudo classes maybe it will take some time.the important thing that it degrades gracefully for older browsers.
Amber Weinberg
March 29th, 2010

@Ahmed Right and I use CSS3 now for lots of my sites. However, it’s up to the client, as many want the shadows and rounded corners to work in IE as well, which means using images. What I meant by that statement was that it will take a long time to be able to use CSS3 natively like we use the rest of CSS.
afraz
March 30th, 2010

Hooo !

Great, but when to use this CSS while my client’s are running at IE6 :)??

Only fewer are latest, also do you have any method to work in IE latest? because all my UAE clients are running at IE8 and 7.
would appreciate your detailed reply.

thanks

Afraz
Daniel Winnard
March 30th, 2010

Hi,

Great article Amber,

@Afraz…If you have clients who are running IE and want the effects of CSS3 then you should think about Keith Clarke’s IE-CSS.js script. Still in Beta I think and still not 100% full proof, but a good trade off. Or tell them to join the 21st century or at least get them to download firefox, chrome etc.

Here’s his link
http://www.keithclark.co.uk/labs/ie-css3/
Rapid
March 30th, 2010

Very nice and simple. I was just looking for something like this

Thank you for sharing
Jordan Walker
March 30th, 2010

Nice write up on various aspects of CSS3. Combined with HTML5 and you have the next semantic web architecture catered to 30% of the web traffic. With IE 9 finally some fore thought of w3 standards has been implemented. Now the question is, how to get the 70% to update their browsers?
Web Design Maidstone
March 30th, 2010

Nice article, looking forward to gradually introducing these neat new css3 touches but wish everyone would be forced to update their browsers so we can all enjoy it now!
Divyesh Ardeshana
March 30th, 2010

it is really good help :)
Joost Kiens
March 31st, 2010

Also a lot of these effects and selectors can be faked by using microsoft’s proprietary filters, css expressions, javascript (in between conditional comments), etc. to get similar effects in IE.

For example for opacity:
.transparent {
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /* for ie6, should be first! */
filter: alpha(opacity=50);
opacity: .5;
-moz-opacity:0.5;
-webkit-opacity:0.5;
}

ie last child
#subnav li {background-color: green;}
#subnav li:last-child {background-color: red;}
#subnav li {background-color: expression(this.nextSibling==null?’red’:'green’);}

wordwrap
.word-wrap
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Oh and of course you can easily fake an rgba background with a semi transparent png, will take care of ie7 and up:

div { background: rgb(0, 0, 0) url(‘transparent-black-0.5.png’); } // ie7 and up
div { background: rgba(0, 0, 0, 0.5) none; } // real browsers
Gerben van Dijk
March 31st, 2010

Nice article, but I’m missing some information on browser support for all of these styles (you mentioned it at some of them, but not all).
Amber Weinberg
March 31st, 2010

@Gerben I stated at the very beginning that you must use a webkit or gecko browser…
Lourens
April 4th, 2010

Thanks for the article, I can’t wait till CSS3 has a good browser support ;)
Derrick Workman
April 6th, 2010

Awesome post. It is just too bad we cant use this stuff 100% yet. On many of my designs I have a curved box with a drop shadow which gets really annoying when you constantly have to use images!

Any-case thanks for the well written article!
Joanna
April 30th, 2010

Is there any easy way to add shadow effect to a table and be sure that it will be well visible in the most recent browsers? Or should I use images instead – does someone has a short instructions for that?