Blog

Archive

Categories

Friday
21
May
2010
Mark
0

Slightly more complex sprites

Welcome to part 2 of the 3 part sprite series. If you missed the first part then go check out my ’Simple sprites’ post. So what happens when you’ve got a menu based on say a map where you might have a bit of an overlap with your sprites? If you create a sprite the traditional way then you will notice that when you hover on your link there will be a slight hover on another link. Let me demonstrate. Here’s what we want to have: If we were to use a normal sprite it would look like this: (...)
HTML , CSS , Tutorials
Wednesday
19
May
2010
Mark
0

Simple sprites

This is the first of three tutorials on sprites. So lets start with the basics. Sprites are a very good way of having hover effects on an image using only CSS and no javascript. It also puts many images into one to reduce the total page size and requests per page. It is best used in image menus. The premise behind sprites is simple. You have an image containing all of the images and their hover states. You have ’a’ tags for each image you want (keep in mind you can do this with any block (...)
HTML , CSS , Tutorials
Tuesday
15
Sep
2009
Mark
0

CSS peephole

CSS Peephole DemoThis code is what I have used in my scroller as well as a number of other projects that I have worked on where the client wants new content to be moved in. It has its best effect when used with jQuery to AJAX in some new content and animate it into the viewing area. The general idea is to have a large content area inside a smaller div which is position relative and overflow hidden thus making the smaller outside div a peephole to the larger content div. The following code (...)
HTML , CSS , Tutorials
© 2009—2012 Odyssey Web Design & Development | Home | Disclaimer | Powered by SPIP