Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lemonade - CSS Sprites on the fly

Duke
December 11, 2010

Lemonade - CSS Sprites on the fly

Apresentação no #GURUSP sobre Lemonade

Duke

December 11, 2010
Tweet

More Decks by Duke

Other Decks in Programming

Transcript

  1. Lemonade Generates CSS sprites on the fly (for Sass/SCSS/Compass).

  2. Emerson Vinicius twitter: @emersonvinicius gtalk: duke.m16

  3. normal

  4. normal hover

  5. normal hover click

  6. normal hover click link

  7. menu_default.png menu_hover.png menu_active.png menu_link.png #button li a background-image: url('menu_default.png') #button

    li a:hover background-image: url('menu_hover.png') #button li a:active background-image: url('menu_active.png') #button li a.link background-image: url('menu_link.png')
  8. menu_default.png menu_hover.png menu_active.png menu_link.png #button li a background-image: url('menu_default.png') #button

    li a:hover background-image: url('menu_hover.png') #button li a:active background-image: url('menu_active.png') #button li a.link background-image: url('menu_link.png') 4 Requisições
  9. background_menu.png #button li a background: url('background_menu.png') no-repeat 0 0 #button

    li a:hover background-position: 0 -39px #button li a:active background-position: 0 -82px #button li a.link background-position: 0 -123px
  10. background_menu.png #button li a background: url('background_menu.png') no-repeat 0 0 #button

    li a:hover background-position: 0 -39px #button li a:active background-position: 0 -82px #button li a.link background-position: 0 -123px
  11. background_menu.png #button li a background: url('background_menu.png') no-repeat 0 0 #button

    li a:hover background-position: 0 -39px #button li a:active background-position: 0 -82px #button li a.link background-position: 0 -123px 0 -39px -82px -123px
  12. None
  13. None
  14. background: sprite- image(‘icons/home.png’)

  15. #nav li a.addimage #nav li a.upload #nav li a.export

  16. nav.png #nav li a.addimage background: sprite-image(‘nav/addimage.png’) #nav li a.upload #nav

    li a.export nav.png
  17. nav.png #nav li a.addimage background: sprite-image(‘nav/addimage.png’) #nav li a.upload background:

    sprite-image(‘nav/upload.png’) #nav li a.export nav.png
  18. #nav li a.addimage background: sprite-image(‘nav/addimage.png’) #nav li a.upload background: sprite-image(‘nav/upload.png’)

    #nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png
  19. #nav li a.addimage background: sprite-image(‘nav/addimage.png’) #nav li a.upload background: sprite-image(‘nav/upload.png’)

    #nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png
  20. #nav li a.addimage background: sprite-image(‘nav/addimage.png’) #nav li a.upload background: sprite-image(‘nav/upload.png’)

    #nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png
  21. #nav li a.addimage background: sprite-image(‘bar/addimage.png’) #nav li a.upload background: sprite-image(‘nav/upload.png’)

    #nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png
  22. #nav li a.addimage background: sprite-image(‘bar/addimage.png’) #nav li a.upload background: sprite-image(‘nav/upload.png’)

    #nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png bar.png
  23. #nav li a.addimage{ background: url(‘/images/nav.png’); } #nav li a.upload{ background:

    url(‘/images/nav.png’) 0 -23px; } #nav li a.export{ background: url(‘/images/nav.png’) 0 -46px; }
  24. background: sprite-image(‘nav/addimage.png’)

  25. background: sprite-image(‘nav/addimage.png’)

  26. background: sprite-image(‘nav/addimage.png’, 0, 0)

  27. background: sprite-image(‘nav/addimage.png’, 0, 0)

  28. background: sprite-image(‘nav/addimage.png’, 0, 0, 5px) nav.png nav.png

  29. background: sprite-image(‘nav/addimage.png’,0,0, 5px, 20px) nav.png nav.png

  30. gem install compass lemonade config/compass.rb require “lemonade”

  31. Automatico, quando gera o SASS development production compass compile

  32. Automatico, quando gera o SASS development production compass compile

  33. @emersonvinicius LEMONADE INGREDIENTS PURE RUBY, SASS, COMPASS, RMAGICK, NO ARTIFICIAL

    FLAVORS OR SUGAR ADDED. http://bit.ly/lemo-info Obrigado!