Css sprite best practices
•Als PPT, PDF herunterladen•
6 gefällt mir•3,140 views
introduce a best practices to generate css sprite image and css automatically, especially for web developper
![What is css sprite? ,[object Object],[object Object],www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Css sprite best practices
Ähnlich wie Css sprite best practices (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Css sprite best practices
- 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