Go to navigation Go to content
Toll-Free: 888-886-0939
Phone: 703-665-0307
Foster Web Marketing

Now That’s a Sprite Image!

Comments (0)

Working the other day we came across an awesome image configuration for your sprite file that has up, down, left and right arrows. Check it out:

This one tiny little image: diamond for sprite   Yeilds: up down left right

In Action:

right and left

up and down

 

The HTML:

[[div class="down arrow"]][[/div]]
[[div class="up arrow"]][[/div]]
[[div class="left arrow"]][[/div]]
[[div class="right arrow"]][[/div]]

The CSS:

.arrow{
   background:url(/images/sprites.jpg) no-repeat;
   float:left;
   margin:5px;
}
.arrow.up, .arrow.down{
   height:9px;
   width:18px;
}
.arrow.left, .arrow.right{
   height:18px;
   width:9px;
}
.arrow.down, .arrow.left{
   background-position:0 0;
}
.arrow.up{
   background-position:0 -8px;
}
.arrow.right{
   background-position:-9px 0;
}
Be the first to comment!

Post a Comment

To reply to this message, enter your reply in the box labeled "Message", hit "Post Message."

Name:*

Email:* (will not be published)

Message:*

Notify me of follow-up comments via email.