Início › css

css

HTML e CSS para e-mails

A produção de html/css para e-mails não é nada trivial e a situação é ainda pior para quem já começou na vida de desenvolvimento para web mexendo com tableless. A tag <style>, por exemplo, não é suportada pelo gmail nem no <head> nem no <body>. Daí já dá pra perceber que o jeito é utilizar todos os estilos inline (usando o atributo "style" dentro de cada tag html). Continuar lendo...

Postado por Elia em 06/08/2009 - 15:50 -
Categoria:
Tags:

Estudo do layout gera CSS enxuto e bem feito

Muitas são as formas de começar o desenvolvimento do CSS de um site. Alguns vão fazendo junto com o (X)HTML e outros só depois dele pronto. Este artigo é um complemento à essas abordagens. Aqui você vai entender que é possível adiantar boa parte do CSS antes mesmo do HTML estar pronto.

Com os layouts em mãos você deve identificar tudo o que há de igual. Não tenha medo de perder muito tempo nesta parte, porque perdendo muito tempo aqui você economizará codificando. Existe sempre uma box com títulos na mesma fonte, com mesmo bullet? Os títulos das páginas são iguais? Qual é a fonte predominante do site? Bons designers pensam em layouts estruturados e cabe a você identificar esta estrutura, sendo ideal contar com a colaboração do próprio designer.

Os métodos e os passos podem variar, mas um caminho geral é o seguinte: Continuar lendo...

Postado por Elia em 18/06/2009 - 06:00 -
Categoria:
Tags:

PNG no IE 6 - Entenda como o problema é resolvido

ATENÇÃO: Para verificar a renderização do png no IE 6 use o próprio Internet Explorer 6 e não o Multiple IE (que por sinal não recomendo pra mais ninguém). Se não tiver acesso a um computador com esse browser é possível testar através do uso de uma máquina virtual.

O formato de arquivos PNG surgiu para substituir o limitado formato GIF, diferindo deste no suporte a canal alfa, no maior número de cores e na alta compressão possível. Por outro lado o Internet Explorer 6, navegador xing-ling ainda muito usado, não dá suporte nativo à transparência do PNG, mas é possível contornar esse problema com uma propriedade CSS.

Não vou publicar nenhuma solução aqui, mas explicar como todas elas funcionam (sim, elas funcionam da mesma forma). Para que a imagem fique transparente você deve sumir com a imagem em si e exibi-la somente com a propriedade filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<caminho_da_imagem>', sizingMethod='image');. Continuar lendo...

Postado por Elia em 18/12/2008 - 10:33 -
Categoria:
Tags:

Dica CSS rápida para centralizar horizontalmente o layout

Post para alavancar minhas visitas. Sei que vai ter um montão de gente batendo aqui procurando por isso (liga risada maléfica)Muahuahua(desliga risada maléfica).

Uma das dúvidas mais populares de quem está começando a mexer com html e css é como centralizar seu layout. Existem muitas formas de fazer isso - algumas boas e outras nem tanto.

Começo pela melhor (a que eu uso e passo para quem trabalha comigo):

Width 100% no HTML body + margin 0 auto e clear both na div que envolve todo mundo

fica assim:

HTML, body {
width: 100%;
}
div#geral {
clear: both;
margin: 0 auto;
width: 775px; /* Não esqueça desse tamanho aqui */
}

A largura obviamente varia conforme a sua necessidade.

outra boa também é:

text-align no body e na div que envolve todo mundo

o código:

body {
text-align: center; /* Isso aqui é pro IE*/
}
div#geral {
margin: 0 auto;
text-align: left;
}

Uma que não recomendo usar, mas que tem um conceito útil para outras coisas é: Continuar lendo...

Postado por Elia em 10/11/2008 - 23:15 -
Categoria:
Tags: