CSS Sprites ucoz - UcozBaze All Scripts And Templates

CSS Sprites ucoz

GoblinaS

Date: Sunday, 2011-09-11, 9:47 PM | Message # 1

Group: S-Moderator

Messages: 380

CSS Sprites

What is CSS sprite?

CSS sprites can be termed as a method for reducing the number of image requests to a web page by combining multiple images into a single image, and display the desired segment using CSS background-image and background-position properites. Now that almost all major browsers started supporting CSS background-image and background-position properties, CSS sprites are getting more significance.

Here I am presenting a cool overlapped pure CSS menu created using CSS sprites. This is an initial draft version, so far I have checked it only in Firefox 5.0, IE 9, Chrome 5.1 & Opera 11.0 and it looks fine. If anyone of you finds any issues in any other browsers, please let me know. Cool sprites is a pack of four different versions of the same menu.

CSS:

Code

.navi1 {
      display:block;
      height:72px;
      margin:0 auto;
      position:relative;
      width:525px; }
.navi1 ul {
      float:none;
      list-style-image:none;
      list-style-type:none;
      margin:3px 0; }
.navi1 ul li {
      background-image:url(tab-1.png);
      background-repeat:no-repeat;
      float:left;
      height:72px;
      margin:0px;
      padding-top:5px;
      position:absolute; }
.navi1 ul li a {
      display:block;
      height:100%;
      width:100%; }
.navi1 ul li.sm1 {
      background-position:0 0;
      left:0px;
      width:125px; }
.navi1 ul li.sm2 {
      background-position:-125px 0;
      left:100px;
      width:124px; }
.navi1 ul li.sm3 {
      background-position:-249px 0;
      left:200px;
      width:124px; }
.navi1 ul li.sm4 {
      background-position:-373px 0;
      left:300px;
      width:125px; }
.navi1 ul li.sm5 {
      background-position:-498px 0;
      left:400px;
      width:126px; }
.navi1 ul li:hover {
      z-index:1000; }
.navi1 ul li.sm1:hover {
      background-position:0 -75px; }
.navi1 ul li.sm2:hover {
      background-position:-125px -75px; }
.navi1 ul li.sm3:hover {
      background-position:-249px -75px; }
.navi1 ul li.sm4:hover {
      background-position:-373px -75px; }
.navi1 ul li.sm5:hover {
      background-position:-498px -75px; }

HTML:

Code

Message

CSS Sprites

What is CSS sprite?

Code

HTML:

Code

Author - GoblinaS
Date Added - 2011-09-11 в 9:47 PM