CSS Replace

Olá a todos, hoje veremos o que é e como utilizar o CSS Replace, uma técnica muito utilizada no desenvolvimento de sites utilizando botões que necessitam de imagens, mantendo a relevância do botão em forma de texto.

O que é CSS Replace

É uma técnica que consiste em substituir, visualmente, um texto por uma imagem, assim podemos desenvolver botões com imagens e textos com fontes especiais, sem afetar a relevância dos mesmos em forma de textos.

Como Utilizar

A utilização do CSS Replace não possui nenhum segredo, é só entendermos a lógica por traz de seu uso que é muito simples: inserir a imagem como background e esconder, visualmente, o texto. Como faremos isso? Veja a estrutura HTML e o CSS abaixo.

                    	
Arquivo .Doc
                    

                    	.doc{text-indent:-9000px; height:32px; width:32px; overflow:hidden; background:url(icone_doc.png) top left no-repeat;}
                    

A chave de tudo está nas propriedades text-indent e overflow, a primeira indenta o texto no valor declarado, e a segunda quando setada como hidden, esconde o conteúdo que estiver além da altura e largura declarada para o elemento, assim o texto é empurrado para a região que será escondida, deixando somente a imagem inserida como background visível.

Importante

Existem alguns macetes para que o CSS Replace seja perfeitamente implementado, veja a baixo dois deles:

• - Elementos inline necessitam, obrigatoriamente, a utilização da propriedade display setada como block.
• - No Internet Explorer 7 e inferiores é necessário em elementos input utilizar o codigo abaixo.

                    	.doc{font-size:0; line-height:100%;}
                    

Para fazer o download do exemplo, clique aqui.

Espero que tenham gostado do tutorial. Façam bom uso. Abraços!