Efeitos originais usando CSS

Usando CSS para criar efeitos avançados com imagens e textos

As possibilidades de CSS3 estão apenas começando a ser aplicada e de alguma forma, são infinitas. As opções são muitas e, geralmente, bastante simples de implementar. Neste caso, Gemm@ nos mostra como fazer uma série de efeitos originais criados por codrops. Aqui, eu vou tentar reproduzir um deles, mas o resto pode ser visto no demo online ou download diretamente para seu PC.

Siga o @bloggermin agora e fique por dentro das novidades para o seu blog. E curta nossa página no Facebook.

Todos eles têm uma estrutura similar; dentro de um DIV com alguma classe CSS (view), adicione uma imagem cujo tamanho define o resto das propriedades e, em seguida, outra DIV que permanecerá oculta (mask) e cujo conteúdo pode ser variável.
<div class="view">
<img src="URL_IMAGEM" />
<div class="mask">
<h4> o título </h4>
<p> o trexto </p>
<a href="#" class="info"> LER MAIS </a>
</div>
Obviamente, o CSS é o que importa e é ... tempo, porque, infelizmente, terá repetir muitas propriedades já que os navegadores, ainda não decidiram por unificá-los.
<style>
.view { /* DIV principal damos a mesma dimensão da imagem a usar, nesse caso, 300 x 188 */
border: 10px solid #FFF;
cursor: pointer;
height: 188px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
width: 300px;
}
.view img { /* a imagem */
display: block;
position: relative;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity: 1;
filter: alpha(opacity=100);
}
.view:hover img { /* se "anima quando passamos o mouse em cima */
-moz-transform: rotate(720deg) scale(0);
-webkit-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.view .mask { /*  DIV oculta com os textos */
background-color: #ABC;
height: 188px;
left: 0;
position: absolute;
overflow: hidden;
top: 0;
width: 300px;
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.view:hover .mask { /* DIV é mostrado */
-moz-transform: translateY(0px) rotate(0deg);
-webkit-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);
}
.view h4 { /* o título permanece oculto */
background-color: rgba(255, 255, 255, 0.5);
color: #FFF;
text-align: center;
position: relative;
font-family: Georgia;
font-size: 20px;
margin: 20px 0 0 0;
padding: 5px 0;
text-shadow: 0 3px 1px #000;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover h4 { /* título é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view p { /* o texto permanece oculto */
color: #000;
font-family: Tahoma;
font-size: 13px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px #FFF;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover p { /* texto é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view a.info { /* o link permanece oculto */
background-color: #456;
border-radius: 5px;
box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;
color: #FFF;
display: inline-block;
padding: 7px 14px;
text-decoration: none;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view a.info:hover {
box-shadow: 0 0 5px #FFF;
}
.view:hover a.info { /* link é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
</style>


estilos com estilo

Vivamus ultrices enim ac ante commodo et interdum odio pulvinar! Duis vel nisl at sapien luctus tincidunt. Mauris in erat risus, id euismod felis.
LER MAIS

COMENTÁRIOS

Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Efeitos originais usando CSS
Efeitos originais usando CSS
Usando CSS para criar efeitos avançados com imagens e textos
https://lh3.googleusercontent.com/-jJeewTEbznk/TMT0hAUK0zI/AAAAAAAAB2w/igGPy1uwknc/s300/18_0071.jpg
https://lh3.googleusercontent.com/-jJeewTEbznk/TMT0hAUK0zI/AAAAAAAAB2w/igGPy1uwknc/s72-c/18_0071.jpg
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/06/efeitos-originais-usando-css.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/06/efeitos-originais-usando-css.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar