Download - CSS::SpriteMaker in action!
![Page 1: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/1.jpg)
CSS::SpriteMakerin Action!
London.pm Technical MeetingLondon, Thursday, 19 September 2013
Savio DimatteoPerl DeveloperNestoria Property Search
![Page 2: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/2.jpg)
What is a CSS Image Sprite?
image containing smaller images
+CSS rules to render each smaller image
![Page 3: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/3.jpg)
Example of Image Sprite
chess.png
![Page 4: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/4.jpg)
Example of associated CSS rule set.white-king-ico,.chess-ico,.white-knight-ico,.white-queen-ico,.chess-board-ico,.white-pawn-ico,.black-queen-2d-ico,.white-bishop-ico,.black-king-2d-ico,.white-castle-ico { background-image: url('chess.png'); background-repeat: no-repeat; }
.white-king-ico { background-position: 0px 0px; width: 256px; height: 256px; }
.chess-ico { background-position: -256px 0px; width: 256px; height: 256px; }
.white-knight-ico { background-position: 0px -256px; width: 256px; height: 256px; }
.white-queen-ico { background-position: -256px -256px; width: 256px; height: 256px; }
.chess-board-ico { background-position: -512px 0px; width: 256px; height: 256px; }
.white-pawn-ico { background-position: -512px -256px; width: 256px; height: 256px; }
.black-queen-2d-ico { background-position: 0px -512px; width: 256px; height: 256px; }
.white-bishop-ico { background-position: -256px -512px; width: 256px; height: 256px; }
.black-king-2d-ico { background-position: -512px -512px; width: 256px; height: 256px; }
.white-castle-ico { background-position: -768px 0px; width: 256px; height: 256px; }
style.css
![Page 5: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/5.jpg)
<html> <head> <title>CSS::SpriteMaker Technique</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="white-knight-ico" /> </body></html>
Example of technique
![Page 6: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/6.jpg)
<html> <head> <title>CSS::SpriteMaker Technique</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <img src="spacer.png" class="white-knight-ico" /> </body></html>
Example of technique
![Page 7: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/7.jpg)
Making a Sprite
● Online batch generators
● WYSIWYG online tools
● Command-line tools written in
Java/Ruby/Python… and only recently in
Perl!
○ CSS::SpriteBuilder
![Page 8: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/8.jpg)
CSS::SpriteMaker in Action
![Page 9: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/9.jpg)
CSS::SpriteMaker in Action
![Page 10: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/10.jpg)
CSS::SpriteMaker in Action
![Page 11: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/11.jpg)
CSS::SpriteMaker in Action
![Page 12: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/12.jpg)
CSS::SpriteMaker in Action
![Page 13: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/13.jpg)
CSS::SpriteMaker in Action
![Page 14: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/14.jpg)
CSS::SpriteMaker in Action
![Page 15: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/15.jpg)
CSS::SpriteMaker in Action
![Page 16: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/16.jpg)
CSS::SpriteMaker in Action
![Page 17: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/17.jpg)
CSS::SpriteMaker in Action
![Page 18: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/18.jpg)
Remove Padding
![Page 19: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/19.jpg)
Remove Padding
![Page 20: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/20.jpg)
Group icons: same kind same row
![Page 21: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/21.jpg)
Group icons: same kind same row
![Page 22: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/22.jpg)
Group icons: Nestoria map markers
![Page 23: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/23.jpg)
Group icons: two icons per row
![Page 24: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/24.jpg)
Group icons: two icons per row
![Page 25: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/25.jpg)
Advanced Layouts
+
=
?
![Page 26: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/26.jpg)
Advanced Layouts
![Page 27: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/27.jpg)
Advanced Layouts
![Page 28: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/28.jpg)
Advanced Layouts
![Page 29: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/29.jpg)
Advanced Layouts
![Page 30: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/30.jpg)
Advanced Layouts
![Page 31: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/31.jpg)
Advanced Layouts
![Page 32: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/32.jpg)
Advanced Layouts - Packed
![Page 33: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/33.jpg)
Advanced Layouts - FixedDimension
![Page 34: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/34.jpg)
Advanced Layouts - DirectoryBased
![Page 35: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/35.jpg)
CSS Class Generation
● based on file name of input image
○ no characters collide with CSS syntax
● collisions
○ input image file name: “alice.png”
○ input image file name: “alice.gif”
○ result: .alice .alice-1
![Page 36: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/36.jpg)
CSS Class Names Generation
![Page 37: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/37.jpg)
CSS Sprite Viewer
…
…
![Page 38: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/38.jpg)
CSS Sprite Viewer
![Page 39: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/39.jpg)
Perl Modules Used
● File::Find
○ discover input images
● Module::Pluggable
○ for pluggable layouts
● Image::Magick
○ read/write/identify images
![Page 40: CSS::SpriteMaker in action!](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bac9bb4c905b8618b5598/html5/thumbnails/40.jpg)
Questions?● twitter.com/darksmo● www.savio.dimatteo.it/talks● github.com/darksmo● github.com/lokku
London.pm Technical MeetingLondon, Thursday, 19 September 2013
CSS::SpriteMakerin Action!
We’r
e hiri
ng!
www.lokk
u.com
/jobs