introduce a best practices to generate css sprite image and css automatically, especially for web developper

1. css sprite best practices Richard Huang Twitter: @flyerhzm Github: http://github.com/flyerhzm www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development

4. Why use css sprite? www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development #nav li a {background:none no-repeat left center} #nav li a.item1 {background-image:url('../img/image1.gif')} #nav li a:hover.item1 {background-image:url('../img/image1_over.gif')} #nav li a.item2 {background-image:url('../img/image2.gif')} #nav li a:hover.item2 {background-image:url('../img/image2_over.gif')} ...

5. Why use css sprite? www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development #nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;} ...

10. Solution www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development The blue parts on the above image are the css_sprite directories according to convention css_sprite directories according to convention. That means the directory whose name is css_sprite or css_sprite suffixed (e.g. another_css_sprite) needs to do the css sprite.

11. Solution www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development The green parts are images that need to be tranformed into the css sprite. Once you add images to the css_sprite directory or remove images, the css sprite operation will be automatically executed.

12. Solution www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development The red parts are automatically generated files. For each css_sprite directory, there is a css sprite image generated, combined by all the images under the css_sprite directory, and there is also a css or sass file generated according to the css_sprite image.

14. Name Convention www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development .logos.active .gmail-logo logos-active/gmail-logo.png .logos.active .gmail_logo logos_active/gmail_logo.png .gmail-logo.active gmail-logo-active.png .gmail_logo.active gmail_logo_active.png .logos:hover .gmail-logo logos-hover/gmail-logo.png .logos:hover .gmail_logo logos_hover/gmail_logo.png .twitter-icon:hover twitter-icon-hover.png .twitter_icon:hover twitter_icon_hover.png .widget .icons .twitter_icon widget/icons/twitter_icon.png .icons .twitter_icon icons/twitter_icon.png .gmail-logo gmail-logo.png .hotmail-logo hotmail-logo.png .facebook_icon facebook_icon.png .twitter_icon twitter_icon.png class name in css_sprite css images under css_sprite directory

17. Q&A Thank you www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development