Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Lemonade - CSS Sprites on the fly
Duke
December 11, 2010
Programming
2
120
Lemonade - CSS Sprites on the fly
Apresentação no #GURUSP sobre Lemonade
Duke
December 11, 2010
Tweet
Share
More Decks by Duke
See All by Duke
Docker
dukex
0
68
Lightning Talk: Testes em Javascript
dukex
0
93
Lightning Talk: Fluxo (básico) Ember 1.x.x
dukex
0
80
Concorrência em GO
dukex
0
26
Meetup Go - Como construi o uhuraapp.com
dukex
4
650
Realtime - Usando o MeteorJS
dukex
3
580
Como fazer API melhor que o governo?
dukex
1
650
Raspagem de Dados com Ruby
dukex
1
830
Grid System com Amor
dukex
0
670
Other Decks in Programming
See All in Programming
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
150
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
410
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
130
Jetpack Compose 完全に理解した
mkeeda
1
470
Remote SSHで行うVS Codeリモートホスト開発とトラブルシューティング
smt7174
1
460
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
550
SHOWROOMの分析目的を意識した伝え方・コミュニケーション
hatapu
0
240
Form実装基本を学び直してみた
hyugatsukui
0
240
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
580
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
Listかもしれない
irof
1
270
なぜRubyコミュニティにコミットするのか?
luccafort
0
310
Featured
See All Featured
How to Ace a Technical Interview
jacobian
270
21k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Navigating Team Friction
lara
177
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
570
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
How to name files
jennybc
47
73k
Design by the Numbers
sachag
271
18k
Designing the Hi-DPI Web
ddemaree
273
32k
Into the Great Unknown - MozCon
thekraken
2
290
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
Unsuck your backbone
ammeep
659
56k
GraphQLの誤解/rethinking-graphql
sonatard
39
7.8k
Transcript
Lemonade Generates CSS sprites on the fly (for Sass/SCSS/Compass).
Emerson Vinicius twitter: @emersonvinicius gtalk: duke.m16
normal
normal hover
normal hover click
normal hover click link
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')
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
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
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
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
None
None
background: sprite- image(‘icons/home.png’)
#nav li a.addimage #nav li a.upload #nav li a.export
nav.png #nav li a.addimage background: sprite-image(‘nav/addimage.png’) #nav li a.upload #nav
li a.export nav.png
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
#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
#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
#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
#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
#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
#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; }
background: sprite-image(‘nav/addimage.png’)
background: sprite-image(‘nav/addimage.png’)
background: sprite-image(‘nav/addimage.png’, 0, 0)
background: sprite-image(‘nav/addimage.png’, 0, 0)
background: sprite-image(‘nav/addimage.png’, 0, 0, 5px) nav.png nav.png
background: sprite-image(‘nav/addimage.png’,0,0, 5px, 20px) nav.png nav.png
gem install compass lemonade config/compass.rb require “lemonade”
Automatico, quando gera o SASS development production compass compile
Automatico, quando gera o SASS development production compass compile
@emersonvinicius LEMONADE INGREDIENTS PURE RUBY, SASS, COMPASS, RMAGICK, NO ARTIFICIAL
FLAVORS OR SUGAR ADDED. http://bit.ly/lemo-info Obrigado!