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
- 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
- Custom bullets (sample)
Code: the Flexible Graphic
- Borders, corners and dividers
- Navigation
- 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
Resources
- Referenced in my presentation
- CSS inspiration
- CSS resources
Thank You