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.

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 ):

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:

ver código

imprimir?

01	/* A parte HTML */

02	<div class='captionimg' title='Judge Anderson by MsV'>

03	<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZ-7j9a0xru1GQgk8TO7b8lAQ0uB-c8bkg7uteuGVayS2BC4iYS10jBlR7qiZ5X5s-E6FKTp42cbxWgzSSysfRpeZxVLj_h2djvvFdy4qATTIIHvdm9kbZLnD1vXrCIZcTWiR4Y-p5Fw/s550/22127.jpg" border="0" />

04

</div>

05	/* A parte em CSS com os estilos */

06	.captionimg { /* A class que envolve a imagem e onde colocamos o title */

07	padding: 0;

08	width: 550px; /* Largura DEVE igual à da imagem */

09	position: relative; /* Esta posição DEVE ficar relativa para que funcione a posição da legenda na imagem */

10

}

11	.captionimg img {

12	display: block;

13	padding: 0;

14	border: 0;

15

}

16	.captionimg::before {

17	content: attr(title); /* Aqui é onde vamos buscar o conteúdo da tag title */

18	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. */

19	background: #EAF200; /* Cor do fundo */

20	background: rgba(0, 0, 0, 0.3); /* Cor do fundo em RGBA */

21	color: #FFFF00; /* Cor do texto */

22	font-size: 15px; /* Tamanho do texto */

23	padding: 10px; /* Espaço entre texto e margens */

24

right: 0;

25

top: 0;

26

left: 0;

27	text-align: center; /* Para centrar o texto */

28	z-index: 1;

29	text-shadow: 1px 1px 1px #000, -1px 1px 1px #000; /* Sombreado do texto */

30

}

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

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.

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

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

ver código

imprimir?

01	/* A parte HTML */

02	<div class="exemplo2">Um texto qualquer sem nada de especial

03

04	<div title='exemplo1'>Exemplo de div com tag title : Um</div>

05

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

07

08	<div title='exemplo2'>Exemplo de div com tag title : Dois</div>

09

</div>

10	/* A parte em CSS com os estilos */

11	[title~="exemplo1"]{ /* CSS que capta a tag title e selecciona o elemento através do conteúdo */

12	background: yellow;

13	display: inline-block;

14	border: 4px double red;

15	border-radius: 10px;

16	padding: 3px 8px;

17	box-shadow: 3px 5px 5px #000;

18

}

19	[title~="exemplo2"]{ /* CSS que capta a tag title e selecciona o elemento através do conteúdo */

20	background: lime;

21	display: inline-block;

22	border: 4px ridge grey;

23	border-radius: 8px;

24	padding: 5px 10px;

25	box-shadow: inset 0 0 15px rgba(0,0,0,0.5);

26

}

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?

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

Até Breve.

Queres ler outro artigo ao calhas?