CSS::SpriteMaker in action!
•
0 j'aime•1,085 vues
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.
Recommandé
Contenu connexe
Similaire à CSS::SpriteMaker in action!
Similaire à CSS::SpriteMaker in action! (20)
Plus de lokku
Plus de lokku (20)
Dernier
Dernier (20)
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