Introducing CSS3
By now you should be familiar with the idea that all styling elements must be removed the main flow of code in HTMLS. From now on, pure CSS is used to define the layout and look of your pages.
CSS3 is being developed alongside HTMLS. Here we'll explore two of the most radical effects applied with CSS - shadows and rounded corners- and how CSS3 addresses these commonly requested features of modern web design in a clean and simple manner.
New Elements in CSS3
Just as HTMLS improves on HTML4.01, CSS3 takes the best of what was already in place in CSS2 and adds new elements such as drop shadows, rounded corners and animations that allow designers to build more flexible pages in native code, rather than resorting to third party image editors and plug-ins. CSS3 lets you layout textual content in columns, as in a magazine, specify where breaks fall and how wide the gaps should be between columns. You can use images as borders, stretching them as appropriate, and target elements specifically on the page.The :hover modifier already makes it possible for an action to be carried out only when a visitor’s mouse is in a particular position in relation to the content on your page. New modifiers such as :checked, :enabled and :not let you apply styles to selected radio buttons, enabled page elements and even objects that are not of a specified kind.
The first elements of CSS3 were published in 1999, but it's only now that browser support has advanced sufficiently to let us use it with confidence on a live website. However, the degree to which different browsers render the various elements varies greatly. Luckily, you can target specific browsers with fixes by isolating each rendering engine. Let's take rounded corners as an example, which we could apply to a container called boxout as follows:
.boxout {border-radius: 20px;}
This element isn't universally supported, and won't render properly on older browsers. You'll have to make allowances for this by targeting the earlier Webkit (Safari 3 and earlier) and Mozilla (Firefox) engines using the following code:
.boxout
{border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
Web browsers that don't need the specific -moz and -webkit targets will simply ignore them. This workaround is easy to implement, compliant and won't throw up an error.
Creating Buttons
We'll put this into practice by creating a simple CSS3 button using code instead of graphics. You may wonder why we'd do this when we could just make a button in Photoshop, compress it and embed it within the page. There are two very good reasons. First, it makes lighter demands on your server. The code below that defines the two button states is 285 bytes in length. Doing the same with images would require two graphics- one for the up state and one for the down - and that would total several kilobytes each. Savings of this type soon pay dividends when implemented across every page of a busy site.
Second, the content of the button itself - the words 'Download Linux' - is already search engine-optimized. If you were using a graphic, you would need to use <alt> tags to describe the content to search engine crawlers, and possibly also apply a 'title' attribute to the <a> tag to further improve its indexing. Screen readers will see our button as nothing more than a standard link to which we've applied some styling, which will greatly ease navigation for visually impaired users.
<!DOCTYPE HTML>
<head>
<title>A 3D button</title>
<style type="text/css">
#button a {
background-color: #39F;
border: 5px outset #6CF;
border-radius: 10px;
font: 24pt Arial;
font-weight: 900;
color: #fff;
padding: 10px;
text-decoration: none;
}
#button a:hover {
border: 5px inset #6cf;
padding: 9px 11px 11px 9px;
}
</style>
</head> <body>
<br/>
<div id="button">
<a href="download.html">Download Linux</a></div>
</body>
</html>
The button has no fixed dimensions, so will always be 10 pixels larger than its contents in each direction, allowing us to re-use the code wherever we want to create a button by simply placing a link inside a <div> tag called 'button'. By combining the 10-pixel padding with CSS3's new border-radius attribute, we've given our button rounded corners and then we've given it a sense of depth by extruding the whole thing by five pixels, using the border outset and inset attributes on the up state and down state buttons respectively.
One further change made to the downstate but ton - which is displayed when the visitor hovers their mouse over the link - is to shift the text one pixel up and to the left. We have done this by reducing the top and left padding to 9px in each case, and increasing the right and bottom padding to 11px to maintain the overall size of the button. The text now follows the motion of the button in stepping back into the page.
When specifying the padding on each of the sides of our but ton, we are able to use just ‘10px’ once on the up state button as each is the same, but on the down state button we have to specify the padding on each size individually ('9px 11px 11px 9px'), starting with the top and working around in a clockwise direction. Previewing the results in Chrome, Firefox and Internet Explorer, we can immediately spot a problem here. Chrome (which uses Webkit) and Firefox (which uses Gecko) perform as we would expect, but IE9, which uses the Trident rendering engine, doesn't, despite supporting the border-radius class.
To overcome this problem, we have to notify IE9 of the document coding by adding the following line to the document's <head> area:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Reloading the page, we can now see that it correctly renders with rounded corners in all three browsers. Although IE9's support for CSS3 is better than that of its predecessors, it's by no means perfect, and it lacks support for many elements that remain draft proposals. Microsoft maintains a list of the current supported CSS classes in each version of its browser from IE6 to IE9, which you can find at http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx
Apply Drop Shadow
Our button is complete, but rounded corners are just one of the new features open to us by switching to CSS3. Firefox, Safari and Chrome support drop shadows on both text and graphics, allowing you to apply these effects to your content, again without needing a graphics tool to render them as a JPEG image. The formula for applying shadows is as follows:text-shadow: x-position y-position blur-amount colour;
By changing the offset of your shadow, you can quickly and easily create outlined text using CSS3
To apply a mid-grey shadow to the bottom right of a heading (as though cast by a light positioned above and to the left of the text), you'd use the following code:
h1 {
text-shadow: 2px 2px 4px #bbb;
}
To cast your shadow upwards, as though lit from below, you would change the second pixel measurement (the y-position) to a negative figure, such as -2. However, by removing both offsets and darkening the shadow colour, you can modify this effect to produce a keyline around the text. Changing the font colour to white (#fff) would then result in outlined characters; for example:
h1 {
text-shadow: 0px 0px 4px #000;
}
IE9 doesn't currently support text shadows rendered in CSS3, so it ignores these commands when parsing the stylesheet. The result will be solid text without a drop shadow or an outline.
You can apply a shadow to any onscreen element within a virtual bounding box, such as an image or a div layer. Here we'll define a class called 'imageshadow' to do just that:
.imageshadow {
box-shadow: 8px 8px 12px #ccc;
-webkit-box-shadow: 8px 8px 12px #ccc;
-moz-box-shadow: 8px 8px 12px #ccc;
}
Internet Explorer 9, Opera 10.5 and Firefox 4 natively support the box-shadow attribute, but Safari. Chrome and earlier editions of Firefox (up to 3.5) don't, and so they need the -webkit and -moz variants detailed above. To apply this effect to an image, simply call the class from the image tag:
<img class="imageshadow" src="picture.jpg" />
As a live effect, we can combine our shadow with other effects, such as the border radius that we used earlier, and it will follow the contour of the element to which it’s attached.
Shadows follow the contours of the box object to which they are applied
TechQuark is a mobile-friendly website. Simply bookmark 