CssGlance

Browsers

• Newly Supported CSS Selectors in IE7
  New features of Microsoft browser
• Evolt.org
  Huge browser archive
• Install multiple versions of IE on your PC
  Standalone IE3 IE4.01 IE5 IE5.5 and IE6 on the same machine
• Browser testing CSS and JavaScript
  List of browsers to test during development

Top

CSS guides

• CSS Shorthand Guide
  Optimazing CSS with shorthand property values
• Learn HTML and CSS: An Absolute Beginner’s Guide
  19 lessons for beginners
• Better Living Through XHTML
  Introduction to the use of XHTML
• A Roadmap to Standards
  Essay on standards
• HTML Dog Guides
  HTML and CSS guides for beginner, intermediate and advanced

Top

CSS image replacement

• CSS Discuss: ImageReplacement
  List of techniques with examples
• Revised Image Replacement
  Revisions to the original FIR technique
• Fahrner Image Replacement (FIR)
  No longer recommended for use
• DOM Image Replacement
  Use JavaScript instead of CSS
• MIR Image Replacement
  Using negative CSS letter-spacing for useful results
• JavaScript-enhanced image replacement
  Unobtrusive JavaScript that works also with images turned off

Top

CSS image techniques

• 30 scripts of impressive slideshows, lightboxes and galleries
  Ajax Image Galleries & Lightboxes, CSS-Based Image Galleries and JavaScript + CSS-based Galleries & DHTML-Galleries.
• CSSplay
  Creative Demonstrations of CSS-based photo galleries, image manipulation, image maps
• ALA: A More Accessible Map
  Accessible CSS-based map
• Sizing images with em
  To scale images along with text when you use your browser’s text size options
• Sizing Images With Percentages
  Using size images by percentages, rather than absolute units or intrinsic size
• CSS Drop Shadows II: Fuzzy Shadows
  How to create flexible CSS drop shadows

Top

CSS layouts

• Creating Liquid Layouts with Negative Margins
  2col and 3col, liquid pages
• Faux Columns CSS Layouts
  42 examples based on the faux columns technique
• Css Frames
  Technique to emulate the visual appearance of HTML frames
• CssDiscuss: Three Column Layouts
  3 col layouts collection
• Layout demos
  Some resources for achieving the most complicated goals
• ALA: Elastic Design
  Demonstration of completely relative layout
• CSS Layouts
  Examples of 750px, 960px and 100% layouts
• Dynamic Drive CSS Layouts
  Liquid, fixed and CSS frames layouts
• Glish.com: CSS Layout Techniques
  Catalogue of cross-browser layout techniques
• Max Design layouts
  Range of CSS page layouts, including 2 column and 3 column layouts
• Layout Gala
  40 valid html and css layouts based on the same markup

Top

CSS text styling

• Power To The People: Relative Font Sizes
  How to make websites more accessible and easier to read using relative font sizes
• How to size text using ems
  Sizing text in a document using ems
• Sane CSS Sizes
  A method that works consistently across browsers
• Text sizing
  Tutorial for sizing text with CSS + 264 screenshots divided by browser, method, PC

Top

Daily reading

• Clagnut
  Richard Rutter personal website
• Andy Budd
  A weblog on webdesign issues
• Cameron Moll
  His personal weblog
• SimpleBits
  Dan Cederholm website
• Devlounge
  From informative articles to fun interviews about webdesign
• Design Melt Down
  Design elements, trends and problems in web design
• Mark Boulton
  His personal weblog
• Vitamin
  A great resource for web designers, developers and entrepreneurs
• Smashing Magazine
  They smash you with the information that could make your life easier
• SitePoint
  New Articles, Fresh Thinking for Web Developers and Designers
• A List Apart
  Explores the design, development, and meaning of web content
• Meyerweb: CSS/Edge
  The Eric Meyer’s collection of cutting-edge CSS-driven design demos
• Mezzoblue
  Dave Shea’s weblog about webdesign
• Jeffrey Zeldman
  His personal website
• 456 Berea Street
  Roger Johansson on web standards, accessibility and usability

Top

Developer tools

• Lorem Ipsum Generator
  It generates the standard placeholder text used to demonstrate graphic elements
• The Color Wizard 3.0
  A color matching application
• Web Development Tools for Internet Explorer
  Overview of lightweight, in-browser web dev tools for IE
• Firebug Firefox Add-ons
  You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page
• Color Cop 5.0
  Eyedropper, just click and drag it anywhere on the screen to select a new color
• Web Accessibility Toolbar 2.0 beta for IE
  A powerfull toolbar compatible with IE 7 and Vista
• Web Developer Toolbar for Firefox/Mozilla
  Adds a menu and a toolbar with various web developer tools

Top

Forms

• Dynamic Help in Web Forms
  Luke Wroblewski analyzes four different dynamic Help systems for Web forms
• The Form Garden
  Css stylesheet collection
• Styling form controls
  Tutorial on styling form controls with screenshots of various tested browsers
• Formal Weirdness
  Some of forms technical problems
• Fancy Form Design Using CSS
  Tutorial to design accessible and good-looking forms

Top

Grid design

• The Funniest Grid You Ever Saw
  Practical detailed analysis on a website that uses grids
• 24 ways: Compose to a Vertical Rhythm
  Regular use of space provides rhythm in typography
• Grid Calculator
  Calculate the overall width of your grid by setting the number and width of columns and the width of gutter
• GridMaker
  An aid in producing grid-based web design mock-ups in Photoshop (script)
• Gridding the 960
  Background image grid + pixel ruler + column divisions for 960px-width layout
• Setting Type on the Web to a Baseline Grid
  All the text on your page lines up across all the columns, creating a harmonious vertical rhythm
• Using a Background Image Grid to Lay Out Your Web Site
  A generic grid template that one could use with any layout
• Five Simple Steps to designing grid systems
  Series of articles about grid system design

Top