Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
CSS::SpriteMaker
in Action!
London.pm Technical Meeting
London, Thursday, 19 September 2013
Savio Dimatteo
Perl Developer
...
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-p...
<html>
<head>
<title>CSS::SpriteMaker Technique</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<...
<html>
<head>
<title>CSS::SpriteMaker Technique</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<...
Making a Sprite
● Online batch generators
● WYSIWYG online tools
● Command-line tools written in
Java/Ruby/Python… and onl...
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 imag...
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/...
Questions?
● twitter.com/darksmo
● www.savio.dimatteo.it/talks
● github.com/darksmo
● github.com/lokku
London.pm Technical...
Prochain SlideShare
Chargement dans…5
×

CSS::SpriteMaker in action!

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.

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

CSS::SpriteMaker in action!

  1. 1. CSS::SpriteMaker in Action! London.pm Technical Meeting London, Thursday, 19 September 2013 Savio Dimatteo Perl Developer Nestoria Property Search
  2. 2. What is a CSS Image Sprite? image containing smaller images + CSS rules to render each smaller image
  3. 3. Example of Image Sprite chess.png
  4. 4. 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
  5. 5. <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
  6. 6. <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
  7. 7. Making a Sprite ● Online batch generators ● WYSIWYG online tools ● Command-line tools written in Java/Ruby/Python… and only recently in Perl! ○ CSS::SpriteBuilder
  8. 8. CSS::SpriteMaker in Action
  9. 9. CSS::SpriteMaker in Action
  10. 10. CSS::SpriteMaker in Action
  11. 11. CSS::SpriteMaker in Action
  12. 12. CSS::SpriteMaker in Action
  13. 13. CSS::SpriteMaker in Action
  14. 14. CSS::SpriteMaker in Action
  15. 15. CSS::SpriteMaker in Action
  16. 16. CSS::SpriteMaker in Action
  17. 17. CSS::SpriteMaker in Action
  18. 18. Remove Padding
  19. 19. Remove Padding
  20. 20. Group icons: same kind same row
  21. 21. Group icons: same kind same row
  22. 22. Group icons: Nestoria map markers
  23. 23. Group icons: two icons per row
  24. 24. Group icons: two icons per row
  25. 25. Advanced Layouts + = ?
  26. 26. Advanced Layouts
  27. 27. Advanced Layouts
  28. 28. Advanced Layouts
  29. 29. Advanced Layouts
  30. 30. Advanced Layouts
  31. 31. Advanced Layouts
  32. 32. Advanced Layouts - Packed
  33. 33. Advanced Layouts - FixedDimension
  34. 34. Advanced Layouts - DirectoryBased
  35. 35. 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
  36. 36. CSS Class Names Generation
  37. 37. CSS Sprite Viewer … …
  38. 38. CSS Sprite Viewer
  39. 39. Perl Modules Used ● File::Find ○ discover input images ● Module::Pluggable ○ for pluggable layouts ● Image::Magick ○ read/write/identify images
  40. 40. Questions? ● twitter.com/darksmo ● www.savio.dimatteo.it/talks ● github.com/darksmo ● github.com/lokku London.pm Technical Meeting London, Thursday, 19 September 2013 CSS::SpriteMaker in Action! W e’re hiring! www.lokku.com /jobs

×