Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lemonade - CSS Sprites on the fly
Search
Duke
December 11, 2010
Programming
2
130
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
82
Lightning Talk: Testes em Javascript
dukex
0
120
Lightning Talk: Fluxo (básico) Ember 1.x.x
dukex
0
120
Concorrência em GO
dukex
0
41
Meetup Go - Como construi o uhuraapp.com
dukex
4
690
Realtime - Usando o MeteorJS
dukex
3
610
Como fazer API melhor que o governo?
dukex
1
700
Raspagem de Dados com Ruby
dukex
1
950
Grid System com Amor
dukex
0
710
Other Decks in Programming
See All in Programming
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
410
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
12
3.2k
Goで作る、開発・CI環境
sin392
0
230
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.2k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Designing Experiences People Love
moore
142
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Designing for Performance
lara
610
69k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Speed Design
sergeychernyshev
32
1k
Typedesign – Prime Four
hannesfritz
42
2.7k
Building an army of robots
kneath
306
45k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
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!