css::spritemaker in action!
DESCRIPTION
CSS::SpriteMaker is a Perl module that allows you to create CSS Image Sprites. A CSS Image sprite is an image containing smaller images, plus a CSS stylesheet that allows the browser to render each smaller image. In this talk I present CSS::SpriteMaker by example, covering its advanced layouts and features.TRANSCRIPT
CSS::SpriteMakerin Action!
London.pm Technical MeetingLondon, Thursday, 19 September 2013
Savio DimatteoPerl DeveloperNestoria Property Search
What is a CSS Image Sprite?
image containing smaller images
+CSS rules to render each smaller image
Example of Image Sprite
chess.png
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
<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
<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
Making a Sprite
● Online batch generators
● WYSIWYG online tools
● Command-line tools written in
Java/Ruby/Python… and only recently in
Perl!
○ CSS::SpriteBuilder
CSS::SpriteMaker in Action
CSS::SpriteMaker in Action
CSS::SpriteMaker in Action
CSS::SpriteMaker in Action
CSS::SpriteMaker in Action
CSS::SpriteMaker in Action
CSS::SpriteMaker in Action
CSS::SpriteMaker in Action
CSS::SpriteMaker in Action
CSS::SpriteMaker in Action
Remove Padding
Remove Padding
Group icons: same kind same row
Group icons: same kind same row
Group icons: Nestoria map markers
Group icons: two icons per row
Group icons: two icons per row
Advanced Layouts
+
=
?
Advanced Layouts
Advanced Layouts
Advanced Layouts
Advanced Layouts
Advanced Layouts
Advanced Layouts
Advanced Layouts - Packed
Advanced Layouts - FixedDimension
Advanced Layouts - DirectoryBased
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
CSS Class Names Generation
CSS Sprite Viewer
…
…
CSS Sprite Viewer
Perl Modules Used
● File::Find
○ discover input images
● Module::Pluggable
○ for pluggable layouts
● Image::Magick
○ read/write/identify images
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