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
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
73
Lightning Talk: Testes em Javascript
dukex
0
98
Lightning Talk: Fluxo (básico) Ember 1.x.x
dukex
0
100
Concorrência em GO
dukex
0
31
Meetup Go - Como construi o uhuraapp.com
dukex
4
660
Realtime - Usando o MeteorJS
dukex
3
590
Como fazer API melhor que o governo?
dukex
1
670
Raspagem de Dados com Ruby
dukex
1
870
Grid System com Amor
dukex
0
680
Other Decks in Programming
See All in Programming
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Git Lint
bkuhlmann
4
750
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
Fast JSX: Don't clone props object #28768
yossydev
1
100
Elm 0.19.0 Changes
bkuhlmann
0
490
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
800
使ってみよう Azure AI Document Intelligence
kosmosebi
2
310
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
Apache Hive 4 on Treasure Data
ryukobayashi
0
320
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
380
ONE WEDGE_company_guide
1wedge_one
0
480
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
A Philosophy of Restraint
colly
197
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Designing with Data
zakiwarfel
96
4.8k
Infographics Made Easy
chrislema
238
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
GraphQLとの向き合い方2022年版
quramy
32
12k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Navigating Team Friction
lara
178
13k
Building Adaptive Systems
keathley
31
1.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!