Hello amigos (a) mais um dia de tutorial, personalizei 2 efeitos inclinados com bordas e efeito opacity. Fica lindo nas postagens do blog.
Copie o código abaixo cole antes de ]]></b:skin> e salve.Descanse o mouse nas imagens e confiram os exemplos
Imagem inclinada para direita
img{
opacity: 0.7;
-webkit-transition: 0.5s;
border:2px dashed #8B8989;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
-webkit-border-radius: 15px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
img:hover{
opacity: 1.0;
border:2px dashed #8B8989;
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-border-radius: 15px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
Imagem inclinada para esquerda
Copie o código abaixo cole antes de ]]></b:skin> e salve.
img{
opacity: 0.7;
-webkit-transition: 0.5s;
border:2px dashed #8B8989;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
-webkit-border-radius: 15px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
img:hover{
opacity: 1.0;
border:2px dashed #8B8989;
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-webkit-border-radius: 15px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
Dicas extras de personalização:
Se deseja que o efeito apareça apenas nas imagens que você escolher altere o seguinte trecho no código:
Exemplo 1
Apague= img{
Escreva= .direita{
Apague= img:hover{
Escreva= .direita:hover{
Sempre que desejar utilizar o efeito adicione o endereço da imagem
no código abaixo.
<img src="ENDEREÇO DA IMAGEM"class="direita"/>
Exemplo 2
Apague= img{
Escreva= .esquerda{
Apague= img:hover{
Escreva= .esquerda:hover{
Sempre que desejar utilizar o efeito adicione o endereço da imagem
no código abaixo.
<img src="ENDEREÇO DA IMAGEM"class="esquerda"/>
Dany, adorei o tutorial!
ResponderExcluirBeijos mulher antenadíssima ♥
Dany, eu não consigo achar o código ]]>, mesmo eu usando o Ctrl F. O que eu faço?
ResponderExcluirBrigada bjs
http://avacadaleitecorderosa.blogspot.com.br/
Oi amiga o ctrl F voltou a funcionar na página de edição do html no blogger. Copie o código que foi pedido por completo e de enter 1 vez e aguarde se não encontrar de enter outra vez.... ele vai encontrar. Algumas vezes ele não encontra de primeira ^^
ExcluirDesculpa a demora na resposta linda... espero te ajudado big beijos!
Adorei o tutorial, é algo divertido para o blog.
ResponderExcluir➥http://simpleseagradavel.blogspot.com.br/
➥http://www.facebook.com/SimplesAgradavelBlog
ola querida
ResponderExcluiradorei o tutorial!!!!
um beijo!!!!
http://www.gostandodavida.com/
Muito legal esse efeito! :)
ResponderExcluirGostei kk
Beijão
Batom de Framboesa
adoreiiiiiiiii amiga!!!
ResponderExcluir*--*
beijooooooooooooooooooooooooooooooooo!
Heiiiiiiiii kkkkk eu aqui de novo ,vc nem imagina o quanto eu gosto de te vistar ... E amei o tutorial lindo ♥ bjs
ResponderExcluirOi Dani! Seu cantinho é uma graça, e além disso super útil! Não conhecia esse efeito ainda! Bjs
ResponderExcluirQue fácil hein? Gostei da dica, vou tentar fazer sozinha. Bjks.
ResponderExcluirwww.blogbelissima.com.br
Amiga adorei o efeito, muito legal.
ResponderExcluirQue tal Dica Musical: Avril lavigne com o Clipe novo dela de primeirissima mão? Isso mesmo o clipe foi lançado hoje, confira: http://www.dicasdaandy.blogspot.com.br/2013/05/dica-musical-avril-lavigne.html
Quem na presença constante me ensinou
ResponderExcluirna pureza do seu coração a vislumbrar
caminhos…
Dos primeiros passos, das primeiras
palavras…
Do amor sem dimensão, de cada momento,
dos atos de cada capítulo de minha vida
não ensaiados, mas vividos em cada
emoção.
Da conversa no quintal, do acalanto do
meu sono aquecido de amor, aninhada
em seu coração…
MÃE …
do abraço, do beijo que levo na
lembrança…
é você que me inspira a caminhar…
A presença de cada passo que o
tempo não apaga: por mais longo
e escuro que seja o caminho, haverá
sempre um horizonte…
Mãe mulher a quem devemos a vida,
que merece o nosso respeito,
nossa gratidão e nosso afeto.
Nessa mensagem com todo sentimento
de uma filha , que chora saudades eternas
de você mãe.
È merecido um Dia para homenagear
todas as mães do mundo.
Com carinho e saudades deixo aqui meu abraço
de amiga ,filha ,mãe e meu primeiro ano
do dia das mães (Bisavó).
Na postagem tem mimos caso gostar fique
a vontade para levar foi feito com muito carinho.
Um feliz final de semana.
Um Feliz Dia Das Mães.
Carinhosamente,Evanir.
Efeito mega divertido! *------*
ResponderExcluirBeijos!
Pandas vs Unicornios
Tipo, o efeito mais lindo do mundo! Vou colocar no meu blog! Obrigada!
ResponderExcluirTem um sorteio no blog, é um colar escrito love e uma pulseira com o símbolo da paz! Beijos
http://www.belasenhorita.net.br/
Nossa,que efeito bacana!Você sabe de tuuudo hãn!? Bacana
ResponderExcluirBeijos
Bem legal os efeitos, rs... Gosto mais de inclinada para a direita, fica mais fofo ahushau
ResponderExcluirfashion em cores -.com
Muito útil!
ResponderExcluirAdorei o tutorial :)
Adoro seu blog
Beijos~~~
OI QUERIDA ^^ COMO FOI O FIM DE SEMANA ?
ResponderExcluirTENHO QUE DIZER QUE ADOREIIIIIIIIII ESSE EFEITO, DEVE FICAR MUITO FOFO MESMO NO BLOG.
VC SABE TAAAAAANTA COISA JÁ FEZ CURSO ? OU APRENDEU TUDO SOZINHA ?
EU NÃO SOU MUITO BOA PARA APRENDER AS COISAS SOZINHA NÃO RSRSRSRSRS....
TENHA UMA ÓTIMA SEMANA.
BEIJOS.
Como sempre uma simpatia né Paty ^^
ExcluirNão não, nunca fiz curso, foi por amor mesmo, mas tenho um irmão que já me ajudou muito porém hoje ele so trabalha com Rede. ^^
beijos grandes amiga ...
Esses códigos:
ResponderExcluirimg src="ENDEREÇO DA IMAGEM"class="direita"/>
img src="ENDEREÇO DA IMAGEM"class="esquerda"/>
serão utilizados no HTML do post?
Muito obrigada, funcionou e ficou lindo! http://orientlovers.blogspot.com.br/
ResponderExcluir