CSS image mosaic technology
Split image
Flatten the image is a collection of individual images.
There are many images on the page may take a long time to load and generates multiple server requests.
Use an image server split will reduce the number of requests and save bandwidth.
Split image - simple example
Instead of using three separate images, as we use this single image ( "img_navsprites.gif"):
With CSS, we can show only a part of the image we need.
In the example below shows a portion of the specified CSS "img_navsprites.gif" image:
Analysis examples:
- <Img class = "home" src = "img_trans.gif" /> - because they can not be empty, src attribute defines only a small transparent image. The image displayed will be we specify in CSS background images
- Width: 46px; height: 44px; - defined part of the image that we use
- background: url (img_navsprites.gif) 0 0; - custom background image and its position (left 0px, top 0px)
This is done using an image split the easiest way, and now we use links and hover effects.
Flatten the image - to create a navigation list
We want to use the split image ( "img_navsprites.gif"), to create a navigation list.
We will use a HTML list, because it can be linked, and also supports a background image:
Examples
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
try it"
Analysis examples:
- #navlist {position: relative;} - position is set relative positioning, allow absolute positioning inside
- #navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margin and padding is set to 0, the list style is deleted, all the list items are absolute positioning
- #navlist li, #navlist a {height: 44px; display: block;} - the height of all images is 44px
Now each specific part positioning and style:
- #home {left: 0px; width: 46px;} - positioned to the left, and the way the image width is 46px
- #home {background: url (img_navsprites.gif) 0 0;} - custom background image and its position (left 0px, top 0px)
- #prev {left: 63px; width: 43px;} - on the right positioning 63px (#home width 46px + some extra space between items), a width of 43px.
- #prev {background: url ( 'img_navsprites.gif') -47px 0;} - custom background image on the right 47px (#home dividers width 46px + 1px)
- #next {left: 129px; width: 43px;} - to the right positioning 129px (#prev 63px + #prev width is 43px + remaining space), the width is 43px.
- #next {background: url ( 'img_navsprites.gif') no-repeat -91px 0;} - custom background image on the right 91px (#home 46px + 1px dividing line + # prev width 43px + 1px dividers)
Flatten the image s - hover effect
Now, we want our navigation list to add a hover effect.
 | : The effect hover selector for hover over the element display Tip:: hover selector can be applied to all elements. |
|---|
Our new image ( "img_navsprites_hover.gif") contains three navigation images and three images:
Because this is a single image, instead of six separate image file when a user stays on the image will not delay loading.
We add hover effects add only three lines of code:
Examples
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
try it"
Analysis examples:
- Since the list item contains a link, we can use the: hover pseudo-class
- #home a: hover {background: transparent url (img_navsprites_hover.gif) 0 -45px;} - For all three hover images we specify the same background position, but then down 45px each