6 Legal legendas da imagem com CSS3

CSS3 é realmente poderoso. Costumava ser que precisássemos de imagens ou um monte de linhas de código JavaScript para fazer um simples efeito de transição. Hoje em dia podemos fazer o mesmo com apenas CSS3.

Neste tutorial, mostraremos como criar legendas de imagens com várias transições usando CSS3.

Demonstração
Fonte de download

Suporte de Navegador

Essa legenda será muito dependente das propriedades de transformação e transição, que são recursos relativamente novos, portanto, seria sensato observar o suporte ao navegador necessário para executar a legenda sem problemas.

A seguir estão navegadores que já suportam transformação e transição:

Internet Explorer 10+ (ainda não lançado)
Firefox 6+
Chrome 13+
Safari 3.2+
Ópera 11+

Agora vamos começar o tutorial.

Estrutura HTML

Nós temos 6 imagens; cada imagem com um estilo de legenda diferente.

     Legenda simples
  
     Legenda completa
 Lorem ipsum dolor sente-se amet, consectetuer adipiscing elit, sed diam não gostoso nibh euismod tincidunt para laoreet dolore magna aliquam erat volutpat.
  
     Fade Caption
 Lorem ipsum dolor sente-se amet, consectetuer adipiscing elit, sed diam não gostoso nibh euismod tincidunt para laoreet dolore magna aliquam erat volutpat.
  
     Legenda de slides
 Lorem ipsum dolor sente-se amet, consectetuer adipiscing elit, sed diam não gostoso nibh euismod tincidunt para laoreet dolore magna aliquam erat volutpat.
  
      Esta é a legenda de rodar
 Lorem ipsum dolor sente-se amet, consectetuer adipiscing elit, sed diam não gostoso nibh euismod tincidunt para laoreet dolore magna aliquam erat volutpat.
  
 
     Legenda de estilo livre
 Lorem ipsum dolor sente-se amet, consectetuer adipiscing elit, sed diam não gostoso nibh euismod tincidunt para laoreet dolore magna aliquam erat volutpat.

CSS básico

Antes de estilizar qualquer elemento, é sempre um bom começo para redefinir todas as propriedades usando essa redefinição de CSS e dar a elas seus valores de estilo padrão, para que todos os navegadores renderizem o mesmo resultado (exceto talvez, IE6).

Os estilos serão separados no arquivo style.css, portanto, nosso arquivo HTML ficará limpo. No entanto, não se esqueça de adicionar um estilo de link dentro da tag head para aplicar as regras de estilo no arquivo.

OK, vamos começar a estilizar o elemento, começando pela tag html e pelo id do wrapper principal:

 html background-color: #eaeaea;  #mainwrapper font: 10pt normal Arial, sans-serif; altura: auto; margem: 80px auto 0 auto; texto-alinhar: centro; largura: 660px;

Estilo da caixa de imagem

Aplicamos alguns estilos comuns nas caixas que contêm as imagens. As caixas serão exibidas lado a lado usando a flutuação à esquerda. Observe que também adicionamos overflow: hidden property; isso fará com que todos os objetos que passam pelo div sejam escondidos.

Também declaramos propriedade de transição em todas as imagens dentro da caixa, no caso de precisarmos da transição de imagem mais tarde.

 #mainwrapper .box border: 5px solid #fff; cursor: ponteiro; altura: 182px; flutuar: esquerda; margem: 5px; posição: relativa; estouro: oculto; largura: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc;  #mainwrapper .box img position: absolute; esquerda: 0; -webkit-transition: todos os 300ms de facilidade; -moz-transition: toda a facilidade de 300ms; -o-transição: todos os 300ms de facilidade; -ms-transition: todos os 300ms de facilidade; transição: todos os 300 ms de facilidade;

Estilo comum de legenda

A legenda terá alguns estilos comuns e também propriedade de transição. Em vez de usar a propriedade de opacidade, usamos o modo de cor RGBA com 0,8 para o canal alfa para que a legenda pareça um pouco transparente sem afetar o texto interno.

 #mainwrapper .box .caption background-color: rgba (0,0,0,0,8); posição: absoluta; cor: #fff; índice z: 100; -webkit-transition: todos os 300ms de facilidade; -moz-transition: toda a facilidade de 300ms; -o-transição: todos os 300ms de facilidade; -ms-transition: todos os 300ms de facilidade; transição: todos os 300 ms de facilidade; esquerda: 0;

Legenda 1

A primeira legenda terá um efeito de transição simples que é comumente usado para uma legenda. A legenda surgirá da parte inferior quando passarmos o mouse sobre a imagem. Para resolvê-lo, a legenda terá uma altura fixa de 30px e aplicaremos sua posição inferior -30px para ocultá-la abaixo da imagem.

 #mainwrapper .box .simple-caption height: 30px; largura: 200px; display: bloco; fundo: -30px; altura da linha: 25pt; texto-alinhar: centro;

Legenda 2

O segundo tipo tem a largura e a altura totais da dimensão da imagem / caixa (200x200px) e a transição seria como um efeito de porta deslizante que deslizaria de cima para baixo..

 #mainwrapper .box .full-caption width: 170px; altura: 170px; topo: -200px; texto-alinhar: esquerda; preenchimento: 15px;

Legenda 3

A terceira legenda terá efeito de desvanecimento. Então, adicionamos opacidade: 0 para o estado inicial.

 #mainwrapper .box .fade-caption, #mainwrapper .box .escala-legenda opacidade: 0; Largura: 170px; altura: 170px; texto-alinhar: esquerda; preenchimento: 15px;

Legenda 4

A quarta legenda deslizará da esquerda para a direita, então fixamos 200px para a esquerda (esquerda: 200px) como sua posição inicial.

 ** Legenda 4: Slide ** / #mainwrapper .box .slide-caption width: 170px; altura: 170px; texto-alinhar: esquerda; preenchimento: 15px; esquerda: 200px;

Legenda 5

A quinta legenda terá efeito rotativo. Não é apenas a legenda que irá rodar, mas também a imagem. É mais como a mudança de posição ao girar.

Então, adicionamos a propriedade transform com uma rotação de -180 graus, a menos que você prefira girar o monitor para ler a legenda.

 #mainwrapper # box-5.box .rotate-caption width: 170px; altura: 170px; texto-alinhar: esquerda; preenchimento: 15px; top: 200px; -moz-transform: rotate (-180deg); -o-transform: rotate (-180deg); -webkit-transform: rotate (-180deg); transformar: girar (-180deg);  #mainwrapper .box .rotate width: 200px; altura: 400 px; -webkit-transition: todos os 300ms de facilidade; -moz-transition: toda a facilidade de 300ms; -o-transição: todos os 300ms de facilidade; -ms-transition: todos os 300ms de facilidade; transição: todos os 300 ms de facilidade;

Legenda 6

A última legenda terá transformação de escala. No entanto, nas legendas anteriores, o texto dentro dele será exibido junto com a transição de transição .caption. Nesta seção, vamos torná-lo um pouco diferente.

O texto aparecerá depois que a mudança de transição estiver concluída. Então, adicionamos atraso de transição no texto, nesse caso, a tag h3 e p.

 #mainwrapper .box .escala de legenda h3, #mainwrapper .box .escala de legenda p posição: relativa; esquerda: -200px; Largura: 170px; -webkit-transition: todos os 300ms de facilidade; -moz-transition: toda a facilidade de 300ms; -o-transição: todos os 300ms de facilidade; -ms-transition: todos os 300ms de facilidade; transição: todos os 300 ms de facilidade;  #mainwrapper .box .escala-legenda h3 -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -o-transição-atraso: 300ms; -ms-transition-delay: 300ms; atraso de transição: 300ms;  #mainwrapper .box .escala de legenda p -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transição-atraso: 500ms; -ms-transition-delay: 500ms; atraso de transição: 500ms;

Vamos fazê-los mover

Na seção a seguir, definiremos o comportamento da legenda ao passar o mouse sobre as imagens ou caixas.

Comportamento de legenda 1: aparecer.

Para a primeira legenda, gostaríamos que ela aparecesse (da parte inferior) quando passarmos por cima da caixa. Para lidar com esse movimento, usamos a propriedade transform e o código CSS abaixo informa a legenda para mover 100% de seu peso para o topo.

 #mainwrapper .box: pairar .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); transformar: translateY (-100%);

Se você não entender o valor negativo do translateY, leia este tutorial primeiro para obter mais insights.

Comportamento de legenda 2: Mover para baixo.

Por outro lado, a segunda legenda irá descer do topo. Então, teremos um valor positivo para translateY.

 #mainwrapper .box: passe a mouse .full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transformar: translateY (100%);

Comportamento de legenda 3: Fade in.

A terceira legenda é realmente a mais fácil. Quando a caixa estiver em foco, a opacidade da legenda mudará para 1, tornando-a visível, e como adicionamos a propriedade de transição na classe de legenda, a transição deve ser executada sem problemas.

 #mainwrapper .box: pairar .fade-caption opacidade: 1;

Comportamento de legenda 4: deslize-o para a esquerda.

Como mencionamos anteriormente, esta legenda será colocada à esquerda, no entanto, a imagem também deslizará para a direita. Então, aqui temos duas declarações CSS.

O código CSS abaixo indica que, quando passarmos pela caixa, a legenda deslizará 100% de sua largura para a esquerda. Observe que agora usamos o translateX, porque queremos que o slide se mova horizontalmente da direita para a esquerda.

 #mainwrapper .box: pairar .slide-caption background-color: rgba (0,0,0,1)! importante; -moz-transform: translateX (-100%); -o-transformar: translateX (-100%); -webkit-transform: translateX (-100%); opacidade: 1; transformar: translateX (-100%);

Quando passamos por cima da caixa, a imagem deslizará para a esquerda.

 #mainwrapper .box: passe o mouse img # image-4 -moz-transform: translateX (-100%); -o-transformar: translateX (-100%); -webkit-transform: translateX (-100%); transformar: translateX (-100%);

Comportamento de legenda 5: girar.

Esta legenda é diferente do restante, pois não se moverá da direita ou da esquerda, mas irá girar. Quando a caixa estiver em foco, a div contendo a imagem e a legenda girará -180 no sentido anti-horário, ocultando a imagem e mostrando a legenda.

 / ** Rotate Caption: hover Comportamento ** / #mainwrapper .box: pairar .rotate background-color: rgba (0,0,0,1)! Important; -moz-transform: rotate (-180deg); -o-transform: rotate (-180deg); -webkit-transform: rotate (-180deg); transformar: girar (-180deg);

Comportamento de legenda 6: aumentá-lo.

Esta legenda combinará vários efeitos de transformação. Quando a caixa está em foco, a imagem aumentará em 140% (1,4) a partir de sua dimensão inicial.

 #mainwrapper .box: hover # image-6 -moz-transform: escala (1.4); -o-transformar: escala (1.4); -webkit-transform: escala (1.4); transformar: escala (1,4);

E se você viu o CSS acima Legenda 6 encabeçando, nós escondemos o texto à esquerda por 200px. Este código CSS abaixo diz ao texto para mover para sua posição inicial. Então, o texto deslizará da esquerda para a direita simultaneamente.

 #mainwrapper .box: passe o mouse em .scale-caption h3, #mainwrapper .box: passe o mouse em .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); transformar: translateX (200px);

Demonstração
Fonte de download

Resumo

Embora esses recursos CSS sejam legais, ainda não são amplamente aplicáveis, devido às limitações de suporte ao navegador que mencionamos anteriormente. No entanto, continue experimentando esses novos recursos, porque é assim que vamos moldar uma página da web no futuro.

Créditos

Miniaturas de imagem no tutorial são obtidas nos seguintes sites (captura de tela):

Um livro à parte
Archiduchesse
Vlog
Hongkiat
The Greeting Farm
Mark Ecko