CSS::SpriteMaker in action!
0 likes1,090 views
The document outlines a presentation on the css::spritemaker technique conducted by Savio DiMatteo at a London.pm technical meeting. It explains the concept of CSS image sprites, provides examples of associated CSS rules for rendering smaller images, and discusses the generation of CSS classes based on image filenames. Additionally, it mentions various tools for creating sprites and features Perl modules utilized in the process.
CSS::SpriteMaker in action!
- 1. CSS::SpriteMaker in Action! London.pm Technical Meeting London, Thursday, 19 September 2013 Savio Dimatteo Perl Developer Nestoria Property Search
- 2. What is a CSS Image Sprite? image containing smaller images + CSS rules to render each smaller image
- 3. Example of Image Sprite chess.png
- 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. <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. <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. Making a Sprite ● Online batch generators ● WYSIWYG online tools ● Command-line tools written in Java/Ruby/Python… and only recently in Perl! ○ CSS::SpriteBuilder
- 18. Remove Padding
- 19. Remove Padding
- 20. Group icons: same kind same row
- 21. Group icons: same kind same row
- 22. Group icons: Nestoria map markers
- 23. Group icons: two icons per row
- 24. Group icons: two icons per row
- 26. Advanced Layouts
- 27. Advanced Layouts
- 28. Advanced Layouts
- 29. Advanced Layouts
- 30. Advanced Layouts
- 31. Advanced Layouts
- 32. Advanced Layouts - Packed
- 33. Advanced Layouts - FixedDimension
- 34. Advanced Layouts - DirectoryBased
- 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. CSS Class Names Generation
- 39. Perl Modules Used ● File::Find ○ discover input images ● Module::Pluggable ○ for pluggable layouts ● Image::Magick ○ read/write/identify images
- 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