html, css, jQuery, PHP, mySQL

« | »

CSS From Scratch. 8:3 Fancy Boxes

shadow

box shadows and drop shadows add drama

How do web designers manage to get those cool effects, like overlapping boxes, shadows and rounded corners? Well, it used to be fairly tricky to do, using extra <span> elements with background images (for rounded corners) and extra divs with darker backgrounds (for box shadows). Don’t even mention drop shadows on text: the only browser which attempted this was Internet Explorer, but it used proprietory filters which were unsatisfactory at best. Drop shadows are now possible using text-shadow, but we will not cover those in this lesson. We will, however, look at rounded corners, box shadows and the z-index (which allows boxes to overlap – this was a feature in CSS2.1 and has been mentioned in an earlier lesson).

Z-index

We have already covered positioning elements with reference to x- and y-coordinates. Now we look at the third axis, z. This describes the depth of a point in 3-dimensional space. By default all elements have a z-index of 1. Elements with the same z-index cannot overlap. Overlapping is achieved by first assigning a different value of z, and then using positioning. Higher numbers represent an element that is ‘closer’, i.e. higher up in the stacking order. Lower numbers represent elements that are behind, or lower than others in the stacking order. The value of z can be any whole number, including negatives and zero.

div.special {z-index: -3;}

z-index

z-index gives the 3-d stacking order of elements

Box Shadow

To add a shadow to an element, use the property box-shadow. This takes several values in a long list. These specify, in order, the x-offset (positive or negative integer, usually in pixels), the y-offset (same units), the amount of blur (pixels), the amount of spread (pixels), the colour of the shadow, and a last optional value which is inset. This last value inverts the shadow and places it inside the border of the box (see below).

Examples:

div.special {box-shadow: 2px 2px 5px 3px blue inset;}

div.other {box-shadow: 2px 2px 0 0 #cccccc;}

Multiple box shadows may be set on the same element, simply by listing a number of different sets of values separated by commas.

Example:

div.special {
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
}

box-shadow

box shadows with CSS

Rounded Corners

Rounded corners can be given to an element using the border-radius property. Imagine a circle drawn so that its edge is just touching two sides of the box, and then cutting around a quarter of the circle to create a rounded edge. The radius of a circle is the distance between its centre and its outer edge: this value gives the amount of curvature on the box.

Radius

The radius is the distance from the centre to the outer edge.

The four corners of the box can be separately given, so all four corners can have different curves or none at all. This is done using the following notation:

div.special {

border-top-right-radius: 0;

border-top-left-radius: 15px;

border-bottom-left-radius: 30px;

border-bottom-right-radius: 45px;

}

A border-radius of 0 gives a right angle.

Border-radius can take two values instead of just one. When two values are given, these specify the horizontal radius and vertical radius in order. So the curve becomes a section of an elipse rather than a circle.

Example:

div.special {border-top-left-radius: 15px 30px;}

corner-large-mix

Eliptic corners from the W3C website.

Vendor-specific prefixes

 For many CSS3 properties there is specific syntax that needs to be used to get a particular browser to obey the rule. These use vendor (browser) specific prefixes, and the syntax for both the property and the value may vary from the official syntax. You will need to look these up unless you are using a particular property very often, as they are sometimes very different from the official version. Simply list all of the alternatives in your CSS: other browsers will ignore properties using the prefix for another browser. When you have to include these special versions of CSS3 properties and values, always make sure the last one in the list is the generic version. This is because as browsers become more up-to-date they may begin to read the correct syntax, and the last rule in the list will always override earlier rules.

The prefixes are:

-moz- [mozilla: this targets FireFox]

-webkit- [webkit: this targets Safari and Chrome]

-o- [opera: this targets Opera]

-ie- [trident: this targets Internet Explorer]

More CSS3 properties

There are many more CSS3 properties which can be used on boxes to alter their appearance or behaviour. Some of the most exciting include translate, transform and gradient. You can find information on all of these and more at:

css3files.com

css3.info

Tags: , , , , , , , , , , , , , , , , , ,

This entry was posted on Wednesday, August 10th, 2011 at 11:45 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply