Veja um demo clicando no botão abaixo ou em Result no Box de códigos.
- Copie o código CSS do Box de códigos Vá ao painel do Blogger->modelo->editar HTML->use Ctrl+F e localize]]></b:skin>
- Acima desta tag cole o código CSS
- Ir para o painel do blogger->layout Clique em Adicionar um Gadget.
- Na janela Adicionar um gadget->HTML/JavaScript.
- Copie o código JS abaixo e cole-o dentro da caixa de conteúdo.
- Salvar o gadget. Arraste o gadget e reposicione-o onde você quer mostrá-lo.
- Clique no botão Salve (canto superior direito).
- No código JS onde esta escrito(AQUI URL DA IMAGEM) coloque a URL da sua imagem.
- As imagens são de 128x128 pixels.
<div class='container'>
<div class='wrap'>
<div class='crop'>
<img src='https://lh5.googleusercontent.com/-86CAYs6Dc0g/VEkuBbbL8JI/AAAAAAAAHsw/ini_gr8ADvA/s128-no/cavalo.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4HtF9QSrvsjIgaLVfmemMqzR9LZ6XGIyZ945if03XI9gg8DUBbMTzJAkvZ235iD0WUVN2i-WvVxwZdWf2RLWdIOVZqUZbeQ-qw22nHW43n_PqKFVdC1SPEx6n4vGtGUxyXFxM6XNNHW-/s128-no/elefante.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='https://lh4.googleusercontent.com/-EhDqv76vaks/VEkuzCTFwhI/AAAAAAAAHtY/iunQTUCuCFE/s128-no/lobo.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqQkrXZZHW1K0uKsgsSAptbuuDqDa0jlBniGFMgwqLMl8-ThtyxahyX0M00DbXXVBaW9jI6sga1IzAOFzZ3b_vmGP6dh6uVolPCCmNZLJiPet2xCDNLQbLuPjvfn6NidQy878zP8D3oscj/s128-no/on%C3%A7a128x128.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='https://lh6.googleusercontent.com/-EHqZMUArq-o/VEkx8DlFpuI/AAAAAAAAHuU/hOxUYmhJO6Q/s128-no/puma128x128.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMEYIWf1shgW5bL8grh4Z9RlCAigTjjO_9andHZ1TQhGdSg4SfHQL9klw1y5y6z7dmFxysFN7GnEy1Xj4K9nyQ7eCYlUzq5Z8HBKc-qLg1Lb7aE5jksXQMG-_BDMp4gw4XrRepc1VDpGAP/s128-no/tigre128x128.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='https://lh3.googleusercontent.com/-UE4uJv4MHSo/VEkyRPGmQSI/AAAAAAAAHu8/PtvNcgTr3rs/s128-no/urso128x128.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='https://lh6.googleusercontent.com/-dClIWQy2rzk/VEkyaZ2ubfI/AAAAAAAAHvQ/6UtX-s0PmIU/s128-no/zebras128x128.jpg'>
</div>
</div>
</div>
See the Pen CSS Triângulo de imagens com efeito by Mairink (@Oemes) on CodePen.
0 comentários:
Postar um comentário
Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!