University of Vermont

UVM Self-help Web Guide

CSS3 Primer

Text Effects

Text Effects
Property Values Example
text-shadow h-shadow v-shadow blur color text-shadow: 2px 2px 2px #454545;
text-overflow clip | ellipsis | string text-overflow: ellipsis-word;
word-wrap normal | break-word word-wrap: break-word;

*Note: Internet Explorer does not yet support the text-shadow property, but it will be supported in IE 10.

Using Custom Fonts

The @font-face rule allows for linking to fonts that are automatically activated when needed.

@font-face {
font-family: myFont;
src: url('myFont.ttf'),
url('myFont.eot') format("opentype"); /* IE */
}
/* bold font */
@font-face {
font-family: myFont;
src: url('myFontBold.ttf'), url('myFontBold.eot') format("opentype"); /* IE */
font-weight:bold;
}

Where do I get web fonts? The majority of the most popular fonts can be purchased for web use from Adobe (substantial academic discounts may apply). Some free fonts can be downloaded from Font Squirrel, additionally, Google Web Fonts has a library of fonts which you can link to from your CSS.

Opacity

Opacity
Property Values Example
opacity alphavalue | inherit opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

Background and Border Effects

Background Effects
Property Values Example
background-size length | percentage | cover | contain background-size: 100% 100%;
background-origin padding-box | border-box | content-box background-origin:content-box;
background-clip padding-box | border-box | content-box background-clip:content-box;
-webkit-background-clip:content-box; /* Safari */
Using Multiple Backgrounds

background-image: url(img1.gif), url(img2.gif);

Border Effects
Property Values Example
border-radius 1-4 length | % / 1-4 length | % border-radius: 5px;
border-radius: 2em 1em 4em / 01em 3em;
box-shadow h-shadow v-shadow blur spread color inset

box-shadow: 10px 10px 5px #454545;
-webkit-box-shadow: 10px 10px 5px #454545; /* Safari, Chrome */

border-image source slice width outset repeat

border-image:url(bdr.png) 30 30 round;
-moz-border-image:url(bdr.png) 30 30 round; /* Firefox */
-webkit-border-image:url(bdr.png) 30 30 round; /* Safari, Chrome */
-o-border-image:url(bdr.png) 30 30 round; /* Opera */

*Note: For border-radius the four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

Caveat: Border-image is not currently supported in Internet Explorer nor is it supported in the IE10 previews (as of October 2011).

Transformations and Transitions

Transformations
Property Values Example
transform none | transform-functions transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari, Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */

With CSS3 transform, we can move, scale, turn, spin, and stretch elements.

Transitions
Property Values Example
transition property duration timing-function delay transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out; /* Safari, Chrome */
-moz-transition: all 1s ease-in-out; /* Firefox */
-o-transition: all 1s ease-in-out; /* Opera */
-ms-transition: all 1s ease-in-out; /* IE 10 */

*Note: Internet Explorer does not currently support the transition property, however it will be supported in IE 10.

Multi-column Layouts

Multiple Columns
Property Values Example
column-count number | auto column-count: 3;
-moz-column-count: 3; /* Firefox */
-webkit-column-count: 3; /* Safari, Chrome */
column-gap length | normal column-gap: 3em;
-moz-column-gap: 3em; /* Firefox */
-webkit-column-gap: 3em; /* Safari, Chrome */
column-rule column-rule-width column-rule-style column-rule-color column-rule: 1em outset #ccc;
-moz-column-rule: 1em outset #ccc; /* Firefox */
-webkit-column-rule: 1em outset #ccc; /* Safari, Chrome */

*Note:Internet Explorer does not currently support the column properties, however columns will be supported in IE 10.

New CSS Selectors

No doubt you've already used the a:link selector in your CSS authoring. CSS has offered a multiple selectors which can eliminate the need to add custom classes or ids in your HTML code. CSS3 expands greatly on selector options.

Some Useful CSS3 Selectors
Pattern Meaning Example
[att^=value] Matches every element whose attribute value begins with a specified value div[class^="left"] {}
[att$=value] Matches every element whose attribute value ends with a specified value div[class$="left"] {}
[att*=value] Matches every element whose attribute value containing a specified value div[class*="left"] {}
element1~element2 Matches occurrences of element2 that are preceded by element1 p~ul {}
:first-of-type Matches every element that is the first child, of a particular type, of its parent p:first-of-type {}
:last-of-type Matches every element that is the last child, of a particular type, of its parent p:last-of-type {}
:only-of-type Matches every element that is the only child of its type, of its parent p:only-of-type {}
:only-child Matches every element that is the only child of its parent p:only-child {}
:nth-child() Matches every element that is the nth child, regardless of type, of its parent p:nth-child(2) {}
:nth-of-type() Matches every element that is the nth child, of a particular type, of its parent p:nth-of-type(even) {}
:empty Matches every element that has no children p:empty {}
::selection Matches the portion of an element that is selected by a user ::selection {}
::-moz-selection {}

Last modified November 01 2011 11:37 AM