CSS::SpriteMaker in action!

781 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
781
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×