Jun 25, 2023
3D Perspective Hover
seen from Malaysia
seen from United Kingdom
seen from Germany
seen from United States
seen from United States
seen from Australia
seen from China
seen from Germany
seen from Italy
seen from United States
seen from China
seen from Kuwait
seen from Germany
seen from Germany
seen from Germany
seen from Germany
seen from China
seen from United States
seen from United States
seen from Germany
3D Perspective Hover
É um efeito bem legal para usar em themes para tumblrs de fotos, e é bem fácil de fazer. Você não precisa entender muito de CSS, pois o código já está praticamente pronto. Enfim, vamos as previews: Efeito 1 / Efeito 2 / Efeito 3 / Efeito 4
Primeiro vamos ao CSS do efeito, vá no seu theme e procure por <head> e logo abaixo cole o seguinte código:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/8l2gpxb/ONvmfhf6h/exemplo1.css"> <script type="text/javascript" src="http://static.tumblr.com/8l2gpxb/24kmfhdj7/modernizr.custom.69142.js"></script>
Bom, vou explicar pra que serve: exemplo1.css são as configurações de fonte e grade da sua imagem, se você souber fazer um bom div, nem precisa dele, mas se quiser se poupar do trabalho, então use-o. Depois tem algumas metatags de configuração e o javascript do efeito. Escolha agora, o efeito que quer usar, copie o código correspondente e cole também depois de <head>:
Efeito 1:
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/8l2gpxb/Tm7mfi20j/style1.css">
Efeito 2:
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/8l2gpxb/W5Dmfhigl/style2.css">
Efeito 3:
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/8l2gpxb/jtAmfi2cu/style3.css">
Efeito 4:
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/8l2gpxb/OGYmfi2fc/style4.css">
Agora colocaremos as configurações da parte de baixo da imagem, fundo, fonte, ou seja o hover e o tamanho da imagem que você vai usar. Pegue este código e cole no seu CSS (depois de <style>). O código está configurado para 300x200, o tamanho da imagem da preview. Caso queira usar outro tamanho, altere apenas o tamanho da imagem no início do código, onde tem:
.view { width: 300px; height: 200px; (...)
Agora, basta colocar o código abaixo e configurar onde está em negrito a seu gosto:
<div id="grid" class="main"> <div class="view"> <div class="view-back"> <span><small>♥ 1210</small></span> <span><small>REBLOG</small></span> <a href="LINK DA SETINHA">→</a> </div><img src="http://URL-DA-SUA-IMAGEM.PNG" /> </div></div>
Você pode substituir onde tem o coraçãozinho e o numero dos notes e o reblog pelas tags do tumblr e por em um theme de imagens se quiser, vai ficar realmente fofo, já deixo pronto para vocês caso queiram usar:
<div id="grid" class="main"> <div class="view"> <div class="view-back"> <span><small>♥ {NoteCount}</small></span> <span><small> <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="blank">REBLOG</a></small></span> <a href="{Permalink}">→</a> </div><img src="{PhotoURL-500}" /></div></div>
E finalmente, cole o código abaixo depois de <body>:
<script type="text/javascript"> Modernizr.load({ test: Modernizr.csstransforms3d && Modernizr.csstransitions, yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', 'http://static.tumblr.com/8l2gpxb/86Hmfi5rt/jquery.hoverfold.js'], nope: 'http://static.tumblr.com/8l2gpxb/PiLmfi5r2/fallback.css', callback : function( url, result, key ) { if( url === 'http://static.tumblr.com/8l2gpxb/86Hmfi5rt/jquery.hoverfold.js' ) { $( '#grid' ).hoverfold();}}}); </script>
Bom, é isso, qualquer erro ou dúvida deixem uma ask. O efeito não foi feito por mim, mas a adaptação e explicação e hospedagem dos códigos sim, então se usar, CREDITE! Thanks.