• Teilen
  • E-Mail
  • Einbetten
  • Gefällt mir
  • Speichern
  • Privater Inhalt
3 ways-to-create-sprites-in-rails
 

3 ways-to-create-sprites-in-rails

on

  • 11,337 Views

 

Statistiken

Views

Gesamtviews
11,337
Views auf SlideShare
10,840
Views einbetten
497

Actions

Gefällt mir
11
Downloads
35
Kommentare
2

6 Einbettungen 497

http://speakerrate.com 442
http://www.scoop.it 44
http://talksathome.com 5
http://us-w1.rockmelt.com 3
https://twitter.com 2
http://a0.twimg.com 1

Zugänglichkeit

Kategorien

Details hochladen

Uploaded via as Adobe PDF

Benutzerrechte

© Alle Rechte vorbehalten

Report content

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

Löschen

12 von 2 vorherige nächste

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Ihre Nachricht erscheint hier
    Processing...
  • http://compass-style.org/help/tutorials/spriting/
    Are you sure you want to
    Ihre Nachricht erscheint hier
    Processing...
  • There's actually this new ruby gem called active_assets, http://bit.ly/eRTwU4. It lets you generate sprites and the stylesheet for the sprite with a rake task.
    Are you sure you want to
    Ihre Nachricht erscheint hier
    Processing...
Kommentar posten
Kommentar bearbeiten

    3 ways-to-create-sprites-in-rails 3 ways-to-create-sprites-in-rails Presentation Transcript

    • 3 Ways to Create CSS Sprites With Rails
    • What Are Image Sprites?
    • A great way to save HTTP requests.
    • In other words: Something that makes your website faster. awes om e!
    • Rails 3.1 > Integrated Spriting CSS_Sprite > better <img> Lemonade > Full CSS sprites
    • Finding Information http://www.drdobbs.com/blog/archives/2010/06/preparing_for_r.html
    • Few Information http://blog.endpoint.com/2010/06/rails-3-at-railsconf-2010-code-goodness.html
    • A Piece of Code http://twitter.com/jsiarto/status/15861245321
    • Finally! http://www.rubyinside.com/dhhs-railsconf-2010-keynote-video-a-justification-of-rails-3-0-3325.html
    • Generation Sprites <%= sprite_css("icons") %> ★ Combines all images of a folder ★ Generates CSS
    • Using Images <%= sprite_tag("icons/trash") %> ★ Adds a HTML tag with the class (I guess it works this way.)
    • Questions ★ Is it possible to pack CSS files? ★ Why “icons/trash” if image_tag requires “icons/trash.png”? ★ When will it be available?
    • Rails 3.1 > Integrated Spriting CSS_Sprite > better <img> Lemonade > Full CSS sprites
    • gem install css_sprite
    • Features ★ Creates sprite images ★ Creates classes for each file ★ Sass compatible ★ Rake Task for generation
    • From Image to CCS images under css_sprite directory class name in css_sprite css twitter_icon.png .twitter_icon facebook_icon.png .facebook_icon hotmail-logo.png .hotmail-logo gmail-logo.png .gmail-logo icons/twitter_icon.png .icons .twitter_icon widget/icons/twitter_icon.png .widget .icons .twitter_icon twitter_icon_hover.png .twitter_icon:hover twitter-icon-hover.png .twitter-icon:hover logos_hover/gmail_logo.png .logos:hover .gmail_logo logos-hover/gmail-logo.png .logos:hover .gmail-logo … … full table at http://github.com/flyerhzm/css_sprite
    • Built Sprites (1) rake css_sprite:build
    • Built Sprites (2) rake css_sprite:start
    • Pros ★ Easy for HTML developers ★ Easy if you’re handling <img> tag
    • Cons ★ A lot of CSS generated (sizes, …) ★ Additional non-semantic tags ★ Additional classes ★ Positioned background images difficult ★ RMagick ★ Rake task
    • Alternatives ★ http://github.com/gistinc/sprite based on css_sprite ★ http://github.com/sblackstone/auto_sprite image_tag extention + CSS classes ★ http://github.com/setepo/css-sprites image_tag extention + inline CSS
    • Rails 3.1 > Integrated Spriting CSS_Sprite > better <img> Lemonade > Easy Sprites
    • gem install lemonade
    • Simple Sprites .add { background: sprite-image("icons/pl.png"); } .remove { background: sprite-image("icons/rm.png"); } all icons by p.yusukekamiyamane.com (CC by 3.0)
    • Output .add { background: url("icons.png"); } .remove { background: url("icons.png") 0 -16px; }
    • Right Aligned .something { background: sprite-image("i/wide.png"); } a.next { background: yellow no-repeat sprite-image("i/n.png", 100%); padding-right: 20px; }
    • Result .something { background: url("i.png"); } Example link a.next { background: yellow no-repeat url("i.png") 100% -20px; padding-right: 20px; }
    • Empty Space .add { background: sprite-image("icons/pl.png"); } .remove { background: yellow no-repeat sprite-image("icons/rm.png"); padding: 20px; }
    • Could be Better .add { background: url("icons.png"); } .remove { Example link background: url("icons.png") 0 -16px; padding: 20px; }
    • Empty Space .add { background: sprite-image("icons/pl.png"); } .remove { background: yellow no-repeat sprite-image("icons/rm.png", 0, 0, 20px); padding: 20px; }
    • Just Perfect .add { background: url("icons.png"); } .remove { Example link background: url("icons.png") 0 -36px; padding: 20px; }
    • Sprite Generation ★ Sprite image named by directory: “icons/*.png” > “icons.png” ★ Background position added only if needed ★ Add “no-repeat” by yourself: background: sprite-image("…") no-repeat;
    • Any questions?
    • Happy forking: http://github.com/flyerhzm/css_sprite http://github.com/hagenburger/lemonade
    • last name first name nico@hagenburger.net e-mail twitter blog