Algumas aplicações da tag title no CSS

Estava eu no outro dia a mexer aqui no CSS quando reparei que estava utilizando alguns truques catitas dos quais ainda não escrevi nenhum tutorial mostrando como usar. 8)

E como este blogue anda meio lento estes dias (é mal do administrador no Verão... e no resto do ano. :-` ), vou aqui explicar como usar o CSS em duas situações onde normalmente se utiliza o javascript para dar alguns estilos a determinado elemento tendo como referência a tag title.

Para comprovar a existência da tag title nos exemplos abaixo ou em qualquer elemento, basta colocar o rato em cima do dito cujo.

Para o primeiro exemplo, que utilizei no artigo Dimensões no CSS: Exacta, Máxima, Mínima para colocar os nomes dos artistas das imagens com que decorei o artigo. Como sei que muita gente nem vai clicar no link que subtilmente inseri, aqui fica o que quero dizer (e com nova imagem qué pró artigo não aborrecer muito I-X ):

Nota: Mais uma vez, esta imagem foi retirada do site Heromorph. Neste caso, foi a imagem que a MsV me ofereceu no ultimo Natal . :)

E como é que usamos a tag title para colocar aquela legenda bem fixa na imagem acima, vocês perguntam deslumbrados...

Simples! Abaixo o código HTML e respectivo estilo CSS com algumas explicações:

/* A parte HTML */
<div class='captionimg' title='Judge Anderson by MsV'>
<img src="https://lh4.googleusercontent.com/-84LQJFHKRRg/U8ROIinpj1I/AAAAAAAAAyY/1wmHnMV0PTg/s550/22127.jpg" border="0" />
</div>
/* A parte em CSS com os estilos */
.captionimg { /* A class que envolve a imagem e onde colocamos o title */
padding: 0;
width: 550px; /* Largura DEVE igual à da imagem */
position: relative; /* Esta posição DEVE ficar relativa para que funcione a posição da legenda na imagem */
}
.captionimg img {
display: block;
padding: 0;
border: 0;
}
.captionimg::before {
content: attr(title); /* Aqui é onde vamos buscar o conteúdo da tag title */
position: absolute; /* Colocamos posição absoluta para se sobrepor à imagem com z-index, top, left e right. Se desejarmos que a legenda fique na parte de baixo da imagem, substituir top por bottom. */
background: #EAF200; /* Cor do fundo */
background: rgba(0, 0, 0, 0.3); /* Cor do fundo em RGBA */
color: #FFFF00; /* Cor do texto */
font-size: 15px; /* Tamanho do texto */
padding: 10px; /* Espaço entre texto e margens */
right: 0; 
top: 0;
left: 0;
text-align: center; /* Para centrar o texto */
z-index: 1;
text-shadow: 1px 1px 1px #000, -1px 1px 1px #000; /* Sombreado do texto */
}

Deu para perceber? Espero que sim mas alguma dúvida, podem deixar nos comentários. :D

Agora para o segundo exemplo de como utilizar a tag title como referência para os estilos em CSS.

Primeiro, alguns exemplos:

Um texto qualquer sem nada de especial

Exemplo de div com tag title : Um


...Texto normal sem divs ou titles...

Exemplo de div com tag title : Dois

Como podem verificar, onde existe tag title também existem estilos diferentes. Poderia ter colocado algo menos colorido mas quis chamar a atenção mesmo. =D

E não, não vou falar do estilo da div que envolve os exemplos. x-P

Abaixo, o código HTML e respectivo estilo CSS:


/* A parte HTML */
<div class="exemplo2">Um texto qualquer sem nada de especial 
 
<div title='exemplo1'>Exemplo de div com tag title : Um</div> 
 
...Texto normal sem divs ou titles... 
 
<div title='exemplo2'>Exemplo de div com tag title : Dois</div> 
</div>
/* A parte em CSS com os estilos */
[title~="exemplo1"]{ /* CSS que capta a tag title e selecciona o elemento através do conteúdo */
    background: yellow;
    display: inline-block;
    border: 4px double red;
    border-radius: 10px;
    padding: 3px 8px;
    box-shadow: 3px 5px 5px #000;
}
[title~="exemplo2"]{ /* CSS que capta a tag title e selecciona o elemento através do conteúdo */
    background: lime;
    display: inline-block;
    border: 4px ridge grey;
    border-radius: 8px;
    padding: 5px 10px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

Atenção que devemos escrever o conteúdo da tag title exactamente da mesma maneira em ambos os lugares. E para que não exista conflitos entre elementos presentes na pagina, devemos utilizar um nome único em cada elemento para este efeito.

E tenham em conta que para que estes truques funcionem em alguns navegadores, necessitamos de incluir alguns estilos exclusivos a cada navegador. Claro que no caso de navegadores do tempo dos dinossauros... aí a solução só vai com javascript.

Mas... E no caso de imagens? Ou links?

O principio é o mesmo. No meu caso descobri este truque quando necessitei de corrigir imagens em falta nuns links aos quais não tinha acesso directo, e somente podia aceder ao elemento através da tag title exactamente porque nos diversos links presentes cada um deles tinha um title único para cada um deles.

Alguém adivinha a que me refiro? Qual o elemento presente neste blogue e nesta data (15 de Julho, 2014) tem imagens em falta nos respectivos links? ;D

E então? Acham que estas duas dicas podem ser de utilidade para vocês?

Até Breve. :-F

Este Artigo foi útil?
Então se quiser, pode pagar-me um café. ;)

Escolhe com Sabedoria:

Deixa o teu comentário no Formulário Incorporado (NOTA: As respostas directas aos comentários só são possíveis utilizando este Formulário.) , ou no Antigo Formulário em uma nova janela, ou então no Formulário em Pop Up .

LER AS REGRAS ANTES DE COMENTAR! MOSTRAR EMOTICONS
Ler Antes de Comentar ◊  As Regras dos Comentários:
  • O comentário precisa ter relação com o assunto!
  • O comentário que deixares é da tua inteira Responsabilidade!
  • Comentários anónimos São permitidos,MAS:

    • Por favor, evita comentar em MAIÚSCULAS .
    • Por favor, não faças Spam.
    • Por favor, não utilizes termos obscenos ou ofensivos.
    • Comentários considerados Spam ou ofensivos serão apagados.
◊  Para deixares a URL do teu blogue, comenta com OpenID, ou com a opção NOME/URL.
◊  Podes usar algumas tags HTML como:
  • @<strong>Nome</strong> para mencionar a quem se responde o comentário.
  • <em>Fulano disse:<i>Texto Citado</i></em> para colocar uma Citação.
  • Para inserir um link ou um vídeo do YouTube, basta só escrever o endereço URL como texto normal.
  • <i>Texto em Itálico</i>
  • <b>Texto em Negrito</b>
    • HTML EXTRA:
    • [im]URL DA IMAGEM[/im] para colocar uma imagem.
    • [ma]Texto rolando[/ma] para colocar texto rolando.
    • [si="2"]Texto com tamanho determinado[/si] Altera o numero para determinar o tamanho da letra.
    • [co="red"]Texto em cor[/co] Altera a cor do texto.
    • [ce]Texto centrado[/ce] centraliza o texto.
    • [ma+]Texto rolando para a direita[/ma+]
    • [box]"encaixotar" o texto[/box]
    • [mark]Texto Marcado[/mark]
    • [card="blue"]Texto com fundo[/card] Altera a cor de fundo do comentário.
    • [im#]URL DA IMAGEM[/im] para colocar uma imagem que ocupe TODA a largura.
    • [hi="yellow"]Texto Destacado[/hi]
  • ATENÇÃO: Comentários com imagens ou vídeos com conteúdo ofensivo ou inadequado serão REMOVIDOS, SEM EXCEPÇÃO!!!
FECHAR
NOTA: os códigos dos emoticons devem ser inseridos separados das restantes palavras ou pontuação. OCULTAR EMOTICONS

0 comentários :

Enviar um comentário