Navigation¶

• Main Page
  

• Random Page
• Create a new Page
• All Pages
• Categories
• Navigation Paths
  

• Administration
• File Management
  

• Create Account
  

Search the wiki
»

CSS resources

This page contains links to CSS resources I have found particularly helpful. I am also including a section on CSS 3 on this page (although browser support is still spotty). See also Fonts page.

Articles

• Bright (near) future of CSS - Eric Meyer's article in early February, 2011
• CSS floats - 101
• Guide to CSS Colors in web design
• CSS Mask Image and Text
• Sitepoint primer on CS-3 transforms
• WebGl Filter Project - think Photoshop filters using CSS
• Media Queries starter example with source code
• Getting started with Sass - syntactically correct CSS
• CSS-3 animations article at MSDN
• CSS vendor prefixes
• Understanding elements of responsive design
• Object Oriented CSS - 2 underlying principles
• Drop Caps - historical use and current best practices
  

Responsive Web Design¶

• Original Ethan Marcotte article
• Final Working Example from above article
  

CSS in general

• W3C CSS current work - good page for review
• Eric Meyers' reset CSS
• CSS level 3 floats and positioning
• Preset CSS color names at W3C
• CSS Refresh - monitors CSS on page, reloads CSS without you having to do so
• Print stylesheet - definitive guide
  

Examples

• CSS 3D animations and transforms
• Pattern Gallery
• Box shadows - interesting approach
• 20 websites using @font-face (awards)
• CSS-3 cursor styles
• CSS Hexagon tutorial - might be good starting introduction to CSS and advanced features
  

Humor/ Odd

• Translate Hexadecimal color code into words and defines them
• Spinning the web - Eric Meyer took screen captures of various websites and applied CSS transformations to them resulting in these photos.
  

Media Queries

• W3C site - media queries - examples
• Yoko Media Queries HTML5 WordPress theme
• Adobe Developer Media Queries - part 1
• Adobe Developer Media Queries - part 2 (responsive design)
• Mediaqueri.es site - gallery
  

Tools

• CSS arrows
• CSS Sprite Maker - Adobe Fireworks extension.
• WestCiv Tools - like CSS-3 Sandbox
• John Allsop's gradient generator
• CSS Gradient Generator
• Ultimate CSs gradient generator
• RGBa and HSLa generator for Internet Explorer
• CSS animation tool - also WestCiv
• CSS text to path generator
• CSS Reset.com - has most of the commonly used reset frameworks and documentation
• CSS-3 ClickChart - good tool for learning CSS-3
• YUI grids - useful framework
• Respond JS library - enables media queries in older versions of IE
• Responsive design sketch sheets
• Prefixr - automatically create all appropriate CSS vendor prefixes
  

Fonts

• Experiment with Font Faces in a sandbox
  

CSS 3

• CSS3.info site
• CSS3 Click Chart - best viewed in Webkit, Presto, and Mozilla rendering engines
• Flexible box model
  

Example Sites

• Shiny demos - HTML5 and CSS-3 examples from Opera developers
  

Support for older browsers

• CSSSandpaper
• CSS3 Generator - experiment with various selectors
• CSS3 Pie - allows Internet Explorer 6-8 to render some features of CSS3
• eCSStender - allows for development across multiple browsers. Created by Aaron Gustafson.
• Selectivizr - provides CSS3 capabilities for IE 6 - 8.