CSS, XHTML, Web Standards, Tableless, Estatísticas, SEO, Wordpress | marcio misumi » HTML/XHTML

Image Replacement com CSS

Marcio Misumi — Mon, 14 Dec 2009 02:29:09 +0000

Image replacement é uma técnica CSS que pode ser traduzido para “Substituição por imagem”, isto signfica que no documento (X)HTML você irá encontrar o texto, porém visualmente esse texto será substituído por imagem. Essa técnica é muito importante por questão de acessibilidade, isso porque se o texto simplesmente for inserido ao documento utilizando o elemento IMG e alguém utilizar um leitor de tela não conseguirá ler o que está escrito.

Normalmente utilizamos essa técnica para escrever um texto, que utiliza uma fonte que não é de sistema, usando imagem. Vale utilizar o bom senso e não utilizar o image replacement para todos os textos do seu documento.

Essa técnica que vamos aprender consiste em deslocar o texto da área visual do usuário. Vamos utilizar o logo deste blog para exemplificar a técinica de image replacement:

Estrutura HTML:


marcio misumi

Formatação CSS:

h1 {
	display: block;
	text-indent: -500000em;
	background: url(logo.png) 0 0 no-repeat;
	height: 139px;
	width: 345px;
}
h1 a {
	display: block;
	height: 139px;
	width: 345px;
	overflow: hidden;
}

O que faz o texto se deslocar da área visual é a propriedade text-indent com valor negativo. Como background nós utilizamos a imagem que nós queremos que substitua o texto. É importante também definir as dimensões (width e height) da imagem utilzada.

Aqui podemos visualizar o exemplo mostrado anteriormente da técnica de image replacement. Desabilite o CSS ou veja o código fonte para ver o texto.

PNG Transparente no IE6 com background position e repeat

Marcio Misumi — Wed, 23 Sep 2009 01:21:47 +0000

Em outubro de 2008 eu postei um tutorial explicando como corrigir o problema do PNG no Internet Explorer 6.0, porém a solução que eu mostrei não era possível utilizar background position e repeat. A algum tempo encontrei um JavaScript que corrigia este problema, mas antes de publicar um tutorial eu preferi testa-lo em alguns sites para ter certeza que funcionava legal.

Como aplicar a correção para o PNG Transparente no IE6

Primeiro você deve salvar o arquivo iepngfix.htc. Procure deixar este arquivo no mesmo diretório do arquivo CSS.

No arquivo iepngfix.htc existe uma variável “IEPNGFix.blankImg” que referencia uma imagem. O caminho (path) desta imagem é em relação ao arquivo HTML. Esta imagem pode ser salva como blank.gif, deve ser transparente e ter as dimensões de 1×1.

...
IEPNGFix.blankImg = 'images/bground/blank.gif';
...

Para utilizar PNG transparente utilizando a tag img diretamente no HTML é necessário utilizar o seguinte código CSS:

img {
	behavior: url("css/iepngfix.htc");
}

Qualquer seletor/propriedade que tiver imagem PNG transparente deverá ser adicionado no código acima, separado por vírgula.

img, div.conteudo, h1, h2, input {
	behavior: url("css/iepngfix.htc");
}

OBS: O caminho (path) para o arquivo iepngfix.htc é em relação ao arquivo HTML.

Agora para que o background position e repeat funcione, nós precisamos do arquivo iepngfix.js. Vamos fazer a chamada deste arquivo dentro da tag do html utilizando a condicional para que somente o IE6 faça a requisição deste arquivo, evitando assim que todos os navegadores façam o download deste arquivo desnecessariamente.

...



...

Para links com o fundo transparente, no primeiro tutorial que postei, mostrava que era necessário definir no css os links com posição relativa. Isso não é mais necessário porque este JavaScript que nós utilizamos corrige este problema.

Problema encontrado

Depois de fazer diversos testes antes de criar esse tutorial, eu descobri um problema com esse JavaScript. Se por acaso você tiver uma funcionalidade em teu site que seja necessário colocar display: none; em algum elemento e depois ao clicar em algum botão este elemento passa para display: block; e justamente ele tiver um PNG transparente, essa imagem não receberá o filtro que deixa transparente no IE6.

Exemplos das soluções demonstradas neste tutorial

OBS: Não esqueçam de visualizarem os exemplos acima no IE6.

Esta solução foi desenvolvida por http://www.twinhelix.com

Deixem seus comentários.
Abraço.

Tag ^{com underline no IE}

Marcio Misumi — Tue, 28 Apr 2009 03:08:40 +0000

A tag ^{(superscrito) ao ser utilizada com underline não funciona corretamente no Internet Explorer. É possível corrigir este problema com CSS.}

Antes de apresentar a solução vamos visualizar o problema gerado no Internet Explorer:

" />

Para solucionar este problema do underline no Internet Explorer nós precisamos utilizar o seguinte CSS:

a sup {
    border-bottom: 1px solid #000;
    padding-bottom: 3px;
    font-size: 93%;
    text-decoration: none;
}
Marcio Misumi^®

A propriedade “font-size” pode ser alterada conforme a sua necessidade. Se o valor dessa propriedade for alterada, provavelmente será necessário modificar o valor da propriedade “padding-bottom”. A cor da propriedade border-bottom pode ser alterada também conforme a necessidade.

Uma sugestão é fazer esta correção utilizando hack para o Internet Explorer.

Espero ter ajudado.
Qualquer dúvida deixem comentários.

PNG Transparente no IE6

Marcio Misumi — Mon, 13 Oct 2008 02:26:39 +0000

A seguir vamos aprender como utilizar png transparente utilizando a tag img diretamente no HTML ou inserindo em background no CSS.

Usar png transparente na tag img diretamente no HTML

Primeiro você deve salvar o arquivo png.htc. Procure deixar este arquivo no mesmo diretório do arquivo CSS.

No arquivo png.htc existe uma variável “blankSrc” que referencia uma imagem. O caminho (path) desta imagem é em relação ao arquivo HTML. Esta imagem pode ser salva como blank.gif, deve ser transparente e ter as dimensões de 1×1.

...
var blankSrc = "images/background/blank.gif";
...

Agora você precisa colocar em seu código CSS:

img {
	behavior: url("css/png.htc");
}

OBS: O caminho (path) para a URL também é em relação ao arquivo HTML.

Usar png transparente como background no CSS

Para usar png transparente como background no CSS é necessário utilizar o seguinte código:

div#conteudo {
      height: 420px;
      width: 500px;
      background-image: url(images/imagem-transparente.png) !important;
      background-image: none;
      filter: none !important;
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=crop src=’images/imagem-transparente.png’);
}

OBS: No filtro, o caminho (path) para a URL da imagem é em relação ao arquivo HTML.

A propriedade sizingMethod pode ser crop, scale ou image. O mais usado é o scale, pois ele não "cropa" (corta) a imagem.

crop – Corta a imagem para adaptar as dimensões do objeto;
scale – Estica ou encolhe a imagem para preencher as bordas do objeto;
image – Default. Aumenta ou diminui a borda do objeto para ajustar as dimensões da imagem.

Links com fundo transparente

Ao utilizar imagem png como background, o Internet Explorer 6.0 passa a interpretar os links como uma camada abaixo do background, de forma que o mouse não os alcance. Para solucionar este problema e tornar clicáveis os links é necessário definí-los no CSS com posição relativa.

div#conteudo a {
	position: relative;
}

Diferenças entre e , e

Marcio Misumi — Thu, 21 Aug 2008 16:37:24 +0000

Fazendo um estudo sobre semântica em HTML encontrei um artigo falando sobre as diferenças entre e , e . Então resolvi escrever sobre esse assunto, pois acredito que muitas pessoas ainda tem dúvidas.

As tags (italic) e (bold) não são consideradas semânticas, por isso ouve-se comentar que cairam em desuso. Estas tags geram um efeito unicamente visual.Já em um código semântico, onde se pretende dar ênfase a algo, devemos tecnicamente usar a tag em vez de e a tag (emphasis) em vez de .

Alguns User Agents como buscadores e leitores de tela dão um certo valor de ênfase para palavras marcadas com a tag . A tag também tem esse efeito, mas com um valor semântico mais forte. Em casos que você quiser apenas uma pequena variação visual com absolutamente nenhum efeito semântico para os User Agents, considere usar algo feito em CSS.

Um ótimo exemplo são Os leitores de tela, que dão uma entonação diferente a determinada palavra ao encontrarem uma destas tags semânticas.

Então lembre-se, bold e italic assentam numa lógica de ênfase visual, ao passo que strong e emphasis sugerem uma ênfase semântica. Visualmente, e , e e têm exatamente o mesmo aspecto.

Favicon

Marcio Misumi — Thu, 19 Jun 2008 00:49:56 +0000

Favicon é uma sigla que vem do termo Favorite Icon, palavras em inglês que podem ser traduzidas como Ícone para Favoritos. Trata-se de pequenas imagens no formato *.ico, com dimensões de 16×16 pixels. Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem (ícone). Em outros navegadores como Firefox, Opera e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço (ao lado esquerdo da URL).

Favicon no Firefox, ao lado da URL.

No Internet Explorer 6.0, o favicon não é mostrado ao lado da URL. Você só consegue visualizá-lo na lista de favoritos.

Normalmente os favicons são ícones simplificados do logotipo da marca que representam. Quando o site não tem um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Criar um arquivo *.ico

Para criar um favicon no photoshop, você irá precisar de um plug-in que possibilite salvar arquivos com extensão *.ico. Este arquivo ICOFormat.8bi deve ser colocado no seguinte diretório:

Photoshop 7.0
C:\Arquivos de programas\Adobe\Photoshop 7.0\Required\ICOFormat.8bi

Photoshop CS
C:\Arquivos de programas\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats\ICOFormat.8bi

Photoshop CS3
C:\Arquivos de programas\Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats\ICOFormat.8bi

Existem também algumas ferramentas online que fazem a conversão de gif, jpg, png, e bmp para o formato desejado *.ico.
www.html-kit.com/favicon
tools.dynamicdrive.com/favicon

Para colocar um favicon no seu site você deve inserir no HTML, dentro das tags , o código a seguir:

A segunda tag mostrada acima é para favicons animados (só é renderizado no Firefox). Por isso, neste caso você pode colocar as duas tags. Assim se o usuário estiver usando um outro navegador que não seja o Firefox, o favicon tradicional será mostrado.

CSS, XHTML, Web Standards, Tableless, Estatísticas, SEO, Wordpress | marcio misumi » HTML/XHTML

Image Replacement com CSS

marcio misumi

PNG Transparente no IE6 com background position e repeat

Tag com underline no IE

PNG Transparente no IE6

Diferenças entre e , e

Favicon

Tag ^{com underline no IE}