Primeiros Passos

FAQ Web Design #2: Criando Tabelas e Sombras em Objetos

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Se tiver outras dúvidas, confira as partes anteriores das “perguntas feitas com frequência” (FAQ) sobre web design. O intuito dessa série é ajudar você usuário médio que encontra dificuldade no dia-a-dia de manutenções e aperfeiçoamento em blogs, especialmente voltado ao WordPress (embora a maior parte das dicas sejam de uso geral).

Na parte 1, vimos como abrir links em nova janela do navegador e omo parar e reiniciar uma lista numerada de HTML.

E hoje, vamos aprender a criar tabelas em HTML e criar sombras via CSS em elementos.

3) Como criar tabelas em HTML

Isso é uma lição básica, em qualquer curso mínimamente decente de web design você vai aprender a criar tabelas sem precisar de softwares WYSIWYG. Mas como muita gente não fez curso, é interessante demonstrar.

A tabela tem uma estrutura bem simples, também baseada em marcações abertas e fechadas por sinais menor < e maior >.

A marcação table abre a tabela, e /table, fecha. Entre elas, cada marcação tr cria uma nova linha (tr = table row); entre a marcação das linhas, você pode criar campos (células), com td (de table data). É bem fácil.

No exemplo seguinte foi ainda usado um atributo border, para dar à tabela uma borda de 1px de espessura (clique em Result para ver a tabela resultante da marcação).

Outros atributos podem ser usados para controlar o espaço entre as bordas e o espaçamento interno da tabela: cellpadding e cellspacing, ambos também controlados por um valor em pixels.

Veja a mesma tabela anterior, agora com cellpadding de 5 pixels e cellspacing de zero.

Há muitos atributos, alguns quase em total desuso que não vou citar aqui, mas entre os mais úteis estão a criação de table header (linha de cabeçalho da tabela, o conteúdo é destacado pelo navegador com negrito e texto centralizado). Nessa coluna de cabeçalho, use th em vez de td.

Algumas vezes sua tabela pode ter uma estrutura diferente, com mais colunas numa linha que outra. Nesse caso, a marcação colspan indica a largura em relação às colunas ou linhas. Da mesma forma, se for preciso que uma linha tenha altura de mais de uma coluna, há a marcação rowspan.

Veja o exemplo: primeiro, uma tabela com coluna de dois “módulos” de largura numa linha, e largura simples nas colunas abaixo, na segunda linha:

Ou seja: o colspan 2 na coluna do Telefone indica que ele deve ter dois “módulos” de largura, alcançando a largura das colunas com os números.

E aqui, uma coluna com o equivalente rowspan para linhas. Repare que o cabeçalho th é usado na primeira coluna de cada linha.

Definitivamente não é difícil, basta ter atenção na marcação para não esquecer de fechar nenhuma linha ou coluna. Tabelas podem ser depois estilizadas com CSS como background, border, etc.

4) Como criar sombras em textos, caixas e imagens

São todas simples, feitas em CSS, mas usam propriedades diferentes: para imagens e divs, use box-shadow; para texto, use text-shadow. Vamos ver o básico de cada uma.

box-shadow

A estrutura é:

box-shadow: sombra-h sombra-v desfoque tamanho cor inset;
  • sombra-h é o valor de deslocamento da sombra horizontalmente, em relação à sua fonte;
  • sombra-v, o deslocamento vertical;
  • desfoque é o valor de “blur” aplicado. Quanto maior, mais borrada a sombra. Zero resulta em uma sombra “dura”, com o mesmo formato do objeto fonte.
  • tamanho é um valor opcional. Se aumentar, a sombra fica maior que o objeto fonte.
  • cor, para escolher a cor da sombra, seja em valor hexadecimal, nominal, etc.
  • inset é outro valor opcional, que se usado, faz a sombra ser interna (tipo o Sombra Interna, aquele estilo de camada de Photoshop, pra quem sabe do que estou falando).

Veja um exemplo aplicado numa div, usando box-shadow: 5px 5px 10px #999, ou seja: 5px de deslocamento horizontal, 5px vertical, 10px de desfoque, não usa “tamanho”, cor cinza (#999) e sem inset.

O box-shadow pode ser aplicado também em imagens, funcionando bem em todos os navegadores modernos (com exceção do atributo inset, que não funciona diretamente em imagens, a não ser com uma outra gambiarra que não vale a pena discutir agora). Veja o exemplo:

O box-shadow pode ser usado ainda em várias direções, bastando separar cada atribuição por vírgula. Por exemplo: para criar sombras na mesma imagem anterior, a regra…

box-shadow: 2px 2px 5px #999, -2px -2px 5px #000;

…diz isso: 2px de deslocamento horizontal e vertical, com 5px de desfoque e cor #999, e 2px de deslocamento no sentido contrário (o sinal negativo) na horizontal e vertical, desfoque 5px e cor preta #000.

Resulta nisso:

text-shadow

Bem parecido. Estrutura:

text-shadow: sombra-h sombra-v desfoque cor;

O exemplo usa text-shadow:2px 2px 5px #cc0000, ou seja: deslocamentos de 2px (horizontal e vertical), 5px de desfoque, e um tom de vermelho como cor.

Com um bom uso dá pra criar efeitos interessantes como chanfrado e múltiplas camadas de sombra. É só fazer várias sombras separadas por vírgula, como mostrado antes no box-shadow.

Veja um modelo usando…

text-shadow:1px 1px 0 #fff, 2px 2px 0 #999, 3px 3px 0 #fff, 4px 4px 0 #000;

O que acontece aqui: primeira sombra branca (#fff) com deslocamento de 1px (vertical e horizontal), segunda sombra cinza bem escuro (#999) com deslocamento de 2px, terceira sombra branca de novo com deslocamento de 3px, e a última sombra preta (#000) com deslocamento de 4px. Isso dá o efeito de sobreposição de sombras.

Conhecendo a estrutura básica, você pode criar inúmeros outros efeitos com cores, opacidades e espessuras de sombra.

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Deixe um Comentário

Pin