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

Comments

  1. says

    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 :)

  2. says

    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.

  3. says

    @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.

  4. afraz says

    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

  5. Daniel Winnard says

    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/

  6. says

    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?

  7. says

    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

  8. says

    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!

  9. says

    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?

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *