Font stack is a very early example of progressive enhancement. Compare black & white to color TV’s. When color TV’s came out, program directors’ didn’t say we’re going to keep filming in black & white. Providing visual rewards to those with advanced browsers. CSS3 is a series of modules and was designed that way so browsers could implement them in stages.
Optimal ordering for vendor-specific CSS.
- -webkit-border-radius
- -moz-border-radius
- border-radius
Vendor prefixes are important for testing implementations, precursor for standards and allow you to use this now.
What works today?
Transforms, Transitions & Animations (Safari) – These actions occur outside the flow of the document, it doesn’t affect the box that it’s in and will not affect the rest of the layout.
Transitions
See hovers on tabs at http://handcraftedcss.com/tugboa
Transition goes on normal state of element. Transition can be used onclick, without JavaScript using the active state.
Example:
background-color .4 linear
property duration timing-function
There is also an all property.
Background transition background image on hover.
2D Transforms include rotate, scale, translate (move) & skew.
Tranform translate moves image away from mouse. Skew uses X, Y coordinate and causes text to slant to one direction.
Animation
Involves defining and naming a keyframe.
Borders & Backgrounds
Some of the most applicable right now.
border-radius for rounded corners on a box
When you get into individual corners, the syntax differs for -moz. If you don’t specify each corner, all will be rounded.
border-radius.com – to get entire stack without worrying about syntax
Text-Shadow
CSS2 supported in webkit initially.
-text-shadow: 0 -1px 1px #300;
You can use multiple text shadows.
Box-Shadow
Box shadow goes out into the gutters and doesn’t affect the box model.
-webkit-box-shadow: 2px 2px 4px #000;
-moz-box-shadow: 2px 2px 4px #000;
box-shadow: 2px 2px 4px #000;
Border-Image
Allows you to stretch images around the edge of a container. It can be confusing. There are nine sections. Causes extra work to be sure it degrades well and is confusing to grasp.
Multiple Backgrounds
Syntax is simple, comma-delimited URL’s & supported in latest Firefox, Safari & Opera. List critical background images first, so it degrades gracefully.
Color & Transparency
RGBA = Red / Green / Blue / AWESOME (or amount of transparency) – can give a bit of the same effect as overprinting in print work.
Example: rgba (255, 255, 255, .8) 80% transparency
Specify solid color before rgba for non-compliant browsers (Internet Explorer)
RGBA for text – Examples: http://www.wilsonminer.com/ & http://24ways.org/
Use RBGA for transparency on backgrounds that cover images. Also works well on textures to let texture come through.
Use opacity for dimmed image, opacity: .5, on hover opacity: 1.
Selectors & Typography
:last-child & :first-child
:nth-child(5n) (every 5th)
:nth-child(5) (only the 5th one)
Zebra Tables – :nth-child(odd)
Beware of relying on :nth-child for layout
attribute selectors
input[type="text"] {width: 200px;}
disabled=”disabled” or enabled=”enabled”
Substring matching
ID’s that begin with … or end with… or wildcard
Compatibility Table for CSS3 selectors
Typography & CSS3
Drop caps. Old way was initial character in a span, so we could style it differently. New way is using :first-of-type:first-letter selector.
Use the Best Available Ampersand
CSS3 Layout
Multi-column layout. Set up 3 column layout & set up borders for in between them using column-count, column-gap, column rule. Not practice for long articles where you might have to scroll up and down to read multiple columns. Good for print style sheets.
Font Embedding
http://en.wikipedia.org/wiki/Embedded_OpenType – Legal issues, someone could just grab font. Many free fonts available, http://www.theleagueofmoveabletype.com/ & http://www.josbuivenga.demon.nl/
How to use @font-face. This article overstates complexity of implementation. Go with the simple case of true-type and open-type and let IE default back to standard web font.
Font Squirrel scours the internet in search of FREE, highest-quality, designer-friendly, commercial-use fonts and presents them for easy downloading.
Font is cached when using TypeKit. They work through legal issues and you pay them. Uses JavaScript you paste into your document. Many of TypeKit fonts are also re-hinted for the web.
Using CSS3
To enrich user experience, when site stats rule, experimentation, mobile dev and prototyping.
That’s it. My cache is full. I’ll be editing and organizing this content soon.
Example sites: http://css3exp.com/moon, http://handcraftedcss.com/tugboat & http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
Pingback: Highlights from An Event Apart Seattle 2010 | UsableWebb