Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Emerson Vinicius twitter: @emersonvinicius gtalk: duke.m16

Slide 3

Slide 3 text

normal

Slide 4

Slide 4 text

normal hover

Slide 5

Slide 5 text

normal hover click

Slide 6

Slide 6 text

normal hover click link

Slide 7

Slide 7 text

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')

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

background: sprite- image(‘icons/home.png’)

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

#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

Slide 19

Slide 19 text

#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

Slide 20

Slide 20 text

#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

Slide 21

Slide 21 text

#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

Slide 22

Slide 22 text

#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

Slide 23

Slide 23 text

#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; }

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Automatico, quando gera o SASS development production compass compile

Slide 32

Slide 32 text

Automatico, quando gera o SASS development production compass compile

Slide 33

Slide 33 text

@emersonvinicius LEMONADE INGREDIENTS PURE RUBY, SASS, COMPASS, RMAGICK, NO ARTIFICIAL FLAVORS OR SUGAR ADDED. http://bit.ly/lemo-info Obrigado!