Image Sprites

CSS Image Sprites In Class Practice and CSS Image Sprites W3Schools Tutorials

• Image Sprite 1


• Image Sprite 2


• Image Sprite 3


• Image Sprite 4


• Image Sprite 5


• Image Sprite 6

CSS Image Sprites Outside of Class

• Skyline Image Hover


• Yoda Image Hover


• Monster Animation

CSS Image Sprites Sample

• Animated Image Sprite Circle

Resources

W3Schools Image Sprites

CSS Image Sprites Tutorial

Image Slicing

Image Sprites Techniques and Tools

CSS Image Sprites Background Positioning

CSS Image Sprites Best Practices

CSS Image Sprites Background Image

CSS Image Sprites Animation Steps

CSS Tricks On Image Sprites

Image Sprite Sheet

Reflection Statement

What I Knew

When creating CSS Image Sprites, I saw that we can use images as hovers.

What I Learned

I learned that CSS Image Sprites can be used to hover over another image. For example, the social media icons I added for this web page shows a saturated image, but when you hover over it, it turns into a desaturated image. I know because I worked with Image Sprites in Adobe PhotoShop and it was worth it. Coding it all out is more fun! I also really liked how you can animate an image sprite. In order to create animation to an image sprite, you'll need to have a spritesheet and you can find any tutorials online to show you how to do it.

What I Still Want to Study

I still want to study on what would happen if your spritesheet doesn't wok probably on your web page. Will it be an easy fix?