LUCiD GRAFiX Logo

Video tutorials
YouTube RSS Feed
Search

VIDEO TUTORIAL

How to make a CSS sprite in Photoshop and then bring it to life – Revisited

*Set the video to HD for best viewing experience.
Written by Posted on November 27th, 2013 No Comments
Share This

How to make a CSS sprite in Photoshop and then bring it to life – Revisited

Today we are making a sprite using Photoshop and then in sublime text bringing to life, using CSS3 properties to give it a cool feel as well as a more modern look.

When making a sprite you need to make sure the height of the image doubles the size of the element your adding the sprite to, one half reflects the current state and the other reflects the hover state.

markup

 CSS

In this example I’m using CSS3 transition duration to give a smooth effect to the changing position of the sprite and also giving a smooth transition to the box-shadow on the ul.

Here is a link to site that builds them for you http://csssprites.com/.

And always…

Happy Coding!

Check out the Demo! Download files!

About

Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

Related Articles You Might Enjoy!

CSS3 Menu using only CSS and no JavaScript CSS3 Menu using only CSS and no JavaScript
How to use Font Awesome Icons How to use Font Awesome Icons
How to use LESS in Dreamweaver How to use LESS in Dreamweaver
Leave a comment

Leave a Reply