Posts Tagged ‘webkit’


Multiple Backgrounds with CSS3

Images used in this tutorial:

                              

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

Here’s a basic example:

Here’s the code for this:

#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
How it Works

Multiple background images can be specified using either the individual background properties or thebackground shorthand property. We’ll first look at an example using the individual background properties.

Specifying multiple backgrounds using the individual background properties

Multiple background images are specified using a comma-separated list of values for thebackground-image property, with each value generating a separate ‘background layer’. The the first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively.

The Syntax:
background-image: <bg-image> [ , <bg-image> ]*<bg-image> = <image> | none

Note: a value of ‘none’ still generates a layer.

Example:
background-image: url(sheep.png), url(betweengrassandsky.png);

A comma separated list is also used for the other background properties; background-repeat,background-attachmentbackground-positionbackground-clipbackground-originand background-size.

Example:
background-position: center bottom, left top;

The comma separated lists from the individual properties are then matched up, starting with the first value in each list.

If excess values are specified for any of the individual properties they are ignored. For example; if four values are supplied for the background-position property, but only three values are supplied for the background-image property, the fourth value in the list would not be used.

Similarly, if not enough values are supplied for any of the individual properties, the list of values for that particular property are repeated, from the first value, as many times as required. For example; if only two values are supplied for the background-position property, but three values are supplied for the background-image property, the list of values for background-position would be repeated, thus the third background image specified would have the same background-positionvalue as the first.

If a background color is specified, using the background-color property, this is applied as the final background layer, behind any background images.

Specifying multiple backgrounds using the ‘background’ shorthand property

Multiple backgrounds can also be specified using the background shorthand property.

The Syntax:
background: <bg-layer> , ]* <final-bg-layer><bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> ||<attachment> || <box>{1,2} <final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> ||<attachment> || <box>{1,2} || <background-color>

Note: background-color is only permitted in the final background layer.

Example:
background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;

The CSS3 Backgrounds and Borders specification offers further clarification of the backgroundshorthand syntax:

The number of comma-separated items defines the number of background layers. Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of ‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’ and ‘background-attachment’ to that property’s initial value, then assigns any explicit values specified for this layer in the declaration. Finally ‘background-color’ is set to the specified color, if any, else set to its initial value.

If one <box> value is present then it sets both ‘background-origin’ and ‘background-clip’ to that value. If two values are present, then the first sets ‘background-origin’ and the second ‘background-clip’.

Browser Compatibility

Browser support for multiple backgrounds is relatively widespread with all of the main browsers offering support, without the need for vendor prefixes.

Firefox has supported multiple backgrounds since version 3.6 (Gecko 1.9.2), Safari since version 1.3, Chrome since version 10, Opera since version 10.50 (Presto 2.5) and Internet Explorer since version 9.0.

Cross Browser Examples

Here are a couple of examples which should work in all of the browsers detailed above. For each example the code is given using both the individual background properties and the background shorthand property.

Example A

Our first example has an old-style paper background, with additional decorative images aligned to the the top-left and bottom-right corners:

The code for this can be written in one of two ways, either:

#exampleA {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}

or:

#exampleA {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
}
Example B

The example below (courtesy of Opera) demonstrates how multiple backgrounds can be used to create thesliding doors technique:

Again, the code for this can be written in one of two ways, either:

#exampleB {
display: inline-block;
margin: 1em; padding: 1em;
background-image: url(left.png), url(right.png), url(main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top ;
}

or:

#exampleB {
width: 500px;
height: 250px;
background: url(left.png) left top no-repeat, url(right.png) right top no-repeat, url(main.png) left top repeat-x;
}
Additional Notes & Further Reading

Further information on multiple backgrounds can be found in the CSS Backgrounds and Borders Level 3 specification, avaliable here.


Background-size – CSS3

Images used in this tutorial:

Another new property introduced by the CSS3 Backgrounds and Borders module isbackground-size. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover.

Browser support has grown of late, with the current versions of most popular browsers now supportingbackground-size, including Firefox, Safari, Chrome, Internet Explorer and Opera, without the need for vendor prefixes.

Here’s a very basic example. In the first box below background-size has been set to auto (the default value) meaning that the background image is shown at its original size. In the second box background-size has been set to 275px (w) x 125px (h). In both cases, the background image has been defined so as not to be repeated.

The code for this is relatively straightforward:

#example1 {
background-size: auto;
}#example2 {
background-size: 275px 125px;
}
How it Works

The background-size property can be used to specify the size of background images in one of three ways. Designers can choose to either supply one or two lengths, percentages or auto keywords, or use thecontain keyword, or the cover keyword.

Like the various other background properties, background-size can accept multiple values, specified using a comma-separated list, when working with multiple backgrounds, keep reading for more information.

The Syntax
background-size: <bg-size> [ , <bg-size> ]*<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
Examples
background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;

Let’s first take a look at how lengths, percentages and the auto keyword work, before moving on to look at the contain and cover keywords.

Specifying the Background Size using Lengths, Percentages or ‘auto’

Specifying the background size using lengths and percentages does exactly what you’d expect. For each background image, two lengths or percentages can be supplied – the first relating to the width of the background image, the second relating to the height.

Note: when percentages are used, these relate to the width/height of the ‘background positioning area’ of the containing element (ie. the space available for the background), not the width/height of the background image itself.

The auto keyword can be used in place of either value, and if only one value (length/percentage/auto) is supplied for background-size, this will be treated as the width, and the height will be assumed to be auto.

Where one value is a defined length or percentage and the other value is auto, the background image will be scaled according to the specified length or percentage in such a manner that its intrisic proportions (ratio) are maintained.

If background-size is not specified, the default value is auto for both width and height. Where both values are auto, the image is shown at its original size.

Let’s take a look at a few examples to demonstrate this. The same background image is used in all of the examples below, it’s original dimensions are 550px width x 250px height. In all examples the background image has been defined so as not to repeat, and the following code is assumed in addition to that shown for each example:

#example {
width: 550px;
height: 250px;
background-image: url(background.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: as defined in individual examples;
}
Example A

In our first example, background-size has been defined as ‘auto’ for both values, therefore the background image will be shown at it’s original dimensions; 550px (w) x 250px (h).

The code for this could be expressed in one of two ways:

background-size: auto auto;

or

background-size: auto;

Remember, where only one value is specified, the second is assumed to be ‘auto’.

Example B

For our second example, background-size is specified as 200px (w) and auto (h), therefore the background image will be shown at the following dimensions; 200px (w) x 91px (h), the width as specified and the height reduced proportionately to the width, so as to maintain the image’s original proportions/ratio.

Again, the code for this could be expressed in one of two ways:

background-size: 200px auto;

or

background-size: 200px;
Example C

For our third example, background-size is specified as auto (w) and 125px (h), therefore the background image will be shown at the following dimensions; 275px (w) x 125px (h), the height as specified and the width reduced proportionately to the height, so as to maintain the image’s original proportions/ratio.

Here’s the code:

background-size: auto 125px;
Example D

For our fourth example, background-size is specified as 200px (w) and 200px (h), therefore the background image will be shown, as defined, at the following dimensions; 200px (w) x 200px (h), even though this means the image’s original proportions/ratio will be lost.

Here’s the code:

background-size: 200px 200px;
Example E

Our next example uses percentages to define background-size, in this case specified as 50% (w) and auto (h), therefore the background image will be shown at the following dimensions; 275px (w) x 125px (h), the width of the image is equal to 50% of the containing element’s width (in this case 550px), and the height of the image is reduced proportionately to the width, so as to maintain the image’s original proportions/ratio.

As discussed earlier in this article, when the second value is auto, this could be expressed in one of two ways:

background-size: 50% auto;

or

background-size: 50%;

Remember, percentages relate to the width/height of the ‘background positioning area’ of the containing element (ie. the space available for the background), not the width/height of the background image itself.

Example F

This example again uses percentages to define background-size, this time auto (w) and 25% (h), therefore the background image will be shown at the following dimensions; 138px (w) x 63px (h), the height of the image is equal to 25% of the containing element’s height (in this case 275px), and the width of the image is reduced proportionately to the height, so as to maintain the image’s original proportions/ratio.

Here’s the code:

background-size: auto 25%;
Example G

For our final example we’re going to use both lengths and percentages to define background-size, in this case 80% (w) and 125px (h), therefore the background image will be shown at the following dimensions; 440px (w) x 125px (h), the width is equal to 80% of the containing element’s width (in this case 550px), and the height is 125px as defined.

Here’s the code:

background-size: 80% 125px;
Specifying the Background Size using ‘contain’ or ‘cover’

The two other possible values for background size are the keywords contain and cover.

If the contain keyword is used, the background image is scaled, while preserving the image’s original proportions / aspect ratio, so as to be as large as possible providing that it is contained within the background positioning area, ie. neither the image’s width or height exceed the background positioning area. As such, depending on whether or not the proportions of the background image match those of the background positioning area, there may be some areas of the background which are not covered by the background image.

If the cover keyword is the used, the background image is scaled, again preserving the image’s original proportions / aspect ratio, this time to be as large as possible so that the background positioning area is completely covered by the background image, ie. both the images width or height are equal to or exceed the background positioning area. As such, again depending on whether or not the proportions of the background image match those of the background positioning area, some parts of the background image may not be in view within the background positioning area.

Let’s take a look at a few of examples, firstly using the contain keyword. The same background image has been used for each example, the image’s original dimensions are 550px (w) x 250px (h).

Example H

In this example, background-size has been set to contain. Although the original image is slightly larger than the containing element, and as such is reduced in size, the aspect ratios of the image and containing element match, meaning that the background image fits exactly in the background positioning area.

Here’s the code for this example:

#exampleh {
width: 495px;
height: 225px;
background-image: url(betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: contain;
}
Example I

In our second example, again background-size has been set to contain. Again the original image is slightly larger than the containing element and needs to be reduced in size, however this time the aspect ratios of the image and containing element don’t match, meaning that while the whole background image is contained within the background positioning area, there is empty space around the image.

Here’s the code for this example:

#examplei {
width: 580px;
height: 200px;
background-image: url(betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: contain;
}
Example J

Our third and final example using the contain keyword can be opened in a new window. In this case the background image has been assigned to the body element, try re-sizing your browser window to see how the background image behaves.

Here’s the code for this example:

body {
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: contain;
}
Example K

Now let’s take a look now at some examples using the cover keyword.

In this example, background-size has been set to cover. As in example H above, although the original image is slightly larger than the containing element, and as such is reduced in size, the aspect ratios of the image and containing element match, meaning that the background image fits exactly in the background positioning area. In such circumstances, there is no difference in behaviour between the cover and contain keywords.

Here’s the code for this example:

#examplek {
width: 495px;
height: 225px;
background-image: url(betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: cover;
}
Example L

In this example, again background-size has been set to cover. As in example I above, the aspect ratios of the image and containing element don’t match, however as background-size has been set to cover, this time the entire background positioning area is covered by the background image and as such part of the image is lost.

Here’s the code for this example:

#examplel {
width: 580px;
height: 200px;
background-image: url(betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: cover;
}
Example M

As in example J above, our third and final example using the cover keyword can be opened in a new window. Again the background image has been assigned to the body element, try re-sizing your browser window to see how the background image behaves.

Here’s the code for this example:

body {
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: cover;
}
Defining the Background Size of Multiple Background Images

The background-size property, like the various other background properties, can accept multiple values for background size, specified using a comma-separated list, when working with multiple backgrounds.

Let’s take a look at a quick example. The element below has three background images specified, with differing values for background-size for each image.

Here’s the code for this example:

#examplen {
width: 580px;
height: 200px;
background-image: url(sheep.png), url(sheep.png), url(betweengrassandsky.png);
background-repeat: no-repeat;
background-position: 20px 100px, 400px 50px, center bottom;
background-color: #EEE;
background-size: 70px, auto, cover;
}
Browser Support

Browser support for background-size has grown of late, with the current versions of most popular browsers now supporting the property, including Firefox, Safari, Chrome, Internet Explorer and Opera.

Firefox (Gecko)

Mozilla Firefox 4.0+ (Gecko 2.0+) offers full support for the background-size property.

Prior to version 4.0, -moz-background-size was supported from Firefox 3.6 (Gecko 1.9.2), however this is no longer support from 4.0 onward.

Internet Explorer

Microsoft Internet Explorer 9.0+ offers full support for the background-size property.

Prior to version 9.0, Internet Explorer offered no support for background-size.

Opera

Opera 10.0+ offers full support for the background-size property.

Prior to version 10.0, -o-background-size was supported in Opera 9.5, however there were some descrepancies between Opera’s implementation and the CSS3 specification.

Safari / Chrome (Webkit)

Safari 4.1+ (webkit 532) and Chrome 3.0+ both offer full support for the background-size property.

Prior to these versions, Safari 3.0+ (webkit 522) and Chrome 1.0+ both supported -webkit-background-size, however this followed an earlier version of the specification (without support for the contain and cover keywords).

Additional Notes and Further Reading

The specification makes the following statement as to how the background-size property interactives with the background-repeat property:

If ‘background-repeat’ is ‘round’ for one (or both) dimensions, there is a second step. The UA must scale the image in that dimension (or both dimensions) so that it fits a whole number of times in the background positioning area.

If ‘background-repeat’ is ‘round’ for one dimension only and if ‘background-size’ is ‘auto’ for the other dimension, then there is a third step: that other dimension is scaled so that the original aspect ratio is restored.

Further reading on the background-size property may be found in section 3.9 of the CSS3 Backgrounds and Borders specification here.


Box-shadow, one of CSS3′s best new features

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix).

Here’s a basic example:

In theory, the code for this is straightforward:

#example1 {
box-shadow: 10px 10px 5px #888;
}

But for the moment, as with many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit:

#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

 

How it Works

The box-shadow property can accept a comma-separated list of shadows, each defined by 2-4 length values (specifying in order the horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow), an optional color value and an optional ‘inset‘ keyword (to create an inner shadow, rather than the default outer shadow).

 

The Syntax:
box-shadow: none | <shadow> [ , <shadow> ]* 

<shadow> = inset? && [ <length>{2,4} && <color>? ]

 

Examples:
box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

 

Let’s first look at how to create a basic outer shadow, before going on to look at the inset keyword, layering multiple shadows and how to spice up your shadows with RGBa colors(?).

 

Creating a basic drop shadow

By default, shadows are drawn on the outside of elements. According to the specification;

An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only: it is clipped inside theborder-box of the element.

The first step is to define the shape of the shadow by specifying 2-4 length values.

The first value defines the horizontal offset of the shadow, with a positive value offseting the shadow to the right of the element, and a negative value to the left.

The second value defines the vertifical offset of the shadow, with a positive value offsetting the shadow from the bottom of the element, and a negative value from the top.

If supplied, an optional third value defines the blur distance of the shadow. Only positive values are allowed, and the larger the value, the more the shadow’s edge is blurred. The specification does not include an exact algorithm for how the blur distance should be calculated, however it does elaborate as follows:

…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.

An optional fourth value can be supplied to define the spread distance of the shadow. A positive value will cause the shadow shape to expand in all directions, while a negative value will cause the shadow shape to contract. The specification goes into much greater detail on how the shadow shape is calculated as follows:

If a spread distance is defined, the shadow is expanded outward or contracted inward by an operation equivalent to applying twice the absolute value of the spread value to a blur operation as defined below and thresholding the result such that for a positive spread distance all non-transparent pixels are given the full shadow color and for a negative spread distance all non-opaque pixels are made transparent. The UA may approximate this operation by taking an outward outset of the specified amount normal to the original shadow perimeter. Alternatively the UA may approximate the transformed shadow perimeter shape by outsetting (insetting, for inner shadows) the shadow’s straight edges by the spread distance and increasing (decreasing, for inner shadows) and flooring at zero the corner radii by the same amount. (The UA may even combine these methods, using one method for outer shadows and another for inner ones.) For corners with a zero border-radius, however, the corner must remain sharp—the operation is equivalent to scaling the shadow shape. In any case, the effective width and height of the shadow shape is floored at zero. (A zero-sized shadow shape would cause an outer shadow to disappear, and an inner shadow to cover the entire padding-box.)

The diagram below (taken from the W3C Backgrounds and Borders Candidate Recommendation) offers a good example of the effects of spread and blur on the shadow:

An optional color value can also be supplied, directly after the 2-4 length values, to define the shadow’s color. If not supplied, a UA-chosen default should be applied, however, whilst in Firefox/Opera/IE9 the default color is black, in Safari/Chrome (webkit) no shadow is visible unless a color is specified.

Here are a few examples of shadows with differing offsets, spread and blur.

 

Examples:

Example A shows a shadow offset to the left and top by 5px:

#Example_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

 

Example B shows the same shadow with a blur distance of 5px:

#Example_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

 

Example C shows the same shadow with a spread distance of 5px:

#Example_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

 

Example D shows the same shadow with both a blur distance of 5px and a spread distance of 5px:

#Example_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

 

Example E shows a shadow with no offset and a blur distance of 5px:

#Example_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

 

Example F shows a shadow with no offset and both a blur distance of 5px and a spread distance of 5px:

#Example_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

 

 

Creating an inner shadow with the ‘inset’ keyword

An optional ‘inset‘ keyword can be supplied, preceding the length and color values. If present, this keyword causes the shadow to be drawn inside the element. According to the specification:

An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The inner shadow is drawn inside the padding edge only: it is clipped outside the padding box of the element.

Here are the same examples as above, this time with the ‘inset‘ keyword present.

 

Examples:

Example G shows an inner shadow offset to the left and top by 5px:

#Example_G {
-moz-box-shadow: inset -5px -5px #888;
-webkit-box-shadow: inset -5px -5px #888;
box-shadow: inset -5px -5px #888;
}

 

Example H shows the same inner shadow with a blur distance of 5px:

#Example_H {
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
}

 

Example I shows the same inner shadow with a spread distance of 5px:

#Example_I {
-moz-box-shadow: inset -5px -5px 0 5px #888;
-webkit-box-shadow: inset -5px -5px 0 5px#888;
box-shadow: inset -5px -5px 0 5px #888;
}

 

Example J shows the same inner shadow with both a blur distance of 5px and a spread distance of 5px:

#Example_J {
-moz-box-shadow: inset -5px -5px 5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}

 

Example K shows an inner shadow with no offset and a blur distance of 5px:

#Example_K {
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inner 0 0 5px #888;
}

 

Example L shows an inner shadow with no offset and both a blur distance of 5px and a spread distance of 5px:

#Example_L {
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}

 

 

Layering multiple shadows

The box-shadow property allows elements to have multiple shadows, specified by a comma seperated list. When more than one shadow is specified, the shadows are layered front to back, as in the following example.

 

Example:

Example M shows five shadows specified in the following order; firstly a black shadow with a spread distance of px and a blur distance of px, secondly a lime shadow offset to the top right, thirdly a red shadow offset to the bottom right with a blur distance applied, fourthly a yellow shadow offset to the bottom left, and lastly a blue shadow offset to the top left with a blur distance applied:

#Example_M {
-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
}

 

 

Spicing up shadows with RGBa color & border-radius

The box-shadow property can be further enhanced using CSS3 RGBa colors to create shadows with differing levels of opacity, as demonstrated by the examples below.

 

Examples:

Example N shows a black shadow, specified using standard RGB color, offset to the right and bottom by 5px:

#Example_N {
-moz-box-shadow: 5px 5px rgb(0,0,0);
-webkit-box-shadow: 5px 5px rgb(0,0,0);
box-shadow: 5px 5px rgb(0,0,0);
}

 

Example O shows the same shadow, this time with the color black specified using RGBa color with an opacity of 70%:

#Example_O {
-moz-box-shadow: 5px 5px rgba(0,0,0,0.7);
-webkit-box-shadow: 5px 5px rgba(0,0,0,0.7);
box-shadow: 5px 5px rgba(0,0,0,0.7);
}

 

Example P shows the same shadow, this time with the color black specified using RGBa color with an opacity of 50%:

#Example_P {
-moz-box-shadow: 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px rgba(0,0,0,0.5);
}

 

The box-shadow property can also be applied to elements with rounded corners, created using theborder-radius property, in which case the shadow will follow the curve specified by the border-radius property (note: although IE9 seems to struggle with this).

 

Examples:

Example Q shows a shadow offset to the bottom and right by 5px, with a border-radius of 5px applied to each corner:

#Example_Q {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px black;
-webkit-box-shadow: 5px 5px black;
box-shadow: 5px 5px black;
}

 

Example R shows the same shadow with a blur distance of 5px:

#Example_R {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}

 

 

Browser Support

The box-shadow property has not caught on as quickly as some of its peers (such as the border-radius property) and the property was removed from the CSS3 Backgrounds and Borders specification when it reached Candidate Recommendation earlier this year, pending further development, however the property has been reintroduced in the latest version of the specification and browser support has been growing steadily of late.

The table below provides an overview of current browser support.

Browser Basic support Multiple shadows inset keyword Spread radius
Internet Explorer 9.0 box-shadow 9.0 9.0 9.0
Firefox
(Gecko)
4.0
(2.0)
box-shadow 4.0
(2.0)
4.0
(2.0)
4.0
(2.0)
3.5
(1.9.1)
-moz-box-shadow 3.5
(1.9.1)
3.5
(1.9.1)
3.5
(1.9.1)
Opera 10.5 box-shadow 10.5 10.5 10.5
Safari/Chrome
(WebKit)
3.0/1.0
(522)
-webkit-box-shadow 4.0/1.0
(528)
5.0/4.0
(533)
5.0/4.0
(533)
Browser support data courtesy of Mozilla Developer Center.

 

Additional Notes and Further Reading

The CSS3 Backgrounds and Borders specification makes the following additional notes with regard to the effect of box-shadow on layout and how it interacts with other elements:

  • Shadows do not influence layout and may overlap other boxes or their shadows. In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).
  • If an element has multiple boxes, all of them get drop shadows, but shadows are only drawn where borders would also be drawn; see ‘box-decoration-break’.
  • Shadows do not trigger scrolling or increase the size of the scrollable area.
  • The ‘border-image’ does not affect the shape of the box-shadow.
  • The ‘box-shadow’ property applies to the ‘::first-letter’ pseudo-element, but not the ‘::first-line’ pseudo-element. Outer shadows have no effect on internal table elements in the collapsing border model. If a shadow is defined for single border edge in the collapsing border model that has multiple border thicknesses (e.g. an outer shadow on a table where one row has thicker borders than the others, or an inner shadow on a rowspanning table cell that adjoins cells with different border thicknesses), the exact position and rendering of its shadows are undefined.

Full details can be found in section 6.2 of the specification here.


Border-radius: create rounded corners with CSS!

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology.

Here’s a basic example:

The code for this example is, in theory, quite simple:

#example1 {
border-radius: 15px;
}

However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details):

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}

 

How it Works

Rounder corners can be created independently using the four individual border-*-radius properties (border-bottom-left-radius, border-top-left-radius, etc.) or for all four corners simultaneously using the border-radius shorthand property.

We will firstly deal with the syntax for the individual border-*-radius properties before looking at how the border-radius shorthand property works.

 

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

The border-*-radius properties can each accept either one or two values, expressed as a length or a percentage (percentages refer to the corresponding dimensions of the border box).

 

The Syntax:
border-*-*-radius: <length> | <%> ] [ <length> | <%> ]?

 

Examples:
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Where two values are supplied these are used to define, in order, the horizontal and vertical radii of a quarter ellipse, which in turn determines the curvature of the corner of the outer border edge.

Where only one value is supplied, this is used to define both the horizontal and vertical radii equally.

The following diagram gives a few examples of how corners might appear given differing radius:

If either value is zero, the corner will be square, not round.

 

border-radius

The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.

 

The Syntax:
<length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

 

Examples:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

The first set of (1-4) values define the horizontal radii for all four corners. An optional second set of values, preceded by a ‘/’, define the vertical radii for all four corners. If only one set of values are supplied, these are used to determine both the vertical and horizontal equally.

For each set of values the following applies:

If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii respectively. If bottom-left is omitted it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is supplied it is used to set all four radii equally.

 

Browser Support

At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).

Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).

Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.

Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius).

Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix).

 

The -moz- prefix

Mozilla’s Firefox browser has supported the border-radius property, with the -moz- prefix, since version 1.0. However, it is only since version 3.5 that the browser has allowed elliptical corners, i.e. accepting two values per corner to determine the horizontal and verical radii independently. Prior to version 3.5, the browser only accepted one value per corner, resulting in corners with equal horizontal and vertical radii.

The syntax, from Firefox 3.5 onwards, for the main part follows the current W3C specification, as described throughout this article, prefixed by -moz-. The only major difference is in the naming of the individual border-*-radius properties, with the -moz- prefixed properties following a slightly different naming convention as follows:

 

W3C Specification Mozilla Implementation
border-radius -moz-border-radius
border-top-left-radius -moz-border-radius-topleft
border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -moz-border-radius-bottomright
border-bottom-left-radius -moz-border-radius-bottomleft

 

The Mozilla implementation also behaves slightly differently from the specification when percentages are supplied. You can read more on the Mozilla Developer Center here.

 

Cross Browser Examples

Here’s a few basic examples that should work in current versions of Firefox, Safari/Chrome, Opera and even IE9:

#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

 

#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}


CSS3 Border-image: using images for your border

Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image. These two values are shorthands for:

  • border-image:
    • border-top-image
    • border-right-image
    • border-bottom-image
    • border-left-image
  • border-corner-image:
    • border-top-left-image
    • border-top-right-image
    • border-bottom-left-image
    • border-bottom-right-image

Border image Sample: 

 

 

border-image currently works in Safari and Firefox 3.1 (Alpha). The syntax to use it is:

border-image: url(border.png) 27 27 27 27 round round;

Or:

border-image: url(border.png) 27 27 27 27 stretch stretch;

For those of you not so lucky as to be able to see this, here are screenshots of the two examples.

Number one:

 

 
Number two:


3D card flipping : Flipping a simple image to a div (transitions and 3d transforms)
Plan
  1. Put an image on top of a div inside a container.
  2. Put that in another container with perspective defined.

When hovering on the outside container, add a rotate around the Y axis to the inside container

Code

First, the markup.

<div id="f1_container">
	<div id="f1_card">
		<div>
			<img src="/images/Stones.jpg"/>
		</div>
		<div>
			<p>This is nice for exposing more information about an image.</p>
			<p>Any content can go here.</p>
		</div>
 		</div>
</div>

Then the CSS, stripped of the vendor prefixes to keep it clean.

#f1_container {
	position: relative;
	margin: 10px auto;
	width: 450px;
	height: 281px;
	z-index: 1;
}
.face.back {
	display: none;
}

#f1_container {
	perspective: 1000;				
}
#f1_card {
	width: 100%;
	height: 100%;	
	transform-style: preserve-3d;
	transition: all 1.0s linear;	
}
#f1_container:hover #f1_card {
	transform: rotateY(180deg);
	box-shadow: -5px 5px 5px #aaa;
}
.face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}
.face.back {
	display: block;
	transform: rotateY(180deg);
	box-sizing: border-box;
	padding: 10px;
	color: white;
	text-align: center;
	background-color: #aaa;
}

.


Sliding with transfoms : Sliding by translating the images (transitions and transforms)

Note: Animating by transitioning transforms is hardware accelerated on iPhone OS, making this a good option there.

Plan
  1. Create a container with overflow set to hidden.
  2. Inside that container, create another container with width equal to the width of all the images added together.
  3. Inside that, float the images left with no padding or margin.

When clicking a control, translate the second container to show the required image

Code

Exactly the same as Demo 1, but the JS looks like this: (times 4 for the vendor specific markup)

$(document).ready(function() {
	$("#slide2-1").click(function() {
		$("#slide2_images").css("-webkit-transform","translate(0px, 0px)");
	});
	$("#slide2-2").click(function() {
		$("#slide2_images").css("-webkit-transform","translate(-450px, 0)");
	});
	$("#slide2-3").click(function() {
		$("#slide2_images").css("-webkit-transform","translate(-900px, 0)");
	});
	$("#slide2-4").click(function() {
		$("#slide2_images").css("-webkit-transform","translate(-1350px, 0)");
	});
});

.