Hoooy gente acabei de selecionar 3 efeitos super legais pra vocês usarem no design de seus bloguitos Será que vão gostar? - espero que sim - Dá um preview no meu blog de testes:
Se gostou de um desses clique em leia mais e aprenda como fazer, é super fácil
O efeito Lower é tipo o efeito entrada www que eu uso aqui no blog, a diferença é que esse desce por cima. Veja:
Pra ter esse efeito é só ir no seu HTML e colocar o código abaixo antes de ]]></b:skin>
/*** efeito lower por htmlstrew ***/@-webkit-keyframes lower {0% {opacity: 0;-webkit-transform: translateY(-2000px);}60% {opacity: 1;-webkit-transform: translateY(30px);}80% {-webkit-transform: translateY(-10px);}100% {-webkit-transform: translateY(0);}}.eflow {margin-top:#px; margin-left:#px;-webkit-animation: lower 2.3s;}
E quando for usar coloque isso:
<img class="eflow" src="URLDAIMGAGEM">
Esse efeito pode ser usado na elite afiliados, na equipe do seu blog e onde mais sua imaginação permitir *--*
Pra ter esse efeito é só ir no seu HTML e colocar o código abaixo antes de ]]></b:skin>
/***** EFEITO MODERAS ******/
.imagem:hover{opacity:1.0;-webkit-transition-duration: .45s;}
.efeito img{width: 116px; -webkit-transition-duration: .45s;}
.efeito:hover img {-webkit-transition-duration: .45s; -webkit-transform: rotate(360deg); opacity: 0.20;}
.efeito img:hover {-webkit-transition-duration: .45s; opacity: 1.0;}
Você pode editar a largura da imagem se quiser, alterando o número destacado de vermelho. E quando for usar coloque isso:
<div class="efeito">
<a href="LINKDESTINO"><img src="URLDAIMAGEM" class="imagem"></a>
<a href="LINKDESTINO"><img src="URLDAIMAGEM" class="imagem"></a>
<a href="LINKDESTINO"><img src="URLDAIMAGEM" class="imagem"></a>
</div>
É o mais simples e você pode usar onde quiser.
Pra ter esse efeito é só ir no seu HTML e colocar o código abaixo antes de ]]></b:skin>
.pb {-webkit-transition-duration: .90s;}.pb:hover {-webkit-transition-duration: .90s;-webkit-filter: grayscale(100%);}
E quando for usar coloque isso:
<img src="link da imagem" class="pb">
Credits: ?
Quem quiser pedir um post ou tutorial essa é a hora, aproveitem hahah :p
p.s E aí gostaram de algum efeito?
Sempre arrasando nos tutoriais, né Jackie?! Eu adorei e daqui a pouco vou tentar um desses efeitos. !
ResponderExcluir>>Bonequiinha de Luxo<<
- xoxo -
Aaah muito brigada Amanda *---*
Excluirmuito paia
ExcluirJackie, menina lindaaaaaaa <3
ResponderExcluirEu ameiiiiiii os efeitos!!! Show!!! Principalmente o efeito lower e foto preto e branco! Você é demais! rsrsrsrs... Não é à toa que tá no meu (humilde) Blogroll! kkkkkkkk... Beijinhossssss!!!
solteiras-noivas-casadas.blogspot.com
♥
O efeito lower tbm foi meu preferido *--*
Excluir<3
vc anda copiando esses tutus dos tumbls e nem credita !!!
ResponderExcluirTodo tutorial que não é de minha autoria é devidamente creditado ao menos que eu não saiba quem criou ou caso eu use de base um código pra modifica-lo.
ExcluirEsses acima estão T-O-D-O-S com créditos com ‘’link direto’’ para o seu criador então antes de falar merda leia o post se informe primeiro (:
amei o efeito 2 e 3 com certeza vou usar no meu próximo lay <3
ResponderExcluirhttp://conectadas2.blogspot.com.br/
Todos lindos, adorei o primeiro bem diferente ele ^^
ResponderExcluirhttp://gobelezando.blogspot.com.br/
Adorei os efeitos <3
ResponderExcluirbeijos
depoisdovento.blogspot.com
amei os efeito flor, perfeitos demais *--*
ResponderExcluirhttp://alinewdesigner.blogspot.com.br
bju e tenham um lindo dia!
Nossa, amei o do preto com branco, sabe como por em todas as fotos de uma vez só ? se sim, me dá um help ! alias seu blog é tão lindo ♥
ResponderExcluirilovestarandbooks.blogspot.com
Antes de skin
Excluircole:
img {
-webkit-filter: grayscale(0%);
transition:All 0.4s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover {
-webkit-filter: grayscale(100%);
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}
beijus (:
Espero que ajude e obrigada pelo carinho <3
Excluirme ajudou e muito,omg vou te por na minha página de créditos, nada mais justo TODOS os seus tutoriais são de muita e excelente ajuda! Usei varios, invejinha da sua perfeição ♥
Excluirawn *--* magina guri, se precisar tô aqui õ/
ExcluirOi Jack, achei tão bacana esse tuto. Vou testar qualquer horas dessas...
ResponderExcluirBem que vc poderia ensinar como se faz pra fazer essas imagens redondinhas do "You might also like". Acho elas tão fofas, mas num sei colocar no meu blog. :(
Bjokas flor...
Todos os efeitos são incríveis :D o que eu mais gostei foi o preto e branco!
ResponderExcluirBeeijinhos
cow!
ExcluirArrazou vou usar no meu blog .
ResponderExcluirParabéns pelo trabalho eu amei a máquina rosa foto
beijitos
www.dicasdajucy.blogspot.com
Esse preto e branco e muito legal! *o*
ResponderExcluirhttp://garotasederivados.blogspot.com.br/
Adorei os códigos, principalmente o do efeito moderation.
ResponderExcluirCAT GIRL
Escrevi sobre você no blog *--*
ResponderExcluirhttp://kissyou-mi.blogspot.com.br/
gostei do ultimo efeito :)
ResponderExcluireu tenho um pouco de medo daquelas bonequinhas que tem na foto da equipe no sidebar kkkkkk -meignore
estou seguindo aqui.
http://apenasleiteepimenta.blogspot.com.br/
Adorei os efeitos, alias o seu blog é muito fofo .
ResponderExcluirAceita parceria ?
Não faço mais parcerias no blog :(
Excluirvcs receberam um selinho, clique nesse link : http://mundophotoscapem.blogspot.com.br/ e veja.Bjus
ResponderExcluirMyllena/Mundo PhotoScape
Usei o preto e branco ^-^
ResponderExcluirKiss
>> Babado MH <<
brigada por avisar *--*
ExcluirJackie essa sua equipe e muito boa pena que quando fui avisada da seleçao de colaboradoras voce ja havia escolhido mas tudo bem agora vou focar na faculdade e confirmando SEU BLOG TA SUPER!!! Beijim da Mary :*
ResponderExcluirMuuito obrigada Mary!
ExcluirTá certinha em focar na faculdade. Alias formei a equipe justamente pq vou entrar na facul tbm e queria uma ajudinha extra por aqui *---*
beijus!
amei seu blog achei muito fofo ja estou te seguido fofa me seguede volta:)
ResponderExcluirhttp://http:/mlleglamour.blogspot.com.br
Amei o Preto e Branco *---* Já estou usando em meu blog hahaha
ResponderExcluirEstou seguindo seu blog Flor :)e Curtindo Sua Pagina do Face :D
Adoraria Que vc Seguise de volta e se possivel curte minha página tbm Tem cm? rs
Seu Blog se resume em perfeição,seus tutoriais são muito legal,e que concerteja já ajudou muita gente :)
http://fearless-of-myla.blogspot.com.br
Brigada *--*
ExcluirAmeeeeeei ; seguindo jáa .
ResponderExcluirSegue ? ;D
Hey Jackie ! :3
ResponderExcluiradoro seu blog, seus tutoriais me ajudam muuuito.
Eu queria saber se dá pra por o efeito preto e branco em todas as imagens do blog , Me ajuda ? :x
Valeu ^^
topsolb.blogspot.com.br
Antes de skin
Excluircole:
img {
-webkit-filter: grayscale(0%);
transition:All 0.4s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover {
-webkit-filter: grayscale(100%);
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}
Olá, eu nao consigo achar os codicos que tem que procurar por favor me ajude
ResponderExcluirvc só tem que achar 1 código que é skin
Excluirse vc NÃO achou não tem nem como eu te ajudar?! O.o
amoore só nao entendi onde usar oq vc escreveu >> quando for usar cole isso ?? onde?
ResponderExcluirhttp://fabiysteisi.blogspot.com.br/
onde vc quer que o efeito apareça uéé (?)
Excluirpor exemplo: se for na barra lateral cole na aba ''HTML java script'', mas se numa postagem tem que ser na aba HTML.
Eu não entendi muito bem o " Quando for usar coloque isso " Usar o que? Colocar onde? Por favor responda ¬¬'
ResponderExcluirAmei os efeitos,são todos lindos,as vezes é difícil escolher um só *u*
ResponderExcluirhttp://hobbies-to-autumn.blogspot.com.br/
Oii eu queria saber um tutorial que as fotos ficasse preto e branco e quando coloca-se o mouse em cima ele ficava normal, mas eu queria isso só nos post relacionados...
ResponderExcluirSó na postagem relacionada eu não sei Helena :s
ExcluirAqui,na parte de "link da imagem" do preto e branco,eu gostaria de colocar em todas as fotos da postagem,sabe?Eu gostaria de saber,se você puder,qual é o link para colocar automaticamente em todas as postagens.Gostaria muito muito mesmo!
ResponderExcluirAntes de skin
Excluircole:
img {
-webkit-filter: grayscale(0%);
transition:All 0.4s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover {
-webkit-filter: grayscale(100%);
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}
Como assim ''quando for usar coloque isso'' (efeito preto e branco) eu não entendi, tem que colocar na onde?
ResponderExcluirOnde você quer usar.
ExcluirEXEMPLO: se for na barra lateral cole na aba ''HTML java script'', mas se numa postagem tem que ser na aba HTML.
Atrapalha se estiver usando um Layout baixado??
ResponderExcluirTem como usar 2 efeitos juntos?
ResponderExcluirnão
ExcluirAdorei. muito obrigada.
ResponderExcluirEu coloquei para todas as imagens. Só não achei que ia ficar na imagem do nome do meu blog :(
Visite o blog Minha Fuga da Realidade
Está rolando sorteio em comemoração aos 2 anos da MFdR , participe!