CSS Techniques for Advancing Your Visual Design

Mark Wyner

Principal, Mark Wyner Design

Welcome

• Open-source web: I’m a storyteller, not a magician
• What we learn and what we invent eventually blend together
• You people frighten me: I’m a nervous speaker, not a meth addict

Benefits of CSS

• Accessibility
• Effortless global-evolutions
• Small file sizes
• Device independence
• Search engine optimization

Wicked-Cool Techniques

• Borders with Style
• Drop shadow (sample)
• Plain-vanilla (sample)
• HTML text with background images (sample)
• Javascriptless* rollovers
• *“Javascriptless” is not a real word, so please use with discretion
• Navigation (sample, sample)
• Visual clues (sample)
• PNG display with IE support (sample)

More Wicked-Cool Techniques

• “Absolute”ly accommodating
• Tight spots (sample)
• Swappable content of variable lengths (sample)
• Background positioning
• Anchor as you see fit (sample)
• Fixed position: “Sit. Stay. Good dog.” (sample)
• Opacity control
• Rollover (sample)
• Overlay (sample)
• Custom bullets (sample)

Code: the Flexible Graphic

• Borders, corners and dividers
• Shape shifters (sample)
• Cached divider (sample)
• Equal column-heights (sample)
• Navigation
• “Sliding doors” by Douglas Bowman (sample)
• Faux buttons (sample)
• Rollover menus (sample)
• Text wrap (sample)

Media Targeting (Screen, Print, Handheld, Aural, etc.)

• Show/hide elements, print URL (sample)
• Variable font-size measurements (sample, sample)
• Two logos for the price of one (sample)

Add a Pinch of Javascript

• sIFR (sample)

Resources

• Referenced in my presentation
• Douglas Bowman (stopdesign.com)
• sIFR (wiki.novemberborn.net/sifr/)
• CSS inspiration
• Web Standards Awards (webstandardsawards.com)
• CSS Zen Garden (csszengarden.com)
• CSS Import (cssimport.com)
• CSS resources
• Dan Cederholm (simplebits.com)
• Cameron Moll (cameronmoll.com)
• Eric Meyer (meyerweb.com)

Thank You