CSS Tutorial

CSS3 Properties

Additions to the Border Property and Related New Properties

Multiple Borders

In CSS3 you can declare multiple border colors. First you declare the border width, say, 4 pixels. Then you can list colors for each.

padding: 6px; border: 4px solid #F00; border-bottom-colors: #F00 #FF0 #008080 #CCC;
  border-top-colors: #F00 #FF0 #008080 #CCC; border-left-colors: #F00 #FF0 #008080 #CCC;
  border-right-colors: #F00 #FF0 #008080 #CCC;

If you have a newer version of Firefox then this text will have a 4px border consisting of 4 colors.

border-radius

Rounded corners can be created simply.

padding: 7px; 
background-color: #CF0; 
border-radius: 10px; 
border: 1px solid #C90;

If you have a newer version of Firefox, Chrome, IE9, or Safari then this webpage will have rounded corners.

You can also target particular corners.

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

border-image-source, border-image-width, border-image-repeat

CSS3 adds images for borders. The border-image-source simply names the source of the image similar to the background-image property.

border-image-source: url(image.jpg);

The border-image-width property is simple enough. The border-image-repeat property has the following values: "stretch", which should be obvious, "repeat", also obvious, "round", which acts like repeat but will scale the image if necessary so that the whole image is not clipped as it is repeated, and "space", which behaves like "round", but adds space between the repeats rather than scaling the image.

Additions to the Background Property

background-origin

Not to be confused with the property background-position, the background-origin property determines where the background is to be placed. The values are "border-box", "padding-box", and "content-box", that is, starting from the border padding or content of the box.

background-clip

The background-clip property works in tandem with the background-origin property, but sets how the background painting area is clipped. The default value "padding-box" draws the background image within (clipped to) the padding content, while the value "border-box" draws the background within (clipped to) the border.

background-size

You can specify the size of a background image in pixels or percentages. As with the background-position property, it takes two coordinates. The W3C states that the "value 'contain' scales the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area", while the value "cover" scales the image, "while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area".

background-size: 50% 30%;

Multiple Background Images

CSS3 allows for multiple background image declaration. The first declaration has the highest stacking order, since there will be overlapping. Here's an example from the W3C

div {background-image: url(tl.png), url(tr.png)}

The Box-Shadow Property

Actually I use this property on this site on all the images to make drop shadows around them.

box-shadow: 5px 5px 5px #888;

The breakdown is as follows: horizontal offset right, vertical offset, blur radius, color. If you have a newer version of Firefox, Chrome, or Safari, you will see a shadow around all the images at this site. The box-shadow property can be combined with border-radius for a nice effect.

The Text-Shadow Property

The text-shadow property works like box-shadow, with horizontal offset right, vertical offset, blur radius, and color. text-shadow: 3px 3px 3px #444;

The Text-Overflow Property

This is a property that I have wanted for some time. There are many occasions when text needs to be truncated. Often an ellipsis is added as a visual clue to the user that text is missing. Traditionally this is handled on the backend, where the excess is trimmed. The value "clip" just abruptly stops the text display. The value "ellipsis" inserts an ellipsis at the end of the clip. The value "ellipsis-word" inserts an ellipsis but creates a break after the last word.

The Word-Wrap Property

Similarly, the word-wrap property determines whether excessively long words can be broken or not. This is very useful because long URLs or user names can break out of their respective containers, forcing developers to re-design or truncate useful data display.

Columns

An appealing part of the CSS specification is column control. This is especially important as higher screen resolutions are adopted. It also promises to aid in accessibility for those individuals who have difficulty with eye-to-brain coordination, in that the eye will not have to travel so far to reach the beginning fo the next line.

column-count: 2; column-width: 50%; column-gap: 60px; column-rule: 3px dotted #999;

If you have Firefox or Safari, you will see this text formatted into two columns. You can specify the number and width of columns, the gap between them, as well as a border. I have placed a border around this box and padding inside to better help you see the columns. The property column-rule is a shortcut for column-rule-style, column-rule-width, and column-rule-color

The Box-Sizing Property

If you recall, the W3C box-model specifies that the width of a box consists of the width of the content plus left and right padding, and left and right borders. Margins live outside of the box, but must be accounted for when creating layout. Peter-Paul Koch argues that developers only care about the actual box, like a real box, consisting of content, padding, and borders. The box-sizing property allows you to specify whether you want to use the W3C "compliant" model or the "traditional" (some say buggy) model. The accepted values are "border-box" and "content-box", with the former value applying width according to the traditional model, and the latter value applying width only to the content.

CSS3 Color Declarations

CSS3 proposes to add additional color schemes.

RGBA Color Values

The RGBA color scheme simply extends the RGB color scheme to include alpha, that is, opacity. There is no hexadecimal version of this notation. While values for color can be absolute or percentages, alphavalue cannot be a percentage.

p {color: rgba(255,0,0,1);}
p {color: rgba(100%,0%,0%,1);}

Both examples display the color red with an opacity of 1.

HSL Color Values

HSL stands for Hue, Saturation, Lightness. Hue is represented as an angle of the color circle measured in degrees, with 0 equaling 360. The color red would be rendered as follows.

p {color: hsl(0, 100%, 50%);}

That is, on the color arc red is at the beginning (and end), the saturation is set to total (100%) (since red is a primary color), and lightness is set to 50%.

HSLA Color Values

Not surprisingly, the W3C has also proposed a version of HSL with an alphavalue.

p {color: hsla(0, 100%, 50%, 1);}

CSS3 Gradients

Since most CSS3 property declarations require the appropriate vendor prefix, the following is a typical interim declaration.

.xyz {
  box-shadow: 3px 3px 10px #666;
  -moz-box-shadow: 3px 3px 10px #666;
  -webkit-box-shadow: 3px 3px 10px #666;
}

CSS3 gradient declarations are more diverse in their construction. First, W3C syntax breaks down as follows.

specify gradient type
the beginning point
start color
end color

background: linear-gradient(left top,white, black);

Mozilla's implementation is close to that of the W3C. They provide this breakdown of the gradient.

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

The Webkit gradient statement is more specific. They provide this breakdown.

-webkit-gradient(<type> , <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

the gradient type: linear or radial
the beginning points, either in X and Y coordinates or keywords
the end points, either in X and Y coordinates or keywords
start color
end color

I also recommend setting a background color for browsers that do not support gradients, which are versions of Firefox prior to 3.6 and in general any older browser.

Though we may dislike IE's use of filters we may make an exception for gradients on IE because the other vendors are using non-standard CSS.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008080', endColorstr='#808080');

So here is the complete statement I use for the green-yellow background around the webpage. Again, once things are standardized, if ever, the vendor methods can be stripped.

background-color: green; 
background: -webkit-gradient(radial, left top, 0, right top, 2200, from(green), color-stop(50%, yellow), to(green));
background: -moz-radial-gradient(right top, green, yellow, green); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='green', endColorstr='yellow');