How to create the fade effect on a link that uses Sprite?

Asked

Viewed 680 times

0

I created a link with a transition effect, but no fade, but rather a background movement.

HTML

<a class="botao" href="#">Contrate agora</a>

CSS

.botao {
    background:url(http://i.stack.imgur.com/5PWNy.png) 0 0;
    color: #fff;
    padding:10px;
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 transparent;
    -moz-box-shadow: 0 1px 0 transparent;
    -webkit-box-shadow: 0 1px 0 transparent;
    position:relative;
    font-family: Tahoma, Geneva, sans-serif;
    z-index:0;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s; 
}
.botao:hover {
    background-position: 0 -50px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s; 
}
.botao:active {
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
    -webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
    -moz-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
    -ms-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
    -o-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
}    
a {text-decoration:none;}

Jsfiddle

How I make the effect occur fade in the background transition?

html css

  • What do you mean out of place? It’s that white line that appears on top of the black line, at the bottom?

  • 1

    Explain your problem better, it’s not clear what you want.

  • no, like, I put a transition, but it doesn’t fade, it just changes the background position. http://jsfiddle.net/a5Yn8/3/

  • It is that you are effectively animating the background position, so there is no fade. To have fade, you would have to animate another property

  • Could you give me a hand? I also thought of using jQuery/Javascript to create some cool effect...

  • Look at the buttons on this site: http://www.hoteldaweb.com.br/hospedagemde-sites/ It uses jQuery effects.

  • 2

    I suggest you reformulate the question and the title a little bit, to better reflect the desire for the fade effect. The expression "out of place" is very vague

Show 2 more comments

2 answers

3


In my experience and by that other answer here, it is not possible to do fade of opacity between two background-image using only CSS3.

What you would have to do would be to create two overlapping elements, with background-image different, and animate their respective opacity via CSS3 Animation.

If you really want to do it in Javascript, this code here serves as an example, does not use any very new functionality, and works in Chrome, Firefox and even IE9:

<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Teste</title>
        <style type="text/css">
        .container, .botao {
            font: normal 16px tahoma;
            text-align:center;
            width: 150px;
            height: 40px;
            color:#FFF;
            cursor: pointer;
            display: inline-block;
            vertical-align: bottom;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
        .container {
            position: relative;
        }
        .botao {
            padding:10px;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .frente {
            background: url(http://i.stack.imgur.com/5PWNy.png) 0 -100px;
            z-index: 1;
        }
        .tras {
            background: url(http://i.stack.imgur.com/5PWNy.png) 0 -150px;
            z-index: 0;
        }
        .container:active .tras {
            box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
            -webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
            -moz-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
            -ms-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
            -o-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
        }
        </style>
    </head>
<body>
    <span>Botão 1:</span>
    <div class="container">
    <div class="botao frente" style="opacity: 1;" id="el1">TESTE</div>
    <div class="botao tras">TESTE</div>
    </div>

    <span>Botão 2:</span>
    <div class="container">
    <div class="botao frente" style="opacity: 1;" id="el2">TESTE 2</div>
    <div class="botao tras">TESTE 2</div>
    </div>

    <script type="text/javascript">
    function buttonMouseChanged(fadingIn) {
        //Trabalhando com o Closure a nosso favor ;)
        var _this = this, animate;
        animate = function () {
            var o = parseFloat(_this.style.opacity);
            if (_this.fadingIn) {
                o += 0.05;
                if (o < 1)
                    setTimeout(animate, 1000 / 60);
                else
                    o = 1;
            } else {
                o -= 0.05;
                if (o > 0)
                    setTimeout(animate, 1000 / 60);
                else
                    o = 0;
            }
            _this.style.opacity = o;
        };
        this.fadingIn = fadingIn;
        setTimeout(animate, 1000 / 60);
    }

    function buttonMouseEnter() {
        buttonMouseChanged.call(this, false);    
    }

    function buttonMouseLeave() {
        buttonMouseChanged.call(this, true);    
    }

    function prepareButton(id) {
        var btn = document.getElementById(id);
        btn.onmouseenter = buttonMouseEnter;
        btn.onmouseleave = buttonMouseLeave;
    }

    prepareButton("el1");
    prepareButton("el2");
    </script>
</body>
</html>

Note how the value of opacity of el1, and of el2, starts defined as 1, to be able to do the parseFloat() always work.

To make the animation improve a little, it would be interesting not to use a fixed value (like 0.05) to add and subtract from the opacity, but a value proportional to the time elapsed since the last execution of the function animate().

3

I made an example here using opacity, see:

HTML

<a href="#" class="botao"><span>Contrate agora</span><span></span></a>

CSS

.botao {
    display: inline-block;
    position: relative; 
    width:120px;
    height:30px;        
    text-align:center;
    text-decoration:none;
    color:#FFF;
    background: url(http://i.stack.imgur.com/5PWNy.png);
}
.botao span:first-child{
    z-index:30;
    position:absolute;
    display:block;
    left:0;right:0;margin:auto;
    margin-top:5px;
}

.botao span:last-child{z-index:29;
    position: absolute;  z-index:0;  
    top: 0; left: 0; bottom: 0; right: 0;
    background: url(http://i.stack.imgur.com/5PWNy.png);
    background-position: 0 -50px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}
.botao:hover span {
    opacity: 1;
}

Example in Jsfiddle

Reference using Sprite: http://css-tricks.com/fade-image-within-sprite/

  • 1

    Thanks! @Paulo Maciel turned out great, now just integrate.

  • yours turned excellent, however, just does not have the transfer in IE. i found this: http://www.toprated.com.br/static-content/jquery-button/ Thanks Paul for your help! : D

  • 1

    I think I’ll use your example, because I think I’m using a lot of scripts, I’ll take it easy. The one above it uses jQuery, it causes the mouse over the button to happen opacity with a transition.

  • 1

    i updated your code: http://jsfiddle.net/a5Yn8/6/ look how it turned out! ;)

  • @Alexandrelopes is looking good! And to work in IE you must use filter:alpha(opacity=value); look at http://css-tricks.com/snippets/css/cross-browser-opacity/ examples

  • I was trying to put on my site it got buggy, I think it was because of the position:absolute

  • @Alexandrelopes talking like this makes it difficult to identify the problem, if something is occurring that is breaking your layout, ask a new question and put screenshot and the code to be able to better analyze

  • Thanks @Paulo Maciel I will try to fix, any doubt I put here.

  • I put what you said, it worked, only it got bugged... Open it in IE to see how it looks: http://jsfiddle.net/a5Yn8/10/

  • if it weren’t for this mini-bug would be perfect...

Show 5 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.