Curta Nossa Página do Facebook!


  • Desenvolvido Por Iago Melanias

    Efeito Apagar Luzes

    Falae galera,trago aqui um tutorial muito legal na minha opnião,e o famoso "Apagar Luzes",muito encontrado em videos do youtube, vantagem desse script e que ele deixa seu blog de videos/animes... com uma "Cara" mais profissional,bom vamos ao tutorial

    clique aqui para demonstração


    Primeiro procure por:
    </head>

    Acima disso cole:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function(){
        $(&#39;#mascara&#39;).css(&#39;height&#39;, $(document).height()).hide();
            $(&#39;.interruptor&#39;).click(function(e) {
                e.preventDefault();
                $(&#39;#mascara&#39;).toggle();
                    if ($(&#39;#mascara&#39;).is(&#39;:hidden&#39;)) {
                        $(this).html(&#39;Apagar luzes&#39;).removeClass(&#39;apaga-acende&#39;);
                    } else {
                        $(this).html(&#39;Acender luzes&#39;).addClass(&#39;apaga-acende&#39;);
                    }
            });
          
    });
    </script>


    Agora procure por:
    ]]></b:skin>

    Acima disso cole:

    /*Apagar Luzes-DOB
    ----------------------------------------------- */
    #filme {
    position:relative;
    z-index:2;
    margin:20px 0 20px 50px;
    }
    .interruptor {
    position:relative;
    z-index:2;
    display:block;
    width:120px;
    margin-top: 25px;
    }
    #mascara {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    background:#000;
    opacity:.75;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    z-index: 1;
    }
    a.interruptor {
    font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif !important;
    text-shadow:0px 0px 2px #000000;
    margin:1px;
    color:#fff;/*Cor da fonte (Luzes "Acesas") */
    background:#98bbbd; /*Cor de fundo (Luzes "Acesas") */
    text-align:center;
    border-radius:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius:5px;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    box-shadow: #000 0px 0px 2px;
    }
    a.interruptor:hover {
    font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
    font-size:14px;
    color:#fff;/*Cor da fonte (Luzes "Apagadas") */
    background:#ccc;/*Cor de fundo (Luzes "Apagadas")*/
    text-align:center;
    text-decoration:none;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    }
    a.apaga-acende {
    font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif !important;
    text-shadow:0px 0px 2px #000000;
    margin:1px;
    background:#98bbbd;
    color:#ffffff;
    box-shadow: #000 0px 0px 2px;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    }


    Codigo para postagem:

    <a class="interruptor" href="javascript:void(0)">Apagar luzes</a><div id="filme">
    Codigo do player
    </div>
    Definicões do video (Caso não tenha apague esta linha)
    <div id="mascara">
    </div>


    Bom galera,é até isso a proxima,qualquer duvida comentem

    11 comentários:

    1. valeu mano, muito boa a dica.
      Tem como deixar mais escuro ?? E tem como botar o botão debaixo do videos ??

      ResponderExcluir
    2. Respostas
      1. Cara copia no Ctrl + C que funciona. Ai depois e so colar onde quiser. vlw

        Excluir
      2. NÃO DA PRA COPIAR '------------------'

        Excluir
      3. Copia no Ctrl+C que funfa,akie funfo talvez seja o navegafor tenta o Firefox

        Excluir
      4. pensei na mesma coisa e.e mas eu uso o Firefox...

        Excluir
      5. mas deixa pra lá, vlw mesmo assim ^-^ Mister-kun

        Excluir
    3. puts cara no meu fica preto e não da pra mexe msm se a luz tive acessa !

      ResponderExcluir
    4. omo faço para um html em inframe n ficar preto tb?

      ResponderExcluir
    5. omo faço para um html em inframe n ficar preto tb?

      ResponderExcluir