All geek questions in one place

CSS Roll Over with Sprites and Sliding Doors

Trying to find an example that has css rollover using sprites and sliding door methods.

I am not literate css, so a full example or a link to a full example will be appreciated.

All I'm trying to do is have buttons <a href>that are not fixed widths with a good rollover effect and the ability to add an icon (similar to a web forecast).

+3
source share
4 answers

This article is below ( http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/ ), but is adapted for use with a tag.

It is similar to @ xijo's answer, with a few minor changes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > 
<html>
<head>
<title>Test</title>

    <style type="text/css">
/* REQUIRED BUTTON STYLES: */       
a { 
    border: 0; 
    padding: 0;
    display:inline-block;
}

a span { 
    display: block; 
    white-space: nowrap;
    cursor: hand;
}

/* OPTIONAL BUTTON STYLES for applying custom look and feel: */     
a.submitBtn { 
    padding: 0 15px 0 0; 
    margin-right:5px; 
    font-size:2em; 
    text-align: center; 
    background: transparent url(btn_blue_sprite.gif) no-repeat right -140px; 
}

a.submitBtn span {
    padding: 13px 0 0 15px; 
    height:37px; 
    background: transparent url(btn_blue_sprite.gif) no-repeat left top; 
    color:#fff; 
}

a.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the     hover state with a script */
    background-position: right -210px; 
}

a.submitBtn:hover span, button.submitBtnHover span {
    background-position: 0 -70px;
}

    </style>
</head>
<body>
This is a bunch <a href="#" class="submitBtn"><span>Submit</span></a> of text.
</body>
</html>
+3
source

We did something similar, and you might find it useful. In the anchors, we used span and assigned them the following css:

HTML:

<a href="example"><span>echo</span></a>

CSS

a, a:visited {
  background:   url(left.png) no-repeat scroll left;
}

.tabContainer a span {
  background:   url(right.png) no-repeat scroll right;  
  margin:       0 0 0 21px;
  padding:      0 21px 0 0;
  float:        left;
}

and then point them like this:

.a:hover {
  background-position: -45px;
}

.a:hover span {
  background-position: -45px;
}

Left and right should look proportionate, of course! :) I hope this helps you solve your problems with Css !;)

+2
source

CSS . " ".

, :

http://kailoon.com/css-sliding-door-using-only-1-image/

javascript ...:) "click to show little bit advanced hover;" ), ;)

www.arvag.net/test/jquery/

If you want something like that, just say it and I will try to explain it.

+1
source

Well, depending on what you want, this is very variable, but say that you want the button to change color when the mouse is above it, and has a small image that appears next to it, this is what you do. d need:

HTML:

<ul>
<li>home<img src="sprite.png" width="16px" height="16px" alt="tinypic" /></li>
....

</ul>

CSS

ul li img {
display: none;
}
ul li {
background: #FFFFFF;
}
ul li:focus, ul li:hover, ul li:active {
background: #000000;
}
ul li:focus li img, ul li:hover li img, ul li:active ul li img{
display: inline;
margin-right: -16px; // should stop the button expanding
}

But, as I said, this is a very simple trimmed answer

0
source

Source: https://habr.com/ru/post/1716930/

More articles:


All Articles