Recommended
More Related Content
Featured
Featured (20)
Lemonade
- 2. Emerson Vinicius twitter: @emersonvinicius gtalk: duke.m16
- 3. Lemonade Generates CSS sprites on the fly (for Sass/SCSS/Compass).
- 4. normal
- 5. normal hover
- 8. #button li a background-image: url('menu_default.png') menu_default.png #button li a:hover menu_hover.png background-image: url('menu_hover.png') menu_active.png #button li a:active menu_link.png background-image: url('menu_active.png') #button li a.link background-image: url('menu_link.png')
- 9. #button li a background-image: url('menu_default.png') e s menu_default.png õ #button li a:hover is iç background-image: url('menu_hover.png') menu_hover.png menu_active.png R e qu 4 #button li a:active menu_link.png background-image: url('menu_active.png') #button li a.link background-image: url('menu_link.png')
- 10. #button li a background: url('background_menu.png') no-repeat 0 0 background_menu.png #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. #button li a background: url('background_menu.png') no-repeat 0 0 background_menu.png #button li a:hover background-position: 0 -39px #button li a:active background-position: 0 -82px #button li a.link background-position: 0 -123px
- 12. #button li a background: url('background_menu.png') no-repeat 0 0 0 background_menu.png #button li a:hover -39px background-position: 0 -39px -82px -123px #button li a:active background-position: 0 -82px #button li a.link background-position: 0 -123px
- 16. #nav li a.addimage #nav li a.upload #nav li a.export
- 17. #nav li a.addimage background: sprite-image(‘nav/addimage.png’) #nav li a.upload #nav li a.export nav.png 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 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(‘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
- 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
- 23. #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
- 24. #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; }
- 29. background: sprite-image(‘nav/addimage.png’, 0, 0, 5px) nav.png nav.png
- 30. background: sprite-image(‘nav/addimage.png’,0,0, 5px, 20px) nav.png nav.png
- 31. gem install compass lemonade config/compass.rb require “lemonade”
- 32. development Automatico, quando gera o SASS production compass compile
- 33. development Automatico, quando gera o SASS production compass compile
- 34. LEMONADE INGREDIENTS PURE RUBY, SASS, COMPASS, RMAGICK, NO ARTIFICIAL FLAVORS OR SUGAR ADDED. Obrigado! http://bit.ly/lemo-info @emersonvinicius
Editor's Notes
- \n
- Twitter, Gtalk, Desenvolvedor Front-End Gonow, Equipe Rails\n
- Gerador de CSS sprites, facil de usar, sem configuração, sem Photoshop. \n
- Vejamos o Menu da Apple, o Menu da Apple tem 4 estados diferentes, o Normal\n
- o Hover\n
- o Click\n
- e o Link, Pensando a forma mais tosca de fazer essa menu\n
- Pegamos 4 imagens dos 4 estados e adicionamos como background \n
- Um dos problema é que, no caso, teremos 4 requisições, imagina um menu maior. Dai vem a tecnica do CSS Sprites >>\n
- basicamente, >>\n
- adicionamos tudo em uma imagem >>\n
- e manipulamos a posição do background com background-position. isso é Simples, não nada novo algo usado hoje mais, mais não resolve alguns problemas, imagine que temos isso>>>\n
- Você mapiou isso de alguma forma, mais por algum motivo o sistema foi atualizado e adicionaram items>>\n
- é inviavel ficar aumentando e diminuindo pixel, Então ….\n
- como eu disse antes, simples, Lembrando que isso é no SASS…..Uma parte do exemplo anterior pode ser escrito assim\n
- Imaginamemos que temos esse tres icones, add imagem , upload e exportar\n
- Add o mixin do Lemonade ‘sprite-image’\n
- \n
- Esta vendo essa nav.png?\n
- o lemonade indentifica a pasta que esta suas imagens sozinhas >>\n
- Então se voce quiser criar mais de uma sprite, por exemplo, vamos dizer que a add imagem não faz parte do sprite nav\n
- Trocamos ela de pasta\n
- ele ira criar outra.\n
- O lemonade ira gerar algo parecido com isso. Alguns extras>>\n
- Como eu já disse o sprite-image é um mixin do sass, ele tem parametros, o primeiro agente viu que é a imagem>>\n
- que é a imagem, o Segundo e o Terceiro, são os offsets\n
- X e Y respectivamente, eles vão controlar a posição da sua imagem na tela\n
- Em muitos casos precisamos que as imagens esteja com um espaçamento maior entre elas, isso ocorre temos uma area grande e dai a outras imagens ira aparecer\n
- o 4º coloca espaçamento em cima e em baixo da imagem atual \n
- se quiser ser mais preciso em relação aos espacamento o 5º controla o espacamento de baixo, deixo para o 4 a funcao de controlar a de cima\n
- Instalar….I’ve tested it with both Ruby 1.8.7 and 1.9.2. It works with Haml/Sass 3.0.x. But it depends on Compass 0.10.x. You can integrate it in Rails 2.3.x and 3.0, Staticmatic or just run compass watch.\n\n
- em dev, e em produção, se usar o inploy >>>\n
- automaticamente\n
- \n