23/11/2016

Efeitos nas imagens do blog [Variados]


Yo! Yo! Yo bunnie's! Hoje não trago exatamente um tutorial, mas sim códigos de efeitos. Todos nós conhecemos o famoso efeito opacidade em imagens, preto e branco etc... porém existe muitos mais e hoje trouxe alguns. Eles estão assim sem lisos. Mas se você saber utiliza-los pode criar outros efeitos de imagens bem legais, por exemplo mesclar alguns deles os equilibrando.

Eu deixei o código com . main img, porém você pode utilizar em outros lugares como nas imagens da postagem, da sidebar, ou apenas em uma especifica. Supomos que queira criar um avatar para a sidebar de "bem vindo" e a tag do avatar se chama .beijo: dentro do corpo do código você  pode adicionar o o código de efeito:

.beijo {
-webkit-filter: sepia(1);
width: 120px;
height: 140px;
}

Também funciona em menus, dependendo de como ele for. Bom agora sem mais delongas aqui vai os códigos.


Opacidade (Opacity)
.main img {
-webkit-filter: opacity(0.7);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Preto e Branco (Grayscale)
.main img {
-webkit-filter: grayscale(100%);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Borrado (Blur)
.main img {
-webkit-filter: blur(3px);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Sépia
.main img {-webkit-filter: sepia(1);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Saturação (Saturate)
.main img {
-webkit-filter: saturate(4);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Brilho/ A imagem fica mais escura (Brightness)
.main img {
-webkit-filter: brightness(0.5);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Efeito Azulão/ Negativo em azul ( Hue Rotate)
.main img {
-webkit-filter: hue-rotate(180deg);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Invertido/ Negativo (Invert)
.main img {
-webkit-filter: invert(100%);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Contrate (Contrast)
.main img {
-webkit-filter: contrast(4);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

2 comentários:

  1. Adoro esses efeitos, já vou personalizar no meu blog.

    ResponderExcluir
    Respostas
    1. Hihi que bom! Que lhe seja muito útil. =3

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345