CSS3 Primer
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
| Property | Values | Example |
|---|---|---|
| opacity | alphavalue | inherit | opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ |
Background and Border 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);
| 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; |
| border-image | source slice width outset repeat | border-image:url(bdr.png) 30 30 round; |
*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
| 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.
| 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
| 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.
| 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