Workshop de Css

Manuais e recursos para desenvolvimento webwww.criarweb.com

Workshop de CSS

Autores do manual

Este manual foi criado pelos seguintes colaboradores de Criarweb.com:

Miguel Angel Alvarez - Tradução de JML (36 capítulos)

Carlos Cuenca DíazConsultoria Informática (1 capítulo)

Federico Elgartehttp://www.cssboulevar.com.ar/ (5 capítulos)

Diego Pinillahttp://www.mercadoprofesional.com (1 capítulo)

Lim Chee Aunhttp://cheeaun.phoenity.com/ (2 capítulos)

Javier Chaurehttp://www.xski.net (2 capítulos)

Héctor A. Pinto F (1 capítulo)

Pol Salvathttp://www.mistrucos.net (1 capítulo)

Anderson Faro (1 capítulo)

Workshop de CSS: http://www.criarweb.com/workshop_css/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

1

http://www.desarrolloweb.com/

http://www.criarweb.com/workshop_css/

http://www.mistrucos.net/

http://www.xski.net/

http://cheeaun.phoenity.com/

http://www.mercadoprofesional.com/

http://www.cssboulevar.com.ar/


Aplicação avançada de estilo aos linksNeste artigo vamos ver como poderíamos criar uma barra de navegação bastante dinâmica utilizando unicamente as Folhas de Estilo em Cascata. No exemplo vamos construir uma barra de navegação que contem links de várias cores que mudam de tonalidade ao passar o mouse por cima.

Podemos ver o resultado de nossa barra clicando este link, para ter uma idéia mais exata do que queremos conseguir.

Como colocar estilo aos links

Como vimos nos capítulos anteriores de nosso manual de CSS, mas o repetiremos aquí. Define-se o estilo dos links atribuindo sua aparência em seus distintos estados:

• Link não visitado. Define-se com o atributo link. • Link visitado. Define-se com o atributo visited. • Link ativo (quando se está clicando). Define-se com active. • Link com o mouse em cima. Define-se com hover.

Esta definição se realiza no cabeçalho da página, entre as etiquetas <STYLE> e </STYLE>, e é global a toda a página.

Um exemplo disto pode ser visto nesta declaração de estilos:

<STYLE type="text/css"> A:link {text-decoration:none;color:#0000cc;} A:visited {text-decoration:none;color:#ffcc33;} A:active {text-decoration:none;color:#ff0000;} A:hover {text-decoration:underline;color:#999999;} </STYLE>

Como dar estilo a um link em concreto

Se queremos ressaltar nossa barra de navegação provavelmente vamos querer colocá-la em uma tabela de nossa página web, com uma cor que contraste um pouco com o fundo. Em um caso como este, será necessário que os links da barra de navegação e os links normais da página tenham cores diferentes, por estarem situados sobre dois tipos de fundos distintos.

É por isso que os links da barra vão ter uma cor diferente das definidas no cabeçalho da página, com os estilos. Isto pode ser conseguido desta maneira:

<a href="#" style="color:#ff0000">Meu link</a>

Definimos a cor de um link de uma maneira, utilizando o atributo style, de modo que este link sempre terá a cor indicada, independentemente de seu estado.


2



http://www.criarweb.com/css/

http://www.criarweb.com/artigos/exemplos/css/tabela.html


É um link amarelo que ficaria muito bem realçado sobre um fundo escuro, como se pode ver no seguinte exemplo de barra de navegação.

Link 1

Outro link

Link 3

Na tabela anterior temos links amarelos em uma web onde os links são azuis por padrão.

Como utilizar as classes ao aplicar estilo aos links

Também vimos nos capítulos anteriorres que o uso de classes pode ser muito útil na hora de definir estilos especiais que podemos aplicar às etiquetas que quisermos. Na hora de trabalhar com os links também podemos aplicar as classes para definir distintos tipos de links, que têm distintos tipos de estilos.

A.classe1:visited {color:#ff0000;} A.classe1:active {color:#ff0000;} A.classe1:link {color:#ff0000} A.classe1:hover {color:#00ff00}

A vantagem ao utilizar as classes com os estilos dos links é que podemos especificar um formato distinto ao link dependendo de seu estado: visitado ou não, ativo ou com o mouse sobre ele.

Se não está claro, ao especificar o estilo com o atributo style do link só podíamos dizer que queremos o link em amarelo, e sempre o teremos em amarelo (seja visitado ou não, ativo, ou estando com o mouse em cima). Com as classes definimos um novo tipo de link ao qual podemos dar distintos formatos dependendo de seu estado.

Outras vantagens de utilizar as classes consistem em que escrevemos somente uma vez os os estilos e que podemos mudar a cor de todos os links da classe ao mudar a declaração.

A partir do que acabamos de aprender podemos criar o exemplo de barra de navegação dinâmica utilizando CSS que havíamos visto ao princípio do capítulo. O código seria o seguinte:

<html> <head> <title>Exemplo CSS para links</title> <style type="text/css"> A:link {color:#0000cc;} A:visited {color:#0000cc;} A:active {color:#0000cc;} A:hover {color:#0000ff;}

A.classe1:visited {color:#ffff00;} A.classe1:active {color:#ffff00;} A.classe1:link {color:#ffff00} A.classe1:hover {color:#00ff00}

A.classe2:visited {font-size:12;color:#ffffff;}


3




A.classe2:active {font-size:12;color:#ffffff;} A.classe2:link {font-size:12;color:#ffffff;} A.classe2:hover {font-size:12;color:#ffff33;}

body {font-family:arial;font-size:11;font-weight:bold} td {font-family:arial;font-size:11;font-weight:bold} </style> </head>

<body> <a href="#">Este link é normal</a> <br> <br> <br> <span style="font-weight:normal;font-size:10"> Os links desta barra são especiais, <br> estão definidos por classes </span> <br> <table width="110" cellspacing="1" cellpadding="2" border="0"> <tr> <td bgcolor="#aa0000"><a href="#" class="clase2">Opções 1</a></td> </tr> <tr> <td bgcolor="red"><a href="#" class="clase1">Link classe1</a></td> </tr> <tr> <td bgcolor="red"><a href="#" class="clase1">Outro de classe1</a></td> </tr> <tr> <td bgcolor="red"><a href="#" class="classe1">Mais links</a></td> </tr> <tr> <td bgcolor="red"><a href="#" class="clase1">Ainda mais</a></td> </tr> </table>

</body> </html>

Pode-se ver a página em funcionamento neste link. Esperamos que este pequeno manual de CSS seja bastante proveitoso para suas criações.

Artigo por Miguel Angel Alvarez - Tradução de JML

Como evitar que um página se imprimaPara isso, temos de usar as folhas de estilo. Tanto se o documento tem uma folha já associada como senão, o que vamos fazer é associar-lhe uma nova folha de estilos. Tal folha conterá um estilo, com o código necessário para ocultar um elemento:

.naover{ visibility:hidden }

Na hora de associar a folha de estilos, se acrescenta um modificador à etiqueta HTML que linka com o arquivo .css que permite especificar para que tipo de meio se aplicará esta folha. Em


4



http://www.criarweb.com/artigos/exemplos/css/tabela.html


nosso caso, se aplica no âmbito da impressão, pelo que se utiliza o atributo media="print".

<link href="nome_folha" rel="stylesheet" type="text/css" media="print">

Uma vez feito isso, basta que toda nossa página esteja dentro de um elemento div, que pertença à classe nãover.

<body> <div class="naover">

-- Conteúdo --

</div> </body>

Ao fazer isto provoca que a página seja visualizada na tela, mas que se pelo contrário se decide imprimir, se aplicará a folha de estilos de impressão, na qual o elemento está posto como não visível, portanto não se imprimirá.

Código Completo:

Vejamos o código íntegro da página web e a folha de estilos associada.

Página HTML

<html> <head> <link href="estilos.css" rel="stylesheet" type="text/css" media="print"> </head> <body> <div class="naover">

… conteúdo da página

</div> </body> </html>

Folha estilos: estilos.css

.naover{ visibility:hidden }

Nota: Esta característica das folhas de estilos funciona com êxito em navegadores IExplorer 6, Netscape 7 e Opera 7. Não provamos em outras versões.

Pode-se ver o exemplo relatado no artigo em uma página a parte.

Artigo por Carlos Cuenca Díaz


5



http://www.criarweb.com/artigos/exemplos/css/naoimprimir/naoimprimir.html


Título para tabelas decoradas com CSSCSS são Folhas de Estilo em Cascata. Muitos de vocês já devem conhecer e suponho que já devem ter utilizado em mais de uma ocasião. Em qualquer caso, tanto para aprender o que são como para consolidar os conhecimentos, poderão acessar ao Manual de CSS de criarweb.com.

Vamos ver um uso das CSS que pode ser muito interessante para fazer tabelas com títulos que tenham um certo estilo. O bom das CSS é que podemos definir o estilo uma vez e se pode utilizar em múltiplos elementos da página. Com tudo isso, vamos tratar neste artigo: a definição de um estilo e a aplicação para fazer distintos tipos de decoração de tabelas.

Podemos ver o resultado final que vamos obter.

Definição dos estilos

No cabeçalho da página colocamos a etiqueta <style> que serve para definir os estilos a utilizar na página. Vamos definir um estilo por padrão para as células (etiqueta <td>) e duas classes, a primeira para as tabelas e a segunda para as células titulares (as que têm cor de fundo).

<style type="text/css"> td { font-family:verdana,arial; font-size:8pt; } .estilotabela{ background-color:ffffff; border-style:solid; border-color:666666; border-width:1px; } .estilocelula{ background-color:ddeeff; color:333333; font-weight:bold; font-size:10pt; } </style>

Os atributos de estilos podem ser conhecidos no manual de CSS. Neste caso, para a classe estilotabela estamos definindo uma cor de fundo, uma borda sólida, uma cor da borda e uma largura da borda, por essa ordem. Para a classe estilocelula estamos definindo uma cor de fundo, uma cor do texto, uma espessura da fonte e um tamanho da fonte.

Utilização dos estilos para obter uma tabela decorada

Vejamos o código da primeira tabela do exemplo.

<table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabela"> <tr><td class="estilocelula">Título de seção</td></tr> <tr><td>Este é um texto que poderia ser a parte debaixo da tabela com o conteúdo


6



http://www.criarweb.com/artigos/exemplos/css/titulo.html



relacionado com este título.</td></tr> </table>

O único que tem de especial é que utiliza as classes que foram definidas previamente. Na etiqueta <table> se utiliza a classe estilotabela e na etiqueta <td> que queremos que seja a titular se utiliza a classe estilocelula. A outra célula terá o estilo definido para todas as células em geral.

A outra tabela teria este código:

<table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabela"> <tr><td class="estilocelula">Título de seção</td></tr> </table> <table width="280" cellpadding="2" cellspacing="2"><tr><td> Este é um texto que poderia ser a parte debaixo da tabela com o conteúdo relacionado com este título. </td></tr></table>

Neste caso utilizamos duas tabelas para fazer o efeito. A tabela de cima tem uma borda e a de baixo não. Para isso, aplicamos a classe definida para a tabela e a célula somente na tabela de cima, assim, a borda definida na declaração de estilos só afeta a tabela de cima.

Podemos ver o resultado em uma página a parte.


Bordas pontilhadas com CSSVeremos agora outra maneira de utilizar as CSS (folhas de estilo cascata) para criar um estilo que podemos utilizar em HTML. É um estilo para realizar as bordas das tabelas com linhas pontilhadas, que aliás é bastante original porém nosso conselho é não abusar muito disso.

O efeito que se busca é o seguinte:

Para conseguir isso, simplesmente temos que utilizar a propriedade de CSS "border-style", atribuindo o valor "dotted", que quer dizer pontilhado em inglês. Ademais, podemos definir outros valores ao estilo de borda pontilhada, como pode ser a cor da borda ou a cor de fundo da tabela.

Para este exercício definimos uma classe que aplicaremos às tabelas ou a outros elementos que desejamos que tenham a borda pontilhada.

Nota: Uma classe é uma declaração de estilo que podemos utilizar em qualquer elemento de uma página. Para isso, inclui-se o atributo class="nome_classe" na etiqueta HTML que desejamos que tenha tal estilo.

<style type="text/css">


7



http://www.criarweb.com/artigos/exemplos/css/titulo.html


.pontilhado{ border-style: dotted; border-width: 1px; border-color: 660033; background-color: cc3366; font-family: verdana, arial; font-size: 10pt; } </style>

Esta classe tem uma série de atributos de estilos definidos. Desde o primeiro até o último são: tipo de borda, largura da borda, cor da borda, cor de fundo, tipo de letra e tamanho da fonte. O atributo que nos interessa é o primeiro, no qual se indica que se deseja um tipo de borda pontilhado.

Para utilizar o estilo temos que atribuir a um elemento de HMTL a classe gerada anteriormente. Para isso, utilizamos o atributo class de HTML. Tal como foi definida a classe pode-se utilizar em qualquer elemento da página web, como uma tabela ou uma célula.

<table class="pontilhado" width=80% align="center"> <tr> <td> <b>Isto é um texto</b> <br> Coloco para ver como fica. Com certeza, vou gostar! E vocês também! </td> </tr> </table>

Neste exemplo, toda a tabela terá um efeito de borda pontilhada. Se colocássemos essa classe unicamente em uma célula, somente essa célula teria a borda pontilhada. É o caso do seguinte exemplo:

<table width=300> <tr> <td class= "pontilhado"><b>Título da tabela</b></td> </tr> <tr> <td>

Aqui poderíamos colocar qualquer coisa. Seria como o corpo da tabela que corresponderia com o titular que teria algum estilo legal.

</td> </tr> </table>

Estes dois exemplos podem ser vistos em uma página à parte que inclui também uma terceira proposta de uso do estilo da borda pontilhada. Clique aqui para ver o exemplo anexado.


8



http://www.criarweb.com/artigos/exemplos/css/exemplo_bordas.html


Não abusar do uso das bordas pontilhadas

As bordas com linhas pontilhadas podem ser muito úteis e vistosas, mas se exageramos em sua utilização pode acontecer do efeito ficar pouco agradável.

A borda pontilhada chama a atenção sobre o elemento que a utiliza, porém provoca uma sensação de instabilidade. Também dá a impressão de que não está terminado ou que não está integrado com o resto do desenho.


Estilos em campo de textoVamos ver uns exemplos sobre como aplicar estilos avançados a campos de texto em páginas web. Referimo-nos a campos de texto dos normais <input type=text> e campos de texto que suportam várias linhas <textarea>.

Com estilos, como já foi visto no manual de CSS, podemos definir o formato de apresentação de qualquer elemento da página. Os campos de texto, que sempre têm uma forma muito específica, também aceitam especificações de estilos para variar sua aparência típica.

Vamos ver vários exemplos para comprovar as possibilidades das folhas de estilos, aplicadas sobre campos de texto e textareas.

<input type="text" name="campotexto0" size="12" style="border-width: 2px; border-style: solid; font-size:8pt; color: #009900; letter-spacing : 3px;">

Este campo de texto se apresentará com uma borda de 2 pixels, um borda sólida, tamanho da letra de 8 pontos, cor da borda e das letras verde um pouco escuro. Também se define um espaçado entre as letras de 3 pixel.

<input type="text" name="campotexto1" size="12" style="background-color:e3e3e3; border: 1px solid #666666; font-size:8pt; color: #000099">

Este campo de texto tem os estilos declarados com uma sintaxe um pouco distinta, já que se agruparam vários estilos relativos a borda em um só atributo. Os estilos com os que se apresentará são: cor de fundo acinzentado, borda de 1 pixel, borda de estilo sólido, cor da borda cinza mais escuro, tamanho do texto de 8 pontos e cor das letras azul.


9





<textarea cols="20" rows="3" name="campotexto2" style="overflow:auto; border: 1px solid #ff6666;"></textarea>

Este campo de texto com várias linhas, também chamado textarea, tem vários estilos, que são parecidos aos que vimos para o anterior campo de texto, com a segurança do atributo overflow, que está definido como auto. O atributo overflow tem relação com as barras de deslocamento que aparecem nos textarea. O valor auto serve para que a barra de deslocamento vertical do campo de texto só apareça em caso de necessidade, ou seja, se o texto do campo supera as linhas que tem reservadas o textarea. Se quisermos que as linhas não sejam vistas nunca, podemos atribuí-la o valor hidden ao atributo overflow. Em relação aos outros estilos deste campo de texto de múltiplas linhas, se definiram 3 valores para o estilo da borde, em um único atributo. Os estilos são borda de um píxel, borda de estilo sólido e borda de cor vermelho pastel.

<textarea cols="20" rows="3" name="campotexto3" readonly style="overflow:auto; border-style:dashed; border-color:555555; border-width: 1px;">

Olá a todos que estão lendo isto. Espero que este exemplo pareça interessante!! Saudações e sorte! Juliana </textarea>

Neste campo textarea, incluímos também um texto com o qual inicializará seu conteúdo. Primeiro, chamamos a atenção sobre o atributo de HTML readonly, que serve para que o campo textarea não seja editável, ou seja, que não possa mudar seu conteúdo. Também com estilos CSS se definiu uma série de valores para a aparência, estes são: mostrar as barras de deslocamento somente quando for solicitado, uma borda do campo pontilhado, uma cor da borda cinza escuro e uma largura da borda de 1 pixel.

Conclusão

Esperamos que com estas indicações vocês possam aprender um pouco mais sobre como modificar o estilo de um campo de texto, para adaptar melhor ao desenho de suas páginas.

Temos que ter em conta que as características de estilos nem sempre estão disponível em todos os navegadores. As mais importantes sim que poderemos vê-las em todos os navegadores que suportem estilos, apesar de que certos valores, como a borda pontilhada, não podem ser visualizados corretamente em navegadores antigos. Ocorre o mesmo com o atributo readonly, que nem sempre esteve disponível em HTML.



10




Montar uma página com CSSVamos realizar um exercício de projeção de uma página web utilizando unicamente folhas de estilo em cascata (CSS), separando completamente o conteúdo do arquivo HTML das definições do aspecto, que serão salvadas em um arquivo .css. Realizaremos o exercício passo a passo, partindo de uma imagem desenhada previamente com um programa de edição gráfica como Photoshop.

Referência: Temos um manual para aprender CSS em CriarWeb.com, onde aliás se explica as primeiras noções e conceitos que existem para conhecer sobre a construção.

Imagens de partida

Podemos ver a imagem que criamos e que vamos tentar construir o mais parecido possível. Não é o objetivo deste manual oferecer as técnicas para realizar esta imagem, embora em outros manuais de CriarWeb.com podemos ver tutoriais para aprender alguns dos truques de desenho utilizados.

Trata-se de um desenho simples, porém, onde se encontram elementos distintos e variados com os quais trabalhar.

Desta imagem extraíamos alguns gráficos, que utilizaremos na hora de construir o desenho. Seria interessante baixa-lo para poder realizar o exercício por sua conta.

Para os impacientes, temos um link à página do resultado que vamos conseguir realizar no final do artigo. Pode ser bom vê-la para ter uma idéia da onde queremos chegar.

Desenvolvimento da página e a folha de estilos

Vamos gerar os arquivos HTML e CSS de uma vez, mas passo a passo, de forma que possamos explicar as etiquetas e estilos que utilizamos para cada parte da página.

Como primeiro passo, no cabeçalho <head> do documento HTML, linkaremos com uma folha de estilos externa.

<head> <title>A web do inverno</title> <link rel="STYLESHEET" type="text/css" href="estilo.css"> </head>

O corpo da página <body>

Na declaração de estilos CSS, para o corpo da página, definimos uma imagem de fundo "fundo.gif", que se repetirá por toda a página em um mosaico. Também se definem as margens e o alinhamento do texto, neste caso centrado, para que o conteúdo da página apareça no centro (isto é necessário para Internet Explorer, o centrado em Mozilla e em outros navegadores se realiza na camada principal com o atributo "margin" definido como "auto").

Ademais, definem-se outros atributos para o corpo da página, que logo herdarão outros elementos, como o tipo de letra ou a cor do texto.


11



http://www.criarweb.com/artigos/exemplos/css/pack-imagenes.zip

http://www.criarweb.com/manuais/

http://www.criarweb.com/artigos/exemplos/css/plantilla.gif

http://www.criarweb.com/artigos/289.php?manual=5




BODY { background : #C0D9D9 url(images/fundo.gif) repeat; font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; color : #666666; margin : 20px 0px 20px 0px; text-align: center; }

A camada conteúdo

Geralmente, utiliza-se uma camada principal, a qual chamamos conteúdo. Dentro desta camada se colocam todos os elementos que a página vai ter.

<div id="conteudo">

</div>

Nesta camada definimos o alinhamento do texto à esquerda (porque no corpo havíamos centralizado o texto, para que Internet Explorer centralize a camada conteúdo e desejamos que o alinhamento padrão seja à esquerda). Também definimos uma largura de 700px, uma cor de fundo branco e a margem, com o atributo "margin", o definimos como "auto", para que Mozilla e outros navegadores centralizem a camada.

#conteudo{ text-align: left; width: 700px; background-color : #ffffff; margin: auto; }

Aliás, deixamos deliberadamente a borda da camada, que havíamos definido no desenho original. Poderíamos ter definido o atributo "border", mas isso nos repercute negativamente na montagem em Explorer. Veremos mais adiante como colocá-lo para que seja visto corretamente em todos os navegadores.

Este exercício será visto em vários passos. No bloco seguinte mostraremos como se monta o cabeçalho e a barra de navegação.


Montar uma página com CSS IIContinuamos o exercício prático para realizar a construção de uma página passo a passo com camadas e folhas de estilo em cascata. Pode-se ver o artigo anterior desta série em Montar uma página com CSS.

O cabeçalho da página

Vamos colocar a imagem da parte de cima da página em um único arquivo gráfico. É o mais cômodo para este desenho, pois o cabeçalho não tem outro motivo a não ser decoração.

<div id="cabecera"><img src="images/cabeçalho.jpg" width="700" height="106" alt="A Web do Inverno" border="0"></div>


12



http://criarweb.com/artigos/333.php?manual=5



Vemos que é uma simples imagem, mas atenção que temos que colocar o </div> em seguida de <img> sem nenhum espaço ou salto de linha, porque senão, Internet Explorer, nos introduzirá uma pequena margem debaixo da imagem, que queremos evitar.

Os atributos de estilo definidos para o cabeçalho são as dimensões da camada, que queremos que sejam as mesmas que as da imagem. Embora neste caso, poderíamos ter poupado definir estes valores porque são os que se tomaria por padrão.

#cabecalho{ height : 106px; width: 700px; }

A barra de navegação

Vamos com a camada utilizada para definir a barra de navegação horizontal que há debaixo do cabeçalho.

<div id="navegador"> <a href="#" class="linknav">Portal</a> | <a href="#" class="linknav">Inverno</a> | <a href="#" class="linknav">Dezembro a março</a> | <a href="#" class="linknav">A chaminé</a> | <a href="#" class="linknav">Esportes de inverno</a> | <a href="#" class="linknav">Contato</a> </div>

Como se pode ver, simplesmente definimos uma série de links dentro de uma camada. Há que observar que ademais os links têm uma classe, chamada "linknav", que utilizaremos para dar um estilo específico a estes links, independente do definido por padrão na página.

Ao que diz respeito à camada, define-se uma cor e uma imagem de fundo, umas margens internas (atributo padding) e uma borda, tanto para a parte de cima da camada como a de baixo.

#navegador{ background : #F5F4C3 url(images/fundonav.gif); padding : 3px 10px 5px 10px; border-top : 1px solid #cccccc; border-bottom : 1px solid #cccccc; }

Para os estilos dos links utilizamos uma classe. Para definir os estilos de cada um dos estados dos links (visitados, ativos, não visitados, etc), utilizam-se as pseudo-classes VISITED, ACTIVE, FOCUS, LINK E HOVER. Simplesmente definimos a cor dos links, a mesma para todas as pseudo-classes, menos para HOVER, que tem uma cor distinta. HOVER é o estado do link quando o ponteiro mouse está situado em cima. Neste caso, quando o mouse está em cima, mudará de cor.

A.linknav, A.linknav:VISITED, A.linknav:ACTIVE, A.linknav:FOCUS, A.linknav:LINK{ color: #494E6B; } A.linknav:HOVER{ color: #3F7DE3; }


13




Podemos ver como fica o exercício realizado até o momento.


Montar uma página com CSS IIIEste exercício trata de montar uma página utilizando camadas e css. A primeira parte pode ser vista em: Montar uma página con CSS.

O corpo da página

A parte da página onde colocamos a informação principal. Criaremos uma camada independente para o corpo e colocaremos dentro o título, o texto e outros elementos que quisermos situar. Os elementos os introduzimos com as etiquetas HTML que deveriam ter em uma página básica. Logo, com CSS definiremos o estilo para o corpo e cada uma das etiquetas que colocamos dentro.

<div id="corpo"> <h1>Título da página</h1> <p> Neste artigo vamos conhecer a construção de páginas utilizando Folhas de estilos em cascata (CSS). Veremos como realizar este tipo de construção, junto com algumas vantagens e inconvenientes. Para muitos será ainda um campo para explorar. Embora não entremos em grandes detalhes, vamos tentar tornar conhecido a construção com CSS para cobrir qualquer possível defasagem por parte do leitor. Nos próximos capítulos ampliaremos a informação e ofereceremos tutoriais mais práticos. </p> <p> Como foi possível aprender no Manual de CSS, as folhas de estilo em cascata ajudam a separar o conteúdo da forma, ou seja... </p> <div id="navabaixo"> <a href="#">Voltar</a> | <a href="#">Portal</a> | <a href="#">Mapa do site</a> </div> </div> Vemos que o corpo tem um título, vários parágrafos e um div, incluído dentro do próprio corpo, com uma segunda barra de links que facilitam a navegação para as pessoas que chegarem ao final do scroll vertical da página.

Os estilos do corpo definem a largura, margem, margem interna, e uma cor de fundo. Ademais, define-se o atributo "float:left" para fazer com que o corpo "flutue" à esquerda. O resultado é que a camada do corpo se coloque à esquerda e o conteúdo escrito a se situe a seguir, rodeando a esta camada, à direita. (O efeito é o mesmo que se atribuímos em HTML o atributo align=left em um imagem.)

Para possibilitar a disposição em duas colunas que definimos no desenho original, vamos com que a camada da esquerda do corpo "flutue" à esquerda. Posteriormente, a camada da direita que ainda não colocamos -a lateral-, faremos que "flutue" à direita.

#cuerpo{ width:480px; margin-left: 8px; padding: 12px 0px 10px 0px; background-color : #ffffff;


14




http://www.criarweb.com/artigos/exemplos/css/maqueta/paso1.html


float:left; }

Também se define um estilo para cada uma das etiquetas que situamos dentro do corpo:

H1{ font-size: 12pt; }

Os cabeçalhos de nível 1, que tenham tamanho de letra 12pt.

#navabaixo{ font-weight : bold; }

Para atribuir um negrito no div da parte inferior do corpo, que têm links para facilitar a navegação.

Podemos ver o exercício tal como está com os passos realizados até este momento..


Montar uma página com CSS IVNos passos anteriores deste manual vimos como criar o cabeçalho e o corpo da página. Agora vamos ver como fazer a lateral direita da página.

A camada lateral

Na lateral direita situamos uma nova camada, que oferece acesso a serviços e outras informações.

<div id="lateral"> ... conteudo lateral... </div>

O conteúdo que vamos situar dentro desta camada será visto por partes, pois têm bastantes detalhes para serem destacados tranqüilamente. Os estilos são os seguintes:

#lateral{ width: 200px; background-color: #EBF2FE; border-bottom : 1px solid #cccccc; border-left : 1px solid #cccccc; float:right; }

Define-se uma largura, uma cor de fundo e bordas de cor cinza claro na parte lateral esquerda e abaixo, os outros dois lados não terão borda por estar em contato com a borda de outros elementos.

Ademais, com o atributo float:right, indicamos que esta lateral deve "flutuar" para a direita. Assim, o corpo flutua à esquerda e a lateral à direita, com o qual conseguimos uma disposição em 2 colunas.


15






Veremos a seguir os elementos que vamos colocar dentro da camada lateral, numa espécie de caixas independentes. Embora antes de ver essas caixas uma a uma, vale a pena conhecer em linhas gerais como serão criadas. Cada caixa terá este código HTML, composto por um título e um conteúdo da caixa:

<h2 class="titlat">Titulo da caixa</h2> <div id="idunico" class="corpolateral"> Conteudo da caixa </div>

O título o incluímos com uma etiqueta <h2> e a parte da caixa com o conteúdo, se define com um div. Cada um desses elementos tem uma classe, que se aplicará aos mesmos elementos em cada uma das caixas, de modo que todos os elementos da lateral compartilhem um mesmo estilo.

.titlat{ background-color:#68729E; color:#ffffff; font-size:8pt; text-transform : uppercase; padding: 7px 3px 7px 8px; font-weight : normal; letter-spacing : 2px; margin: 0px 0px 8px 0px; }

.corpolateral{ padding: 5px 4px 13px 10px; }

O cabeçalho de nível 2 utiliza a classe "titlat", que define uma cor de fundo, a cor do texto, um tamanho de letra, uma mudança das letras do título à maiúsculas, umas margens internas, peso de letra normal (não negrito, como costumam ser os cabeçalhos por padrão), um espaçamento de letras de 2 pixels e uma margem. Os títulos levam associado uma quebra de linha dupla em cima e abaixo, que desejamos evitar e para isso definimos uma margem de 0 pixels, menos na parte debaixo, que terá 8 pixels.

As caixas laterais também têm um estilo, que se aplica a todos os corpos das caixas que existem na lateral. Esse estilo simplesmente define umas margens internas.

Caixa de buscar

Um dos elementos que vamos colocar dentro da lateral é uma caixa de busca, com um formulário para realizar buscas internas, dentro do site, e em toda web.

Essa caixa de busca se coloca em um formulário. Colocamos diversos identificadores aos elementos que estão dentro do formulário, para poder aplicar estilos a cada componente separadamente. Embora alguns destes seletores nem sequer chegamos a utilizar, podem ser bem-vindos se quisermos fazer no futuro modificações da folha de estilos para atualizar o desenho do web.

<h2 class="titlat">Buscar</h2> <div id="fbuscar" class="corpolateral"> <form> <div id="campotexto"><input type="text" name="criterio"></div> <div id="botonbuscar"><input type=image src="images/go.gif" width="25" height="15"></div>


16




<div class="radio"><input type="radio" name="op" value="1"> Na Web do inverno</div> <div class="radio"><input type="radio" name="op" value="2"> Em toda a Web</div> </form> </div>

Os elementos que definimos na folha de estilos para este pequeno formulário são os seguintes:

INPUT { font-size : 8pt; }

Com isso definimos que os campos de texto têm um tamanho de letra de 8 pontos.

#fbuscar form{ margin-bottom : 0px; margin-top : 0px; }

O formulário, que está situado dentro da camada fbuscar, não deve ter margens, nem em cima e nem embaixo.

#campotexto{ float: left; }

A camada "campotexto", onde está o campo de texto, definimos que deve "flutuar" à esquerda.

#campotexto input{ width:100px; }

O input que há dentro da camada campotexto deve ter 100 pixels de largura.

#botonbuscar { padding-top : 3px; padding-left: 106px; }

A camada onde está o botão de submit, que neste caso é uma imagem de submit (<input type="imagem">), tem uma margem interna de 3 pixels para cima, e de 106 para o lado esquerdo. Os 106 pixels de largura saem dos 100 que ocupa o campo de texto que está à equerda, mais 6 pixels adicionais, que é a verdadeira margem que haverá entre o campo de texto e a imagem de submit.

#botaobuscar input{ border : 0px none; }

Com esta última definição estamos indicando que a imagem de submit (o <input type="image"> que está dentro da camada botaobuscar) não tenha borda.

.radio{ clear:both; }

Esta classe, que afeta as camadas onde estão os botões de radio, define que não deve haver


17




elementos "flutuando" nem à esquerda, e nem à direita dos botões de radio.

A caixa de registro

Na seguinte caixa da lateral aparece um pequeno texto convidando o visitante a registrar-se.

<div id="registro" class="corpolateral"> <a href="#">Registra-se conosco</a> e obtenha muitas vantagens. </div>

Esta camada não tem nenhum estilo específico, simplesmente se comporta herdando os estilos de outras camadas e com os que se definiram nas classes que se utilizam.

A caixa de outras informações

Situaremos uma última caixa dentro da lateral, que contem links a outras informações. Dentro da caixa colocaremos vários links dentro de uma lista.

<h2 class="titlat">Outras informações</h2> <div id="otras" class="corpolateral"> <ul> <li><a href="#">Quem somos</a> <li><a href="#">Nossa missão</a> <li><a href="#">Agenda de eventos</a> </ul> </div>

Para personalizar o estilo da lista de links utilizam-se os seguintes estilos.

#otras ul{ margin : 5px 10px 0px 0px; padding: 0px 0px 0px 4px; list-style: none; }

Por um lado temos o estilo definido para toda a lista de elementos. Neste caso se eliminam as margens que este tipo de listas têm implícitas. Coloca-se também uma margem interna 4 pixels à esquerda e zero no resto das posições. Com "list-style:none" indica-se que não se deseja nenhuma bolinha à esquerda dos elementos, visto que vamos coloca-la a seguir manualmente como fundo dos <li>.

#otras li{ padding-left: 14px; background: transparent url("images/bullet.gif") 0 2px no-repeat; margin-bottom: 10px; }

Por outro lado, para cada um dos elementos da lista, define-se um espaço de 14 pixels à esquerda. Esses 14 pixels servem para fazer espaço, para que caibam umas pequenas margens que vamos colocar de fundo nas listas, que vão fazer às vezes de bolinha. Também, define-se um fundo dos <li> que é a imagem com a bolinha personalizada, de acordo com nosso desenho. Também, define-se uma margem na parte inferior.

Depois de integrar tudo o que vimos neste exercício para criar a lateral da página, o desenho fica tal como se pode ver nesta página.


18







Montar uma página com CSS VApontaremos os últimos retoques no desenho da página com CSS para finalizar a seqüência de construção com CSS. Pode-se ver a primeira parte do artigo.

Rodapé da página

Não havíamos previsto este elemento na imagem original, criada previamente, mas decidimos colocá-lo porque o necessitamos, para que a parte onde está o corpo e a lateral, apareça o fundo de cor branca. No Explorer aparece o fundo branco sem nenhum, mas em Mozilla e outros navegadores, ao estar as duas camadas do corpo e da lateral "flutuando" à esquerda e à direita, não entende que deva manter o fundo branco definido no container.

Não sabemos se isto pode ser entendido bem, mas o melhor é fazer uma proba e ver o que definimos até o momento na tela de Firefox ou Mozilla. Veremos que o fundo branco não continua até embaixo.

<div id="pie"> Probas de construção CSS © 2005 CriarWeb.com </div>

Esta camada tem o seguinte estilo definido:

#pie{ clear : both; color : #cccccc; text-align : right; margin : 10px 10px 0px 10px; padding-bottom:10px; }

Com "clear:both" indicamos que a camada deve se mostrar sem elementos flutuando à esquerda e à direita, de modo que a posição da camada será imediatamente abaixo da camada corpo e lateral.

Logo, define-se uma cor para o texto, um alinhamento de texto, umas margens e uma margem interna pela parte debaixo de 10 pixel.

A borda externa

O desenho original incluía uma borda de 2 pixel rodeando toda a camada principal. Podemos fazer a prova de incluir uma borda na camada container. Para isso, há que acrescentar no estilo para a camada container o atributo border, da seguinte forma:

#container{ text-align: left; border: 2px solid #cccccc; width: 700px; margin: auto; background-color : #ffffff; }


19







Em Mozilla e em navegadores similares, está tudo correto. Mas em Internet Explorer a coisa tem seu problema. Isto é devido ao espaço das bordas que no Explorer toma-se o que tenha sido atribuído à própria camada, e em Mozilla e outros navegadores, toma-se como espaço adicional, a parte do que tenha sido atribuído à camada em si.

Nós resolvemos este problema tirando a borda na camada container e criando uma nova camada, na qual situaremos o container. Chamamos de borda a essa nova camada e é a que vai ter o estilo de borda definida.

<div id="borda"> <div id="container"> .... conteúdo de toda a página </div> </div>

Para conseguir a borda foi definido o seguinte estilo para camada borda:

#borde{ border: 2px solid #cccccc; text-align: left; width: 700px; margin: auto; }

Primeiro, definimos uma borda de 2 pixel. Logo, centralizamos à esquerda para contrabalançar o centrado ao centro que tem o body e que havíamos posto para que Explorer centralizasse a camada do conteúdo. Também, se inclui uma largura de 700 pixel e uma margem "auto" para que Mozilla e os outros navegadores centralizem a camada.

O resultado final do exercício pode ser visto em uma página a parte. Por suposto, convém ver o resultado final utilizando vários navegadores distintos.

Conclusão

Vimos como montar uma página utilizando CSS passo a passo. Esperamos que tenham podido seguir o exercício sem muita dificuldade. Realmente, o trabalho com CSS para a construção é uma tarefa fácil, mas também é muito simples encontrarmos com problemas misteriosos que parecem não ter resposta.

Sem ser um desenho complicado, levamos várias horas de trabalho para realizar esta construção, e é claro, também tivemos algum que outro aborrecimento que por sorte não chegou a ser um desespero. Sobretudo existem dificuldades na hora de conseguir que o desenho seja visto corretamente em todos os navegadores do mercado. Provamos com êxito em Mozilla, Firefox, Netscape, Opera e Explorer.

Para que a compatibilidade entre navegadores não signifique um problema muito pesado, nosso conselho e o de outros desenvolvedores, é desenhar com Mozilla ou navegadores similares. Logo, pode-se ver o resultado no Explorer e adaptar o que for necessário para terminar de enquadrar o desenho. Neste caso, haverá poucas coisas para mudar, enquanto que se desenhamos para Explorer e logo vemos o resultado em outros navegadores, certamente nada estará em seu lugar.

A experiência no trabalho com CSS nos diz que muitas vezes surgem os mesmos problemas ou similares. Uma vez que já os temos resolvido algumas vezes e já nos acostumamos com eles, assim como fizemos com os detalhes relativos ao HTML e à construção com tabelas, CSS se


20



http://www.criarweb.com/artigos/exemplos/css/maqueta/


torna muito mais simples, potente e rápido de desenvolver.

Resultado final do exercício.


Variar o desenho e a construção com a folha de estilosVimos numa série de artigos anteriores um exemplo de como montar uma página utilizando unicamente CSS para posicionar seus distintos elementos. Uma das principais vantagens de CSS é que se mudar o aspecto de uma página radicalmente, sem a necessidade de mudar seu código HTML. Por isso, nos pareceu interessante continuar aprofundando na construção de páginas web com CSS, oferecendo uma nova proposta de desenho para o mesmo arquivo HTML que havíamos utilizado anteriormente.

Para começar, podemos dar uma olhada no desenho que criamos, utilizando um programa de edição gráfica tipo Photoshop ou Fireworks. Vamos trabalhar sobre esta imagem, para que o desenho resultante seja o mais parecido possível.

Também oferecemos para fazer um download um arquivo comprimido com todas as imagens que vamos utilizar neste desenho. Será interessante tê-lo a mão para tratar de fazer por nós mesmos o exemplo.

O mesmo código HTML

Insistimos na idéia de que vamos utilizar o mesmo código HTML que construímos ao fazer o exemplo do artigo de construção CSS, visto que as folhas de estilo em cascada nos proporcionam ferramentas para alterar o aspecto da página sem editar sequer o arquivo HTML.

A construção anterior já foi feita pensando em que iríamos utilizar para propor mais de um desenho, por isso foi acrescentada alguma etiqueta, classe ou identificador adicional para facilitar este passo.

Embora, durante a criação deste segundo exemplo estivemos tentados de editar o código HTML, só mudamos um aspecto que vamos assinalar a seguir.

Trata-se da imagem do cabeçalho. Se observarmos no arquivo HTML anterior, comprovaremos que a imagem está incluída por meio de uma etiqueta <img>. Ao definir a rota da imagem e seus valores de largura e de altura por meio dos atributos de <img>, não podemos mudar esses dados com a folha de estilos. Como desejamos mudar a imagem em distintos desenhos, ao invés de colocar a imagem com a etiqueta diretamente no código HTML, vamos utilizar um truque que aprendemos em CSSZenGarden, que se baseia em incluir um titular de texto, que logo vamos substitui-lo pela imagem que desejarmos. Por sua vez, há que dizer que este truque é original de Douglas Bowman http://www.stopdesign.com/articles/css/replace-text/.

Antes, havíamos definido o seguinte pedaço de código para situar a imagem do cabeçalho:

<div id="cabecalho"><img src="images/cabecalho.jpg" width="700" height="106" alt="A Web do Inverno" border="0"></div>


21



http://www.stopdesign.com/articles/css/replace-text/

http://www.criarweb.com/artigos/exemplos/css/pack-imagenes2.zip

http://www.criarweb.com/artigos/exemplos/css/pack-imagenes2.zip

http://www.criarweb.com/artigos/exemplos/css/imagen_diseno2.jpg



http://www.criarweb.com/artigos/exemplos/css/maqueta/


Agora, o código do cabeçalho será o seguinte:

<div id="cabecera"> <h1><span>A Primavera</span></h1> </div>

Simplesmente definimos um titular, que logo não aparecerá na página, porque o ocultaremos por meio do atributo visibility de CSS. Em seu lugar, definiremos um fundo para a camada "cabeçalho" e atribuiremos seus atributos por meio de folhas de estilo.

Assim ficarão os estilos para o elemento cabeçalho <h1>:

#cabecera{ background: transparent url(images/cabecalho.jpg) no-repeat; height: 288px; width: 549px; }

#cabecalho h1 { margin: 0px 0px 0px 0px; } #cabecalho h1 span { display:none; }

O novo código CSS

À parte do comentado para o cabeçalho, o código CSS criado para aplicar os estilos não aporta muita novidade do que vimos até o momento.

Basicamente foram utilizadas novas imagens para os fundos e variamos os tamanhos e margens das camadas. Além disso, na parte central ou no corpo da página, os elementos foram alinhados de maneira distinta, ficando os quadrados do buscador e links a outras seções à esquerda e o texto da página à direita.

Também, pode-se observar como foram utilizadas algumas imagens para decorar o fundo dos títulos das caixas da esquerda. Também foi colocada uma imagem no fundo onde está o texto da página. Esta imagem está muito suave para permitir ler o texto com comodidade.

Vamos deixar de lado, talvez para próximos artigos, a explicação detalhada da declaração de estilos utilizada. Ao invés disso, colocamos os links para o arquivo HTML e o CSS.

Página com o resultado final do exercício.

Declaração de folhas de estilo utilizada.


Workshop de CSS, OpacityNesta ocasião, mostraremos um efeito bastante simpático que podemos aplicar em camadas, imagens, formulários, etc…


22



http://www.criarweb.com/artigos/exemplos/css/maqueta2/estilo.css

http://www.criarweb.com/artigos/exemplos/css/maqueta2/


A propriedade opacity funciona tanto no Internet Explorer como no Firefox:

IE:

filter: alpha(opacity=50)

Firefox:

opacity: .5

Mozilla:

-moz-opacity:0.5

O seguiente exemplo funciona nos dois navegadores:

<style type="text/css"> .exemplo {width: 100%; background-color: red} .opaco {filter: alpha(opacity=50); opacity: .5} </style>

<p class="exemplo">Exemplo sem opacity.</p> <p class="exemplo opaco">Exemplo com opacity a 50%.</p> <p><img src="imagem.gif" width="100" height="109"><img src="imagem.gif" class="opaco" width="100" height="109"></p>

Ver exemplo em funcionamento

Artigo por Federico Elgarte

Links com estilo CSS que simulam botõesNeste workshop de CSS vamos mostrar como realizar um link que tenha aspecto de botão. Com outras palavras, vamos criar botões a partir de links, aplicando uma folha de estilo que fará com que os links sejam mostrados de forma similar como seriam os botões. Para isso, vamos fazer com que, ao passar o mouse por cima de um link, este pareça como se estivesse clicado.

O melhor para ter uma idéia do objetivo deste workshop é ver um exemplo.

O código HTML

Vamos partir basicamente de um link, ao qual atribuiremos uma classe definida com CSS. Como os estilos vão ser aplicados com CSS, o link é tão simples como este:

<a href="#" class="linkbotao">Ola!!</a>

O código CSS

Vamos definir a classe "linkbotao", que é o estilo que se atribuiu para o link. Como sabemos, os links têm diferentes estados (visitados, não visitados, ou com o cursor do mouse por cima),


23



http://www.criarweb.com/artigos/exemplos/css/botonesconenlacescss.htm

http://www.criarweb.com/artigos/exemplos/css/exemplopacity.html


portanto teremos que definir o estilo para cada estado.

.linkbotao { font-family: verdana, arial, sans-serif; font-size: 10pt; font-weight: bold; padding: 4px; background-color: #ffffcc; color: #666666; text-decoration: none; } .linkbotao:link, .linkbotao:visited { border-top: 1px solid #cccccc; border-bottom: 2px solid #666666; border-left: 1px solid #cccccc; border-right: 2px solid #666666; } .linkbotao:hover { border-bottom: 1px solid #cccccc; border-top: 2px solid #666666; border-right: 1px solid #cccccc; border-left: 2px solid #666666; }

À princípio, com a classe .linkbotao foram definidos estilos para qualquer estado do link. Depois, para os diferentes estados do link foram definidos seus correspondentes estilos, que são o mesmo para os estados visitado e não visitado, e diferentes para o estado hover, que é o que se aplica quando o mouse está sobre o link.

Tão simples como isto. Se desejar, pode-se ver o exemplo em funcionamento.


Criar um menu dinâmico com CSSO seguinte estilo nos permite criar um menu similar aos de javascript, onde representamos seu estado de repouso (out) com uma cor e seu estado sobre (over) com outra.

<style type="text/css"> #menu div.barraMenu, #menu div.barraMenu a.botaoMenu { font-family: sans-serif, Verdana, Arial; font-size: 8pt; color: white; }

#menu div.barraMenu { text-align: left; }

#menu div.barraMenu a.botaoMenu { background-color: #556975; color: white; cursor: pointer; padding: 4px 6px 2px 5px; text-decoration: none; }


24



http://www.criarweb.com/artigos/exemplos/css/botonesconenlacescss.htm


#menu div.barraMenu a.botaoMenu:hover { background-color: #637D4D; }

#menu div.barraMenu a.botaoMenu:active { background-color: #637D4D; color: black; } </style>

<div id="menu"><div class="barraMenu"> <a class="botaoMenu" href="">Opção 1</a> <a class="botaoMenu" href="">Opção 2</a> <a class="botaoMenu" href="">Opção 3</a> <a class="botaoMenu" href="">Opção 4</a> </div></div> background-color de a.botaoMenu : cor de estado repouso (out). background-color de a.botaoMenu:hover : cor de estado sobre (over). background-color de a.botaoMenu:active : cor de estado selecionado.



Utilizar CSS para montar um boletimA construção com CSS oferece muitas vantagens para a acessibilidade da página, carregamento em bytes e clareza do código. Neste artigo vamos contar como podemos aproveitar essas vantagens também nos boletins de novidades enviados em formato HTML.

Para construir com CSS utiliza-se uma folha de estilo em cascata, onde se especifica qualquer atributo de aspecto da página, separando por completo o conteúdo e a apresentação. O conteúdo se define no código HTML da página e qualquer especificação do aspecto se inclui em um arquivo externo CSS.

Referência: Para saber mais sobre CSS podemos consultar a seção CSS a fundo. Tambem podemos consultar o artigo sobre a Construção CSS.

Um newsletter, como se comentou em nosso Manual de boletim de novidades, pode ser enviado em formato HTML para dar mais visual ao correio. Nesses casos, na hora de criar o boletim deve-se fazer uma página web normal e logo, se enviará como corpo da mensagem.

Como qualquer outra página web, a que criamos para fazer o boletim, pode ser realizada utilizando CSS, o que redundará em vantagens para o criador do boletim e para quem se inscreveu.

• O peso da mensagem poderá se reduzir, por não ser necessário incluir nenhuma etiqueta HTML para definir os estilos. Isto nos economizará muito código.

• Poderemos mudar o aspecto da mensagem com somente mudando a folha de estilos, sem necessidade de modificar o código HTML que viemos utilizando para fazer o envio. Isto nos oferece uma maior capacidade de inovação no envio da mensagem.

• Se por alguma razão perdemos a folha de estilos ou se o sistema de correio do usuário que se inscreveu não suporta CSS, simplesmente verá a mensagem sem o aspecto definido pelo criador do boletim. Porém, pelo menos verá perfeitamente o envio, com


25



http://www.criarweb.com/boletim_novidades/



http://www.criarweb.com/artigos/exemplos/css/menu.html


toda informação da mensagem, apresentada com os estilos pré-determinados do sistema do usuário.

• No caso de que a um usuário não suporte o formato HTML, poderia acontecer de ver o código da página (com as etiquetas e tudo), ao invés de ver o formato web. Neste caso, pelo menos receberá um código muito mais legível e compreensível do que se estivesse misturado com etiquetas HTML para definir os estilos.

• Na hora de criar os diferentes boletins cada vez, se economiza tempo, visto que não há que se preocupar por definir os estilos. Ou seja, a modificação é muito mais simples.

Como tudo nesta vida, montar um boletim com CSS, também tem algumas desvantagens:

• A principal que vejo é que faz falta ter maiores conhecimentos para criar um boletim com CSS. Ou seja, qualquer pessoa é capaz de fazer uma página com HTML básico utilizando um editor de webs como Frontpage ou Dreamweaver. Entretanto, com CSS deveremos dominar uma tecnologia adicional e algum programa ou outro para realizar o trabalho.

• Outra desvantagem é que alguns sistemas de correio não incluem links com arquivos externos, já seja imagens ou declarações CSS. Isto faz com que não se mostrem os estilos do boletim, embora pelo menos se mostrará a página básica sem os estilos. Uma possibilidade para evitar isto é incluir os estilos dentro do próprio código da página, embora assim também estaremos contaminando um pouco o código limpo de nosso boletim.

Exemplo de boletim em formato HTML com CSS

Nós levamos tempo enviando em nossa web MercadoProfesional.com um boletim semanal em formato HTML, que está totalmente construído com CSS. Vamos mostrar aqui seu código HTML e o código CSS que utilizamos para definir os estilos.

Seria bom ver o boletim em uma página a parte, para termos uma idéia prévia do conteúdo e estilo criados.

Observação: Este exemplo é de uma página web de freelance em castelhano chamada Mercado Profesional.

Código HTML

Podemos ver a seguir o código HTML de um de nossos boletins de novidades.

<html> <head> <title>Boletín de novedades 25 .:MercadoProfesional.com:.</title> <link rel="STYLESHEET" type="text/css" href="estilos.css"> </head>

<body> <div id="container"> <div id="cabecera"> <div id = "titulo"> <h1>Boletín de novedades<BR> MercadoProfesional.com</h1> </div> <div id="logo"> <a href="http://www.mercadoprofesional.com/"><img src="http://www.mercadoprofesional.com/mail_boletin_novedades/imgs/logo.gif" width = "155px" height = "78px" border="0px" valign="top"></a> </div> </div>


26





http://www.desarrolloweb.com/articulos/ejemplos/boletin-mercadoprofesional/boletin.html



<div id="topCuerpo"></div> <div id="cuerpo">

<div id="numBoletin"> Boletín de Novedades 25 # 18/05/2005 # </div> <div id="cuerpo1"> <p>Saludos cordiales, </p> <p>

Te llega este correo por ser uno de los profesionales registrados en MercadoProfesional.com Te informamos de las nuevas solicitudes que han llegado, para que no dejes pasar la oportunidad de enviar tus presupuestos. </p>

</div> <div id="cuerpoNov"><h2 class="icoTit"> Nuevos Proyectos: </h2> <h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/364.php"> Tienda Online</a></h3> <p class="par">Tienda online, muy bien definida, para venta de servicios de revelado online</p> <h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/366.php"> Desarrollo de portal inmobiliario</a></h3> <p class="par">Como su nombre indica, un portal inmobiliario, hacen especial hincapié en la funcionalidad.</p> <h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/368.php"> Desarrollo de portal</a></h3> <p class="par">Desarrollo y promoción de un portal, exactamente, no sabemos que temática quieren utilizar.</p> <h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/369.php"> Formulario de flash y PHP</a></h3> <p class="par">Breve desarrollo en php para una aplicación en flash, con opciones de seguir colaborando en el futuro.</p> </div> <p>Esta semana tenemos 4 proyectos nuevos.</p> <p>Simplemente despedirnos de todos vosotros y desearos suerte con los presupuestos.</p> <p>© Guiarte Multimedia S.L. - +34 915440837 - <a href ="mailto:[email protected]">[email protected]</a> -</p> </div> <div id="pieCuerpo"></div> </body> </html>

Como este código não tem nenhum estilo definido através de HTML, é bastante simples de interpretar.

Código CSS

Agora podemos ver o código do arquivo CSS que estamos utilizando para definir os estilos do documento. Certamente algum dos estilos definidos não estaremos utilizando nesta edição do boletim de novidades. Em geral, não estranhem se a declaração de estilos não estiver totalmente otimizada.

BODY { margin : 0 0 0 0px; background-color: #CCCCCC; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; text-align : center; }

#cabecera { background-image: url(imgs/fondo_cab.gif); background-repeat : no-repeat; margin : 0 0 0 0px; background-position : right; padding : 0 0 0 0px; width : 500px; height: 96px; }


27




#logo { padding : 7 20 11 20px; }

#titulo { padding : 18 20 0 20px; float : right; margin-right: 24px; }

#container { width : 500px; padding : 0 0 0 0px; margin : auto; text-align : left; }

#topCuerpo { margin-bottom : 0px; margin-left : 0px; margin-right : 0px; margin-top : 5px; border-bottom : 1px solid #9b9b9b; width : 493px; float : right; }

#cuerpo { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; padding : 10 10 10 10px; background-image : url(imgs/fondo_cuerpo.gif); margin : 0 0 0 6px; background-position : right; background-repeat : repeat-y; clear : both; }

A:ACTIVE{ color : #003366; }

A:HOVER{ color : #003366; text-decoration : none; }

A:LINK{ color : #003366; }

A:VISITED { color : #003366; }

#numBoletin { background-color : #e9e9e9; border : 1px solid #666666; width : 304px; float : right; padding : 6 0 6 10px; }

#cuerpo1 {


28




clear : both; padding-top: 10px; }

#cuerpoNov { background-color : #d2e3fb; border : 1px solid #666666; padding : 5 10 10 5px; }

#pieCuerpo { background-image : url(imgs/bajo_cuerpo.gif); height:9px; background-repeat : no-repeat; margin-left : 6px; }

H1 { font-size : 16px; font-weight : bold; color : #003366; text-align : center; }

H2 { font-size : 11px; font-weight : bold; color : #003366; }

.icoTit{ background-image : url(imgs/IcoTit.gif); background-repeat : no-repeat; padding-left:12px; margin-top:0px; background-position : left; }

H3 { font-size: 10px; font-weight : bold; color : #003366; } .icoNovedad{ background-image : url(imgs/IcoNovedad.gif); background-repeat : no-repeat; padding-left:10px; margin-left:3px; margin-top:0px; margin-bottom:2px; background-position : left; }

.par{ margin-top:2px; padding-left:10px; margin-left:3px; }

.resaltado { background-color : #e9e9e9; border : 1px solid #666666; padding : 6 0 6 10px; }


29




A declaração de estilos é bastante longa, mas como dizíamos, poderia ainda se otimizar bastante mais.

Podemos ver o boletim em uma página a parte.

Observação: Este exemplo é de uma página web de freelance em castelhano chamada Mercado Profesional.

Conclusão

O passo mais difícil para realizar este boletim é fazer a construção propriamente dita em CSS. Mas sempre é interessante perder um pouco de tempo para melhorar nossa maneira de fazer as coisas.

Antes de acabar, queremos colocar um link a uma página para visualizar o boletim sem a definição de estilos associada. Assim é como se veria o boletim se por algum motivo o sistema de algum usuário não aceita CSS ou se não chega a linkar com a folha de estilos por qualquer razão. Pode-se ver que o boletim ainda fica bastante compreensível, embora não tão vistoso.

Artigo por Diego Pinilla

Caixa simples e elegante com CSSEm muitas ocasiões, ao construir uma página web, necessita-se encaixar uma informação para remarcar seu conteúdo, destacando-o de outros textos do documento.

É basicamente o que vamos fazer no exercício dessa ocasião. Trata-se de um exemplo muito simples, mas que serve como continuação de outro artigo que publicamos no Workshop de HTML. Em tal workshop realizávamos as caixas utilizando unicamente HTML, sem declaração de estilos, o que não é muito adequado devido às tendências atuais.

CSS é, nesses momentos, a tecnologia mais adequada para definir os estilos de um documento. O que antes havíamos realizado com HTML pode-se realizar com CSS obtendo várias vantagens da construção com Folhas de Estilo em Cascata.

Nota: As vantagens e fundamentos das Folhas de Estilo em Cascata (CSS) podem ser vistas no artigo Construção CSS.

O exercício

Para começar, seria bom observar o objetivo deste exercício, para ter uma idéia exata do que vamos fazer. O exercício dispõe de três caixas com estilos diferentes, embora tenham códigos muito parecidos. Para variar seu aspecto, simplesmente muda-se a declaração de estilos para cada um.

A construção com estilos realiza-se utilizando etiquetas <DIV> ao invés de tabelas. Por isso o código inclui as etiquetas <DIV> necessárias e algo mais.


30



http://www.criarweb.com/artigos/exemplos/css/caixacss-elegante-simples.html




http://www.desarrolloweb.com/articulos/ejemplos/boletin-mercadoprofesional/boletin-noestilo.html

http://www.desarrolloweb.com/articulos/ejemplos/boletin-mercadoprofesional/boletin-noestilo.html



http://www.desarrolloweb.com/articulos/ejemplos/boletin-mercadoprofesional/boletin.html


Este seria o código da primeira tabela.

<div id=tabela1> <div id=cabtab1> Caixa curiosa com HTML </div> <div id=corpotab1> Este é o interior do caixa. Esperamos que lhe pareça elegante... é muito simples. </div> </div>

Contém três etiquetas <DIV> uma para englobar a caixa inteira, e atribuir estilos como a borda ou estilos que desejarmos que se apliquem a toda caixa. Também teremos um <DIV> para o cabeçalho da caixa e outro para o corpo.

Os estilos que utilizamos para esta caixa são os seguintes:

#tabela1{ border: 1px solid #1E679A; width: 280px; } #cabtab1{ background-color: #1E679A; font-weight: bold; color: #ffffff; padding: 2 2 2 2px; } #corpotab1{ padding: 4 4 4 4px; background-color: #ffffcc; } Cada <DIV> tem atribuido um estilo diferente dependendo de nossas necessidades.

Para a segunda caixa poderemos ver um código HTML quase idêntico. A única coisa que mudamos são os identificadores dos <DIV> , para poder atribuir uns estilos diferentes à caixa.

<div id=tabela2> <div id=cabtab2> Caixa curiosa com HTML </div> <div id=corpotab2> Este é o interior da caixa. Esperamos que lhe pareça elegante... é muito simples. </div> </div>

O código CSS para definir o aspecto é o seguinte:

#tabela2{ border: 1px solid #165480; width: 200px; } #cabtab2{ background-color: #5fa6d7; font-weight: bold; font-size: 8pt; padding: 2 2 2 2px; } #corpotab2{ font-size: 8pt; padding: 4 4 4 4px;


31




background-color: #ffffcc; }

Como pode ser visto, não tem nenhuma dificuldade adicional em relação ao primeiro exemplo, pois só se definem estilos para cada um dos <DIV> .

Na terceira caixa dificultamos um pouquinho o código, embora não signifique nenhuma complicação. Neste caso, como a caixa continha um texto com várias opções de uma lista, incluímos, dentro do corpo da caixa, um <ul> (unordered list) com cada uma das opções das opções a visualizar.

<div id=tabela3> <div id=cabtab3> Caixa curiosa com HTML </div> <div id=corpotab3> <ul> <li>Opção uno</li> <li>Outra opção com texto em várias linhas</li> <li>O que for que desejar destacar</li> <li>Última opção</li> </ul> </div> </div>

Na declaração de estilos também definimos o aspecto da lista, para que se ajuste a nossas necessidades.

#tabela3{ border: 1px solid #80A93E; width: 200px; } #cabtab3{ background-color: #B7F259; font-weight: bold; font-size: 8pt; padding: 2 2 2 2px; } #corpotab3{ font-size: 8pt; padding: 4 4 4 4px; background-color: #F5ECB9; } #corpotab3 ul{ margin: 0 2 0 20px; padding: 0 0 0 0px; } #corpotab3 li{ margin: 0 2 0 2px; padding: 0 0 0 0px; }

Para definir o estilo da lista indicamos o identificador do <DIV> onde encontra-se a lista, seguido da etiqueta sobre a qual desejamos declarar os estilos, neste caso "ul" para definir os estilos da lista e "li" para declarar os estilos de cada uma das opções. Neste exemplo, declaramos os estilos necessários para definir uma margem adequada para a lista e para cada uma das suas opções.


32




Conclusão

Vimos uma maneira simples de fazer caixas com CSS. Talvez este artigo seja básico demais, mas trata-se de mostrar como se pode fazer com CSS algumas coisas que havíamos feito previamente com só HTML.

Como pode ser visto, comparando este exemplo com sua contrapartida em HTML , com CSS se constrói com muito mais coerência e se obtém um código muito mais claro.


Decorar um campo select de formulário com CSSCSS oferece infinitas opções para decorar todos os elementos suportados por HTML. Desta vez, mostraremos como aplicar nosso estilo personalizado aos drop down menus.

Primeiro, definiremos a tag option, que conterá o estilo de letra, o tamanho, a cor, etc...

option {font-family: verdana; font-size: 10px; color: white}

Logo, definiremos dois estilos vinculados à option que conterão as cores de fundo de cada opção:

option.uno {background-color: #CCC} option.dos {background-color: #666}

O último passo é colocar o drop down menu com nosso estilo personalizado:

<select> <option class="um">Opcao</option> <option class="dois">Opcao</option> <option class="um">Opcao</option> <option class="dois">Opcao</option> <option class="um">Opcao</option> <option class="dois">Opcao</option> </select>

Além de atribuir estilos às options, também devem ser definidos os estilos do campo select em se. será necessário fazer desta forma, pelo menos, para o navegador Firefox e outros da família de Mozilla.

Para definir o estilo do campo select utilizaremos este código CSS:

SELECT{ font-family: verdana; font-size: 10px; color: white; background-color:#666;}

Podemos ver o exemplo em funcionamento.



33



http://www.criarweb.com/artigos/exemplos/exem_select_css.html



Esconder com CSS o e-mail aos spambotsQuando publicamos um endereço de correio em uma página web devemos saber que não demorará muito para ser rastreado e incorporado a banco de dados de e-mails para fazer spam. É uma autêntica chatice ter que receber dezenas ou centenas de mensagens lixo no fim do dia ou de uma semana, por isso vale a pena colocar em funcionamento algum mecanismo para evitar que os spambots (robôs em busca de endereços de e-mail) cacem nosso correio eletrônico.

Agora vamos mostrar um mecanismo que encontramos em uma página web. Na verdade, este artigo é uma tradução livre deste outro artigo em inglês: Hiding email address from spambots, escrito por Lim Chee Aun.

Mostraremos um código que serviria para mostrar por CSS o endereço de correio eletrônico. O e-mail aparece na folha de estilos, nunca no corpo da página, assim o spambot o terá muito difícil para obter nosso correio.

Trata-se de utilizar umas características avançadas das folhas de estilo em cascata, que permitem definir certo conteúdo, neste caso um endereço de correio eletrônico, para colocar antes ou depois de um texto.

Teoricamente vamos utilizar CSS2 (Folhas de estilo em cascata especificação 2), que inclui a definição de pseudo-elements (pseudo elementos) "before" e "after", que servem para inserir conteúdos antes e depois de certos elementos.

Neste caso, vamos definir com CSS 2 a inclusão de um conteúdo depois de uma etiqueta HTML, mais especificamente da etiqueta <ADDRESS>, que serve à princípio para escrever um endereço em uma página.

Nota: Conhecemos o pseudo-element em uma artigo do manual de CSS: Pseudo-element em CSS

O código CSS seria o seguinte:

address:after{ /* 40 é um código para escrever o caractere '@' */ content: " <nome40 dominio.com>"; }

Nota: O caractere @ em folhas de estilo em cascata pode ser escrito com o código especial 40. Colocamos um espaço depois de 40 para que fique claro que o caractere especial chega até ali. Podem provar ao tirar o espaço e vocês verão que em ocasiões o @ se transforma em outro caractere, dependendo do que tiver escrito depois. Esse espaço em branco não afeta o texto, ou seja, não será visto na página.

O código HTML que deveríamos escrever para mostrar o endereço do correio seria o seguinte:

<address>© 2005 oquefor.com</address>

Como pode ser visto, no código HTML não aparece o endereço do correio eletrônico em nenhuma parte, fazendo com que o spambot não perceba que ali existe um correio.

Pode-se ver o exemplo em uma página a parte.


34



http://www.criarweb.com/artigos/exemplos/css/ex-ocultar-email-css.html

http://www.criarweb.com/artigos/354.php

http://cheeaun.phoenity.com/

http://www.phoenity.com/newtedge/hide_email_spambots/


Atenção aos usuários do Internet Explorer 6: Este navegador não suporta os pseudo-elementos after ou before, portanto este exemplo não funcionará.

Em nosso exemplo incorporamos a declaração de estilos no mesmo arquivo HTML, mas talvez seria mais efetivo se colocássemos a declaração de estilos em um arquivo externo, que logo incluiríamos com a etiqueta no cabeçalho da página.

Conclusão

Vimos uma maneira engenhosa de ocultar o endereço de e-mail. Entretanto, cabe destacar que as características avançadas de CSS2 não são suportadas por todos os navegadores.

Em geral, a desvantagem a destacar é que, com este código, a acessibilidade da página diminui consideravelmente. Visto que somente certos navegadores mostrarão o endereço eletrônico. Mesmo assim, esses endereços não poderão ser clicados para enviar um correio eletrônico diretamente, ou seja, não podem ser mostrados como links. Em Firefox, nem sequer podemos selecionar o texto do endereço de correio, simplesmente nos permite vê-lo.

Não obstante, é uma nova maneira de mostrar um correio eletrônico não acessível a programas de rastreio de e-mails. Hoje ainda não é uma maneira muito adequada, mas talvez o será com o tempo.

Lembramos que este artigo é uma tradução de outro, escrito em inglês e publicado na URL: http://www.phoenity.com/newtedge/hide_email_spambots/

Artigo por Lim Chee Aun

Efeito de sombra com CSSEncontramos 3 métodos diferentes para fazer um efeito de sombra. São os seguintes, que veremos comentados neste artigo:

1. Método background-color 2. Método canal alpha 3. Método esticar imagem

Método Background color

Este método é bastante simples. Baseia-se em definir três caixas trasladadas, com diversas cores de fundo. Os elementos com as classes "blur" e "shadow" se definirão com tons cinzentos para criar o efeito de sombreado.

Código HTML:

<div class="blur"> <div class="shadow"> <div class="content">bla bla</div> </div> </div>

Código CSS:


35



http://www.phoenity.com/newtedge/hide_email_spambots/


.blur{ background-color: #ccc; /*shadow color*/ color: inherit; margin-left: 4px; margin-top: 4px; }

.shadow,

.content{ position: relative; bottom: 2px; right: 2px; }

.shadow{ background-color: #666; /*shadow color*/ color: inherit; }

.content{ background-color: #fff; /*background color of content*/ color: #000; /*text color of content*/ border: 1px solid #000; /*border color*/ padding: .5em 2ex; }

A única desvantagem deste método é que usa cores definidas para as sombras e isso fazer com que não se possa misturar este efeito com outros elementos. Com um fundo branco, as sombras em cinza ficam bem, mas por exemplo, se o fundo fosse vermelho, então o efeito de sombreado deveria se realizar com tons vermelhos escuros.

Podemos ver o exemplo em funcionamento em uma página a parte.

Método canal alpha

Este método é muito parecido ao anterior, mas soluciona o problema de se misturar com outros elementos. O fundo da página onde será mostrado o elemento sombreado é indiferente, inclusive se o sombreado for na mesma página sobre diferentes fundos. Utilize imagens de fundo em formato PNG "alpha transparentes", ao invés de cores definidas na folha de estilo.

O código HTML necessário é o mesmo do exemplo anterior, você simplesmente deve modificar o código CSS, em concreto para as classes "blur" e "shadow". Mostramos o código CSS para este exemplo.

<style type=text/css> .blur{ background: transparent url(shadow1.png); /*rota para o 80%-transparente 1x1 pixel colorido em preto */ color: inherit; margin-left: 4px; margin-top: 4px; }

.shadow{ background: transparent url(shadow2.png); /*rota para o 60%-transparent 1x1pixel colorido em preto */ color: inherit; }

.shadow,

.content{


36



http://www.criarweb.com/artigos/exemplos/css/background-color.html


position: relative; bottom: 2px; right: 2px; }

.content{ background-color: #fff; /*background color of content*/ color: #000; /*text color of content*/ border: 1px solid #000; /*border color*/ padding: .5em 2ex; } </style>

Para provar a vantagem deste tipo de fundo, podemos mudar a cor de fundo da página web e veremos como a sombra também mudará de cor.

Podemos ver o exemplo em funcionamento em uma página a parte .

Método esticar imagem

Opinamos que os dois métodos anteriores não são tão bons ou muito bons, devido a que a sombra não parece muito natural. Em outras palavras, não é um efeito suficientemente realista. De forma que abrimos nosso editor gráfico, criamos uma caixa retangular com efeito de sombra e exportamos a uma imagem. Possivelmente possa utilizar essa imagem para criar o efeito de sombra.

O código HTML experimental

<div class="shade"> <img src="shadow.png" width="0" height="0" alt="" class="shade" /> bla bla</div>

O código CSS experimental

img.shade{ width: 37ex; height: 9em; /* specify the dimension of the image */ display: block; position: absolute; z-index: -1; /* force the image to show below the content */ right: -3ex; bottom: -1em; }

div.shade{ width: 30ex; height: 6em; /* specify the dimension of the content, slightly smaller than the image */ position: relative; z-index: 1; /* force the content to show above the image */ background-color: #fff; border: 1px solid #000; padding: 1em 2ex; margin-right: 6ex; margin-bottom: 3em; }


37



http://www.criarweb.com/artigos/exemplos/css/canal-alpha.html


Temos três desvantagens neste método

1. Como a imagem se estica, pode talvez, não ficar muito bonito. 2. Em Mozilla Firefox a imagem às vezes desaparece (pode ser recuperada refrescando ou

deslocando a página). No Internet Explorer não se mostra bem o efeito, pelo menos na versão 6.

3. O conteúdo não pode flutuar (não podemos utilizar o atributo float)

Podemos ver este exemplo em funcionamento em uma página a parte.

Um momento. Como faríamos um texto com sombreado?

Se utilizar um navegador baseado em Gecko, você poderá visualizar outro efeito interessante para realizar sombreado de textos sem utilizar imagens e "redimensionável" simplesmente mudando o tamanho do texto ou as fontes que usa o navegador (com o menu view>text size > increase / Decrease).

O código HTML seria o seguinte:

<span id="text">Texto sombreado</span>

O código CSS

#text{ font-size: 3em; /* optional. just to increase the font size. */ display: block; line-height: 1em; color: #666; /* shadow color */ background-color: transparent; white-space: nowrap; /* wrapping breaks the effect */ }

#text:before, #text:after{ content: "Texto sombreado"; /* O mesmo texto que queremos mostrar sombreado */ display: block; }

#text:before{ margin-bottom: -1.05em; margin-left: 0.1ex; color: #ccc; /* shadow color */ background-color: transparent; }

#text:after{ margin-top: -1.05em; margin-left: -0.1ex; color: #fff; /* text color */ background-color: transparent; }

Este efeito pode ser útil por agora. Entretanto, as especificações de CSS2 incluem uma propriedade CSS chamada text-shadow, que serve para definir um efeito de sombra a um texto. Entretanto, a maioria dos navegadores ainda não suporta esta propriedade.

Interessantes recursos sobre este tema:

• Simple CSS drop shadows http://www.saila.com/usage/shadow/


38



http://www.saila.com/usage/shadow/

http://www.criarweb.com/artigos/exemplos/css/estirar-imagen.html


• A List Apart: CSS Drop Shadows http://alistapart.com/articles/cssdropshadows/ de Sergio Villarreal (revisão do artigo Easy CSS drop shadows http://1976design.com/blog/archive/2003/11/14/shadows/ de Dunstan Orchard)

• CSS Drop Shadows II: Fuzzy Shadows http://alistapart.com/articles/cssdrop2/ by Sergio Villarreal

Este artigo é uma tradução do inglês. O original está em: http://www.phoenity.com/newtedge/drop_shadow/

Artigo por Lim Chee Aun

Texto na vertical usando CSSJunto com CSS3 chegam novos atributos para aplicar aos nossos documentos html.

É a vez de apresentar-lhes o writing-mode, que permite ajeitar um texto no sentido vertical.

Lamentavelmente o único explorador que o suporta é o Internet Explorer, por isso há que ter precaução em seu uso.

<style> #textovertical {writing-mode: tb-rl; filter: flipv fliph} </style>

Pode-se ver um exemplo em funcionamento em uma página a parte.

Atualmente utilizando CSS não poderemos solucionar este problema de uma maneira adequada para todos os meios. Visto que este exemplo só funciona com Internet Explorer, outros navegadores como Firefox ou Opera verão o texto na horizontal. Se nosso desenho for muito preciso, certamente não poderemos utilizar este exemplo, porque se o texto aparece algumas vezes na horizontal e outras na vertical, certamente acabará desenquadrando a página.

Uma possível solução a este problema seria salvar o texto como uma imagem, modificá-la com Photoshop ou com qualquer outro programa deste tipo, para colocar o texto na vertical. Logo, teríamos que adicioná-la à web tal como qualquer outra imagem. Desta forma o texto ficaria na vertical da mesma forma que com CSS e funcionaria em todos os navegadores.


Mudando o cursor do mouseNosso sistema operacional possui cursores por padrão. Aos cursores nos referimos ao ponteiro do mouse: a típica setinha ou qualquer outro desenho que possa ter.

No Windows podemos encontrar vários cursores que se ativam quando passamos por "certas zonas" de nossa tela. Por exemplo, quando nos posicionamos sobre um link, a típica setinha (denominada default em CSS) muda pela mãozinha (pinter). Como no exemplo anterior, podemos encontrar dezenas de situações onde nosso ponteiro muda de imagem.


39



http://www.criarweb.com/artigos/exemplos/css/textoverticalcss.html

http://www.phoenity.com/newtedge/drop_shadow/

http://alistapart.com/articles/cssdrop2/

http://1976design.com/blog/archive/2003/11/14/shadows/

http://alistapart.com/articles/cssdropshadows/


Com a ajuda das folhas de estilo podemos forçar ao nosso sistema operacional que não seja regido mais sob as normas convencionais dos ponteiros; conseguindo assim um atraente desenho onde o ponteiro de nosso mouse pode chegar a ser até uma imagem de nossa própria criação.

A seguir, pode-se observar a lista dos cursores disponíveis por padrão no Windows:

• default (seta) • crosshair (cruz) • e-resize (seta que aponta à direita) • hand (mão) • help (sinal de pergunta) • move (cruz com setas nas extremidades) • n-resize (seta que aponta para cima) • ne-resize (seta que aponta ao nordeste) • nw-resize (seta que aponta ao noroeste) • pointer (mão) • s-resize (seta que aponta para baixo) • se-resize (seta que aponta para o sudeste) • sw-resize (seta que aponta para o sudoeste) • text (I-beam) • w-resize (seta que aponta à esquerda) • wait (relógio de areia)

Assim como todas as propriedades da linguagem CSS, é possível definir o objeto aplicando-o a todo o documento ou somente a uma parte do mesmo.

A todo o documento:

<html> <title>Mudar o cursor</title> <head> <style type="text/css">  </style> </head> <body> </body> </html>

A alguns setores do documento:

<html> <title>Mudar o cursor</title> <head> </head> <body> <h4 style="cursor: default">default</h4> <h4 style="cursor: crosshair">crosshair</h4> <h4 style="cursor: pointer">pointer</h4> <h4 style="cursor: move">move</h4> <h4 style="cursor: nw-resize">nw-resize</h4> <h4 style="cursor: ne-resize">ne-resize</h4> <h4 style="cursor: n-resize">n-resize</h4> <h4 style="cursor: e-resize">e-resize</h4>


40




<h4 style="cursor: help">help</h4> <h4 style="cursor: text">text</h4> <h4 style="cursor: wait">wait</h4> </body> </html>

Também é possível utilizar um cursor personalizado:

<html> <title>Mudar o cursor</title> <head> <style type="text/css">  </style> </head> <body> </body> </html>



Caixa CSS para colocar conteúdoVamos fazer um artigo prático de CSS para mostrar uma maneira de fazer uma caixa com CSS para colocar conteúdos. A caixa terá um design especial que emoldure os conteúdos que colocarmos dentro.

O melhor para entender o que pretendemos fazer é ver o exemplo em funcionamento.

O exemplo que escolhemos poderia ser feito de várias maneiras, cada uma com suas vantagens e inconvenientes. Não obstante, nós vamos explicar a forma de fazê-lo que nos pareceu mais útil. Teria estas vantagens e inconvenientes:

Vantagens: A caixa pode crescer para baixa o quanto você desejar. Portanto não seria problema se tivéssemos que colocar mais ou menos texto, porque a caixa se ajustaria ao tamanho que tivéssemos.

Inconvenientes: A caixa tem uma largura fixa, que está marcada pelo tamanho das imagens que tivermos realizado. Se adicionarmos muitas camadas dentro desta caixa, pode dar problemas de projeção, embora não experimentamos este problema em nosso exemplos.

As imagens

Para realizar esta caixa utilizamos duas imagens. Uma para a parte de cima da moldura e outra para a parte de baixo da moldura. Estas imagens podem ser feitas com qualquer programa de edição de imagens, ajustando cores e formas ao aspecto de nossa própria página. As imagens que utilizamos são estas:


41



http://www.criarweb.com/artigos/exemplos/css/index.html

http://www.criarweb.com/artigos/exemplos/css/cursores.html


O código HTML

Realizamos o exercício utilizando duas camadas (etiqueta <DIV>), uma dentro da outra. Uma camada se chama "caixa acima", que terá o estilo da parte de cima da caixa, e outra "caixa abaixo", onde colocaremos os estilos necessários para o corpo da caixa e a parte debaixo. A camada principal é "caixaacima" e dentro estará a camada "caixaabaixo". Em "caixaabaixo" é onde colocaremos o texto para colocar dentro da caixa.

O código é o seguinte:

<div class="caixaacima"> <div class="caixaabaixo"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit …. </div> </div>

O código CSS

Para definir o aspecto de "caixaacima" e "caixaabaixo" foi utilizado CSS. Como comentávamos, em "caixaacima" se definem os aspectos da parte de cima da caixa e em "caixaabaixo" os da parte debaixo. Ademais, como "caixaacima" contém a "caixaabaixo", todos os estilos que tivermos definido em "caixaacima", também se herdarão em "caixaabaixo".

Este é o código de Folhas de estilo para este exemplo:

.caixaacima{ width: 600px; background-image: url("acima.gif"); background-position: top center; background-repeat: no-repeat; }

.caixaabaixo {


42




background-image: url("abaixo.gif"); background-position: bottom left; background-repeat: no-repeat; padding: 58px 75px 58px 69px; }

O exercício é bastante simples, mas é bastante útil. Podemos vê-lo em funcionamento em uma página à parte.

Publicamos no workshop de CSS outros artigos de interesse para mostrar como se pode realizar caixas projetadas com CSS com outros formatos.


Construção CSS com duas colunasVeremos como realizar uma construção com duas colunas utilizando CSS, sem usar tabelas. Além das duas colunas, para completar a estrutura típica de uma web, colocaremos um cabeçalho e um rodapé de página.

O exemplo pretende ser o início de uma série de artigos para mostrar como realizar diferentes tipos de planilhas, construindo com CSS ao invés de tabelas. Iremos publicando estes artigos em nosso Workshop de CSS.

Começamos mostrando os dois exemplos de construção que veremos neste artigo, sempre com duas colunas, deixando a coluna com os links da barra de navegação à esquerda ou à direita.

• Construção com duas colunas e links à esquerda • Construção com duas colunas e links à direita

O código HTML

O código HTML dos dois exemplos que adiantamos é o mesmo. Basicamente este:

<div id="container"> <div id="cabecalho"> Cabecalho 01 </div> <div id="corpo"> <div id="lateral"> <ul> <li><a href="#">Link 1</a> <li><a href="#">Vínculo 2</a> <li><a href="#">Outro link</a> <li><a href="#">Link maneiro</a> <li><a href="#">Mais links</a> <li><a href="#">Outro último</a> </ul> </div> <div id="principal"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ...... </div> </div> <div id="rodape">


43



http://www.criarweb.com/artigos/exemplos/css/duas-colunas-cabecalho-rodape-reves.html

http://www.criarweb.com/artigos/exemplos/css/duas-colunas-cabecalho-rodape.html






© 2006 CriarWeb.com </div> </div>

Pode-se ver que temos uma camada container, que engloba todo o código. Logo, dentro do container temos três blocos. O cabeçalho, o corpo e o rodapé de página. O cabeçalho e o rodapé são duas camadas tal qual, que ocupam todo o espaço do container. O lugar onde teremos as duas colunas é o corpo.

Dentro do corpo temos duas partes, para codificar cada uma das duas colunas. Uma parte, que chamamos de "lateral", com uma lista de links (seria a barra de navegação) e outra parte com o texto da página, que chamamos de "principal".

O código CSS

Como havíamos adiantado, veremos duas variantes de codificação com duas colunas, com os links à esquerda e à direita. Não obstante, a maior parte do código CSS de ambos exemplos é a mesma, pois só varia a declaração de estilos da camada "lateral" e da camada "principal".

Construir com os links à esquerda

Vejamos a codificação CSS para a página com os links à esquerda.

<style type="text/css"> BODY { font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10 0 10 0px; text-align: center; background-color: #ebebeb; } #container{ text-align: left; width: 770px; margin: auto; } #cabecalho{ background-color: #d0d0ff; color: #333300; font-size:12pt; font-weight: bold; padding: 3 3 3 10px; } #cuerpo{ margin: 10 0 10 0px; } #lateral{ width: 160px; background-color: #999999; float:left; } #lateral ul{ margin : 0 0 0 0px; padding: 0 0 0 0px; list-style: none; } #lateral li{ background-color: #ffffcc; margin: 2 2 2 2px; padding: 2 2 2 2px; font-weight: bold;


44




} #lateral a{ color: #3333cc; text-decoration: none; } #principal{ margin-left: 170px; background-color: #ffffff; padding: 4 4 4 4px; } #rodape{ background-color: #cccccc; padding: 3 10 3 10px; text-align:right; }

A parte que vamos remarcar é onde se define o estilo da lateral e a camada principal. Fazemos com que a lateral tenha um tamanho fixo de 160 píxel, mas o mais importante é que fazemos que "flutue" à esquerda com float:left;. Isto faz com que a lateral fique à esquerda e permite que o conteúdo inserido depois da lateral fique na mesma altura, porém à direita.

Por sua parte, para a camada principal, simplesmente se indica que tem uma margem à esquerda de 170 píxels. Isto faz com que se coloque ao lado da camada lateral, deixando um espaço em branco de 10 píxels. Tem uma margem de 170, dos que 160 são para o espaço que vai ocupar a camada dos links e 10 píxels de espaço entre a camada principal e a lateral.

Como a camada principal não tem definida sua largura, se fará tão grande quanto o container permitir.

Nota: Estas explicações não são completas de todo o exercício. Supomos que o leitor já tem assimilados alguns conceptos que foram explicados no Manual de CSS ou no Workshop de CSS.

Construir com os links à direita

Continuamos mostrando as mudanças que teríamos que fazer para construir a página com a coluna de links à direita. Simplesmente vamos mudar o código CSS das camadas lateral e principal.

#lateral{ width: 160px; background-color: #999999; float:right; } #principal{ background-color: #ffffff; padding: 4 4 4 4px; margin-right: 170px; }

Agora estamos indicando que a camada lateral flutue à direita. Por sua parte, na camada principal mudamos a margem que havia antes à esquerda para coloca-la à direita.

Podemos ver o exemplo em uma página a parte.

Desenho fluído

Até aqui neste artigo vimos como fazer um desenho com uma largura fixa. Se quisermos um


45



http://www.criarweb.com/artigos/exemplos/css/duas-colunas-cabecalho-rodape-reves.html


http://www.criarweb.com/manual/css/


desenho fluído (que se ajusta à largura da janela do navegador), bastaria tirar do container o atributo width: 770px;. Se não tiver definida uma largura, a camada container se ajustará ao tamanho da janela do navegador que tenha o visitante.

Ademais, temos que dar uma margem ao BODY, para que o container não se acople por completo à borda da janela. Por exemplo, podemos dar uma margem de 10 píxels a cada lado.

Teríamos agora esta declaração de estilos para o BODY e a camada "container":

BODY { font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10 10 10 10px; text-align: center; background-color: #ebebeb; } #container{ text-align: left; margin: auto; }

Podemos ver o exemplo em uma página à parte.


Construção CSS com três colunasContinuando nosso workshop de CSS, vamos ver agora como fazer uma estrutura de três colunas para uma página web. Esta é uma estrutura bastante típica de portal. Em uma das três costuma se situar a barra de navegação, na outra o conteúdo e na última, uma série de banners com promoções.

Seria bom ver o resultado que buscamos em uma página a parte.

Este artigo vai presupor que o leitor já compreende construção com CSS e que leu o artigo Contrução CSS com duas colunas. Vamos nos basear neste artigo para compor a página com CSS com três colunas.

Em linhas gerais, a possibilidade que vamos explorar a seguir para cosntruir uma web com três colunas, consiste no seguinte: Colocaremos a coluna da esquerda flutuando à esquerda, a coluna da direita flutuando à direita e por último colocaremos a parte principal, que aparecerá no centro da página.

O código HTML para fazer este exemplo será o seguinte:

<div id="container"> <div id="cabecalho"> Cabecalho 01 </div> <div id="corpo"> <div id="lateral"> <ul> <li><a href="#">Link 1</a> <li><a href="#">Vínculo 2</a>


46





http://www.criarweb.com/artigos/exemplos/css/maqueta3columnas/


http://www.criarweb.com/artigos/exemplos/css/duas-colunas-cabecalho-rodape-reves-fluido.html


<li><a href="#">Outro link</a> <li><a href="#">Link maneiro</a> <li><a href="#">Mais links</a> <li><a href="#">Outro último</a> </ul> </div> <div id="otrolado"> <img src="bannerlateral.gif" width="120" height="600" alt=""> </div> <div id="principal"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa ... </div> </div> <div id="rodape"> © 2006 CriarWeb.com </div> </div>

Vemos que a página contém três partes, o cabeçalho, o corpo e o rodapé. O cabeçalho e o rodapé serão colocados no documento ocupando toda a largura disponível. A parte onde colocaremos as três colunas é o corpo.

Dentro do corpo, como podemos ver, temos três camadas. A camada "lateral", que é a que pensamos colocar à esquerda. Logo está a camada "outrolado", que é a que planejamos colocar à direita. Por último está a camada "principal", que é a parte central. A camada "principal" aparecerá no centro, porque os dois lados estarão ocupados pelas camadas laterais.

O CSS que vamos utilizar para construir isso será o seguinte. É muito parecido ao exemplo de construção CSS co duas colunas. Logo o comentaremos.

BODY { font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10 0 10 0px; text-align: center; background-color: #ebebeb; } #container{ text-align: left; width: 770px; margin: auto; } #cabecalho{ background-color: #d0d0ff; color: #333300; font-size:12pt; font-weight: bold; padding: 3 3 3 10px; } #corpo{ margin: 10 0 10 0px; } #lateral{ width: 160px; background-color: #999999; float:left; } #lateral ul{ margin : 0 0 0 0px; padding: 0 0 0 0px;


47





list-style: none; } #lateral li{ background-color: #ffffcc; margin: 2 2 2 2px; padding: 2 2 2 2px; font-weight: bold; } #lateral a{ color: #3333cc; text-decoration: none; } #outrolado{ width: 120px; float: right; } #principal{ margin-left: 170px; background-color: #ffffff; padding: 4 4 4 4px; width: 460px; } #rodape{ background-color: #cccccc; padding: 3 10 3 10px; text-align:right; clear: both; }

Teremos um container, de 770 píxels (px) de largura, que é onde vamos colocar todas as camadas. Centraremos em explicar a zona do corpo, que é onde aparecerão as três colunas.

Vemos como a camada "lateral" tem definido uma largura de 160 px, e um float: left; para que flutue à esquerda. Vemos logo como a camada "outrolado" tem 120 px de largura e flutua à direita.

Logo vemos a camada "principal", que tem uma margem à esquerda de 170 px, para deixar um espaço vazio em relação à camada "lateral". 170 px porque a camada "lateral" ocupa 160 px de largura, mais 10 px que é o que realmente estamos colocando de margem. Na camada "principal" também definimos uma largura de 460 px, para que ocupe justamente o espaço vazio que fica no centro.

Pode-se ver o exemplo em funcionamento em uma página a parte.

Desenho fluido

Os desenhos fluidos são os que se ajustam à largura que tenhamos na janela do navegador. No exemplo anterior o desenho tinha uma largura fixa de 700 píxels e agora vamos fazer duas modificações para que o desenho se ajuste à janela do navegador.

Simplesmente teremos que tirar a definição de largura da camada "container".

#container{ text-align: left; margin: auto; }

Logo, também tiraremos a definição de alargura da camada "principal" e acrescentaremos o


48



http://www.criarweb.com/artigos/exemplos/css/maqueta3columnas/


atributo margin-right: 130px; para que a camada com o conteúdo central tenha uma margem em relação à camada que fica à direita. E 130 px porque a camada da direita ocupava 120 px, mais 10 px que é realmente a margem que estamos deixando.

#principal{ margin-left: 170px; background-color: #ffffff; padding: 4 4 4 4px; margin-right: 130px; }



Variação da construção com CSS com 3 colunasJá vimos no artigo anterior uma maneira de realizar uma construção com CSS com três colunas. Agora vamos realizar algumas mudanças simples para melhorar algo no código do anterior artigo.

Antes de mais nada, teríamos que explicar porquê estimamos que pode ser melhorado o exercício da construção com três colunas, tal como foi planejado anteriormente. Trata-se simplesmente de melhorar a organização do conteúdo da página de uma forma mais inteligente.

Eu gosto sempre de ver o aspecto que tem uma página web sem a folha de estilo em cascata, para ver se a informação tem sentido e ordem tal como foi colocado no código HTML. Ou seja, se está apresentada de uma forma adequada, embora não se visualize os estilos definidos no CSS.

Qualquer navegador que não tenha suporte a CSS mostrará a página sem nenhum estilo e todos os elementos aparecerão um atrás do outro segundo tenham sido colocados. Não é habitual que uma pessoa que tenha um navegador incompatível com folhas de estilo em cascata nos visite, porém para melhorar a acessibilidade das páginas, também convém que se leia bem, embora não se tenha acesso a CSS.

Assim se veria a construção CSS com três colunas sem a declaração de estilos que havíamos apresentado no anterior exemplo. Se clicamos no link, poderemos comprovar que aparece o banner vertical na parte superior da página, quando o interessante seria que aparecesse abaixo do conteúdo, pelo menos na minha opinião.

Variação do exercício anterior para construir com três colunas

Basicamente, vamos fazer uma construção com duas colunas, a esquerda, coma barra de navegação e a da direita, com o outro conteúdo. Na parte da direita, por sua vez, faremos duas colunas mais, uma à esquerda que terá o texto da página e outra à direita, com a barra lateral direita.

Na verdade, o exercício fica muito parecido. Vejamos o código HTML: <div id="container"> <div id="cabecalho"> Cabecalho 01 </div> <div id="corpo">


49



http://www.criarweb.com/artigos/exemplos/css/maqueta3columnas/construcao-tres-colunas-sem-css.html

http://www.criarweb.com/artigos/exemplos/css/maqueta3columnas/construcao-tres-colunas-sem-css.html



http://www.criarweb.com/artigos/exemplos/css/maqueta3columnas/index-fluido.html


<div id="lateral"> <ul> <li><a href="#">Link 1</a> <li><a href="#">Vínculo 2</a> <li><a href="#">Outro link</a> <li><a href="#">Link maneiro</a> <li><a href="#">Mais links</a> <li><a href="#">Outro último</a> </ul> </div> <div id="derecha"> <div id="principal"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. …… </div> <div id="otrolado"> <img src="bannerlateral.gif" width="120" height="600" alt=""> </div> </div> </div> <div id="pie"> © 2006 CriarWeb.com </div> </div>

A camada "direita" é a nova que criamos, onde colocamos tanto o texto principal como a camada do banner vertical.

O código CSS que variamos só afeta à camada "direita", que não estava criada anteriormente e à camada "principal", que é onde está o texto central. #direita{ margin: 0 0 0 170px; }

#principal{ background-color: #ffffff; padding: 4 4 4 4px; width: 460px; float: left; }

A camada "direita" tem uma margem de 170 pixels, para deixar espaço à barra de links da esquerda. A camada "principal", que antes tinha essa margem de 170 pixels, já não a necessita, porém, em troca colocamos o atributo float: left, para que flutue na parte da esquerda.

Definitivamente, é uma construção com duas colunas, na qual uma delas tem por sua vez outra construção com duas colunas.

Pode-se ver o exemplo em funcionamento em uma página a parte. Não vamos escrever o código fonte do exemplo inteiro. Porém, pode-se analisar tanto o HTML como o CSS através da opção "ver código fonte" do navegador.

Pode-se ver como ficaria esta construção com três colunas se o nosso navegador não for compatível com CSS.



50



http://www.criarweb.com/artigos/exemplos/css/maqueta3columnas/construcao-tres-colunas-melhorado-sem-css.html

http://www.criarweb.com/artigos/exemplos/css/maqueta3columnas/construcao-tres-colunas-melhorado-sem-css.html

http://www.criarweb.com/artigos/exemplos/css/maqueta3columnas/construcao-tres-colunas-melhorado.html


Caixa CSS com as esquinas arredondadasNeste artigo de CSS continuaremos um exercício anterior, no qual realizávamos uma caixa com CSS para colocar conteúdo. Com o mesmo esquema relatado no artigo anterior, vamos realizar outro tipo de caixa -com esquinas arredondadas-, mudando unicamente as imagens utilizadas.

Antes de começar a leitura deste artigo deve ser lido o artigo precedente.

Também é aconselhado ver o exemplo que vamos construir.

Caixa com esquinas arredondadas

O exemplo a seguir é para criar um container com esquinas arredondadas. Os arredondados das esquinas serão feitos com imagens, de maneira que se possa variar a cor da caixa com as mesmas imagens.

Para conseguir isto vamos utilizar as seguintes imagens:

Estas 2 imagens são transparentes, menos o arredondado dos lados, que tem a cor branca. Devido a isso, estas caixas com esquinas arredondadas só poderão ser utilizadas sobre um fundo branco. Se quisermos fazer uma caixa para utilizar sobre outro fundo, temos que refazer estas imagens mudando a cor branca.

O código HTML continua sendo o mesmo: <div class="caixaacima"> <div class="cajaabaixo"> Lorem ipsum dolor sit amet, consectetuer … </div> </div>

Agora vemos o código CSS. Têm poucas variações com respeito a do exemplo anterior: .caixaacima{ width: 600px; background-image: url("arriba.gif"); background-position: top center; background-repeat: no-repeat; background-color: #660000; color: #ffffff; } .caixaabaixo { background-image: url("abajo.gif"); background-position: bottom left; background-repeat: no-repeat; padding: 5px 5px 5px 5px; }

Há que observar que definimos uma cor de fundo na classe caixaacima. Se quisermos que a caixa varie de cor, simplesmente haveria que mudar essa cor de fundo.

O resultado pode ser visto em uma página a parte.



51



http://www.criarweb.com/artigos/exemplos/css/cajacss/caja3/






Caixa CSS com linha de borda arredondadaVamos realizar uma caixa com CSS, no temos uma linha que faz a borda, toda ao redor da caixa, com as esquinas arredondadas.

Trata-se de um exemplo um pouco mais sofisticado, que mudando as imagens, nos permitirá fazer mais variedade de caixas. Este exercício está baseado em um artigo precedente que deve ser lido antes, chamado caixa com CSS para colocar conteúdo.

Antes de começar, também podemos ver o exemplo que vamos realizar.

Para realizar este exercício vamos precisar de três camadas com três imagens que vamos colocar de fundo. As camadas e imagens serão colocadas acima, para criar os arredondados superiores, no meio, para criar a borda do meio e a camada de baixo, para criar os arredondados inferiores.

A camada do meio deve crescer mais ou menos dependendo do conteúdo que tivermos incluído dentro da caixa, quanto mais conteúdo tiver, maior será a camada.

As imagens que nós utilizamos são as seguintes:

O código HTML varia um pouco com relação ao que havíamos visto nos exemplos de caixas de artigos anteriores. Como dizíamos, agora participam 3 camadas diferentes. <div class="caixa"> <div class="caixaacima"> <div class="caixaabaixo"> Lorem ipsum dolor sit amet, consectetuer … </div> </div> </div>

O código CSS para definir a classe de estilo de cada uma das três camadas é o seguinte: .caixa { width: 482px; background-image: url("centro.gif"); background-repeat: repeat-y; }

.caixaacima { background-image: url("acima.gif"); background-position: top center; background-repeat: no-repeat; }

.caixaabaixo { background-image: url("abaixo.gif"); background-position: bottom left; background-repeat: no-repeat; padding: 15px 15px 15px 15px; }

As três camadas têm a imagem correspondente como fundo. Caixa é a classe para a camada principal, que tem o fundo que se deve repetir em um mosaico tudo o que fizer a caixa crescer.

Pode-se ver o exemplo em funcionamento em uma página a parte.


52








Construir uma galeria de fotos com CSSHoje em dia é cada vez mais comum contar com uma galeria fotográfica em nossa página web. Ao longo deste tutorial veremos duas propostas para fazer uma galeria de fotos vistosa e trivial de usar para nossos visitantes, construída integramente com código padrão HTML e CSS.

Construir a galeria utilizando camadas

Nesta primeira versão de nossa galeria fotográfica vamos empregar camadas como contêiner onde inserir cada uma das nossas miniaturas, junto com a informação que quisermos associar (título, descrição, etc.).

Para termos uma idéia mais clara do trabalho que vamos realizar o melhor seria ver o exemplo em funcionamento.

Como vem sendo habitual trabalhar com camadas usaremos outra camada contêiner para nossa galeria fotográfica coma intenção de organizar de forma lógica nosso desenho e englobar nosso conteúdo em um bloco que podemos manipular com estilos. Podemos limitar a largura desta camada contêiner e situá-la ao nosso gosto. Neste exemplo, não restringiremos nenhuma propriedade salvo as margens para conseguir que nossa construção se adapte a qualquer resolução. Os estilos para esta camada contêiner principal são:

#principal { margin:0 auto; }

Agora que já temos uma camada onde inserir as fotos, prepararemos o estilo para cada uma das miniaturas das fotos. Faremos flutuar cada uma das miniaturas com um float:left; para que se alinhem horizontalmente se ajustando na largura da janela. Dando-lhes margem, separamos uma das outras. Graças às camadas que contém as miniaturas das fotos que flutuam, se organizarão segundo a largura da janela, adaptando-se à resolução do usuário.

Uma primeira aproximação ao estilo para as miniaturas é:

.conteinerfoto { float:left; margin: 10px; padding:5px; }

O código HTML de nossa galeria tem o seguinte aspecto:

<body> <div id="principal"> <h3>GALERÍA CSS</h3> <div class="conteinerfoto"><a href="#"><img src="img/1.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem</span></div> <div class="conteinerfoto"><a href="#"><img src="img/2.jpg" border="0" alt=""/></a><br /><span>Descriçaõ da imagem</span></div> <div class="conteinerfoto"><a href="#"><img src="img/3.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem</span></div>


53



http://www.criarweb.com/artigos/exemplos/css/galeria/index2.html



<div class="conteinerfoto"><a href="#"><img src="img/4.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem</span></div> <div class="conteinerfoto"><a href="#"><img src="img/5.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem extranhamente longa</span></div> </div> </body>

Como se pode observar, acrescentamos uma descrição adicional com um <span>. Pode-se ver o aspecto desta primeira aproximação aqui.

Antes de melhorar a aparência do texto trabalharemos sobre a camada contêiner da foto para limitar sua largura e altura e assim conseguir a aparência de mosaico típica das galerias de fotos. Centralizaremos o conteúdo dentro desta camada, lhe adicionamos estilo à cor de fundo e duas bordas (em nosso caso inferior e direito) para dar a cada miniatura aparência de profundidade:

.conteinerfoto { float:left; width:210px; height:180px; margin: 10px; padding:5px; background-color:#f5f7f9; border-right: #a5a7aa solid 1px; border-bottom: #a5a7aa solid 1px; text-align:center; }

Agora já temos nossa galeria com uma aparência mais apropriada, como se pode ver no exemplo terminado aqui. Para este exemplo, usamos para mostrar as miniaturas umas dimensões proporcionais à resolução típica.

Artigo por Javier Chaure

Construir uma galeria de fotos com CSS usando listasUma galeria de fotos afinal das contas não passa de uma lista de elementos (em nosso caso imagens) que mostraremos como melhor nos convenha. Desde o ponto de vista da ordenação lógica da informação em nossas páginas resulta razoável usar uma lista para estruturar nossos elementos, portanto ao longo desse tutorial veremos o potencial das listas para construir eficientemente casos como este de nossa galeria.

Podemos ver o resultado final deste exemplo, para termos uma idéia exata do que pretendemos conseguir.

Referência:Este exemplo continua outro no qual explica como fazer uma galeria de fotos utilizando camadas como contêiner.

Normalmente estamos acostumados a ver as listas organizadas verticalmente, porém CSS nos permite jogar com os elementos de uma lista para mostra-os de diferentes maneiras. Em nosso caso, provavelmente se organizássemos a lista verticalmente a aparência de nossa galeria ficaria estranha comparada com uma organização horizontal, tal como vimos no exemplo da galeria fotográfica com camadas. Portanto, organizaremos nossa lista


54





http://www.criarweb.com/artigos/exemplos/css/listas/index2.html






horizontalmente, aplicando um display: inline e flutuando os elementos à esquerda para que fluam uns seguidos de outros.

Partimos do seguinte código HTML:

<body>: <div id="principal"> <h3>GALERIA CSS - Listas</h3> <ul> <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descrição da imagem</span></a></li> <li><a href="#"><img src="img/2.jpg" border="0" alt=""/><br /><span>Descrição da imagem</span></a></li> <li><a href="#"><img src="img/3.jpg" border="0" alt=""/><br /><span>Descrição da imagem</span></a></li> <li><a href="#"><img src="img/4.jpg" border="0" alt=""/><br /><span> Descrição da imagem mais longa que o habitual</span></a></li> <li><a href="#"><img src="img/5.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li> <li><a href="#"><img src="img/6.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li> <li><a href="#"><img src="img/7.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li> <li><a href="#"><img src="img/8.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li> <li><a href="#"><img src="img/9.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li> <li><a href="#"><img src="img/10.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li> <li><a href="#"><img src="img/11.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li>

</ul> </div> </body>

Como se pode apreciar, inserimos dentro de cada <li> (list item) nossa imagem e um comentário acrescentado com um <span>, tal como fizemos no tutorial da galeria fotográfica com camadas.

Nossa redefinição de estilos para as listas ficaria da seguinte maneira:

#principal li { display:inline; float:left; }

Note que as típicas vinhetas que aparecem associadas às listas desordenadas desaparecem quando aplicamos o display:inline, da mesma forma que se tivéssemos usando um list-style:none. Pode-se ver o resultado de aplicar estes estilos aqui . O comportamento de nossos elementos da lista (os list ítems <li>) é parecido com o das camadas agora.

Podemos modificar as propriedades que quisermos para conseguir que a aparência de cada um dos elementos da lista se ajuste ao nosso objetivo. Baseando-nos nos estilos que aplicamos no exemplo da galeria fotográfica com camadas, mudamos a cor de fundo, a largura de cada <li>, lhes damos margin e padding para apresenta-los corretamente e damos estilo às bordas para conseguir aparência de profundidade.

Deste modo a definição de estilos para nossa lista de fotos fica assim:


55





#principal li { display:inline; float:left; width:220px; background-color:#f5f7f9; padding:5px; margin:10px; text-align: center; border-right: #a5a7aa solid 1px; border-bottom: #a5a7aa solid 1px; }

E como podemos ver no resultado final aqui, fica perfeitamente construída, adaptável a distintas resoluções e com um código limpo e fácil de entender.

Artigo por Javier Chaure

Criação de gráficos de barras com CSS para a construçãoCom CSS pode-se construir uma página web, através da própria estrutura da página até elementos mais específicos como um gráfico de barras. Como no caso deste artigo, que utilizando posicionamento CSS vamos definir a colocação e o tamanho de elementos que podem nos ajudar a construir um gráfico de barras. Utilizaremos camadas para realizar os gráficos, uma para o fundo do gráfico e dentro deste, outras camadas para cada uma das barras.

Ou seja, não vamos utilizar nem imagens nem tabelas, e sim simplesmente etiquetas

as quais lhes aplicaremos posicionamento e estilos para criar uns gráficos bastante vistosos.

Para não ter confusão, há que aclarar que neste exemplo não vamos criar um código especial para fazer um sistema de geração de gráficos de barras para páginas web. Ao invés disso, o objetivo é simplesmente explicar o modo no qual poderíamos construir um gráfico de barras com CSS e camadas.

O exemplo que vamos construir pode-se ver em uma página a parte .

Gráfico de barras CSS 1

Vejamos um primeiro gráfico, que expressaria as visitas em um dia da semana a um suposto website. O código HTML seria este:

<div id=container1 class=gris> <div id=titulo1>Visitas por dia</div> <div id=grafica1 class=degradeverde> <div id=segunda-feira class=verde> Segunda-feira 390</div> <div id=terça-feira class=verde> Terça-feira 423</div> <div id=quarta-feira class=verde> Quarta-feira 412</div> <div id=quinta-feira class=verde> Quinta-feira 459</div> <div id=sexta-feira class=verde> Sexta-feira 405</div> <div id=sabado class=verde>Sábado 320</div> <div id=domingo class=verde>Domingo 302</div> </div> </div>


56



http://www.criarweb.com/artigos/exemplos/css/graficas_css/



Como se pode observar, temos um <div>, ou camada com um container, onde vai se situar por sua vez <div> com um título e outro para o gráfico das barras. Temos dentro do gráfico outras tantas camadas, uma para cada dia da semana.

O código CSS será o encarregado de aplicar formato a estas camadas para que se apresentem como um gráfico de barras. Combinamos tanto os estilos com classes como os de identificadores. Nas classes colocamos os estilos que são comuns e que poderíamos repetir em várias camadas e nos identificadores especificamos estilos próprios exclusivos para a camada. Vejamos primeiro os estilos dos identificadores.

O container simplesmente tem definido uma posição relativa, uma largura e um espaço de margem com padding.

#container1{ position: relative; padding:5px; width: 524px; }

Dentro do container temos o título, que simplesmente define um tipo de letra e uma margem.

#titulo1{ font: bold 10pt Verdana, Tahoma, Arial; margin:2 0 5 0px; }

Ainda assim temos uma camada com o gráfico. Esta camada é a que têm adicionadas em sua vez outras 7 camadas com as barras. Nos estilos do gráfico temos uma largura, um espaçamento acima e abaixo e um formato de texto.

#grafico1 { width: 500px; padding:10 0 10 0px; font: bold 8pt Verdana, Tahoma, Arial; }

Agora veremos cada uma das camadas com os dias da semana. O importante é ver que cada camada tem uma largura, que deve de ser proporcional ao valor que se deseja mostrar na barra. Neste caso fazemos corresponder a largura da camada com as visitas que foi obtido neste dia da semana. A altura é sempre a mesma e a margem acima e abaixo também.

#segunda-feira{ width: 390px; height: 18px; margin: 5 0 5 0px; } #terça-feira{ width: 423px; height: 18px; margin: 5 0 5 0px; } #quarta-feira{ width: 412px; height: 18px; margin: 5 0 5 0px; } #quinta-feira{ width: 459px;


57




height: 18px; margin: 5 0 5 0px; } #sexta-feira{ width: 405px; height: 18px; margin: 5 0 5 0px; } #sabado{ width: 320px; height: 18px; margin: 5 0 5 0px; } #domingo{ width: 302px; height: 18px; margin: 5 0 5 0px; }

Agora vejamos os estilos que colocamos por meio de classes. Como dizia, utilizamos as classes quando temos estilos que poderiam ser utilizados em outras capas. Neste caso a cor de fundo e a borda das barras são o único estilo que é comum a várias camadas, porque o temos igual em todas as barras. Entretanto, também tiramos às classes do fundo cinza do container e do verde do gráfico porque na prática poderia ser utilizado para aplicar estilos em outros gráficos.

Os estilos simplesmente definem uma cor de fundo e umas bordas escuras pela parte debaixo e à direita e mais claros por encima e à esquerda, assim se consegue um efeito degrade.

.cinza{ background-color: #b5b5b5; border-bottom: 2px solid #6b6b6b; border-right: 2px solid #6b6b6b; border-top: 2px solid #f0f0f0; border-left: 2px solid #f0f0f0; } .roxo{ background-color: #a05aab; border-bottom: 2px solid #672770; border-right: 2px solid #672770; border-top: 2px solid #d090d9; border-left: 2px solid #d090d9; } .degradeverde{ background-color: #e1e455; background-image: url('images/degrade-verde.jpg'); background-repeat: repeat-x; border-bottom: 2px solid #6f722d; border-right: 2px solid #6f722d; border-top: 2px solid #ece996; border-left: 2px solid #ece996; }

Como pode ser visto, na classe degradeverde foi definido ainda uma imagem de fundo com um degrade, para melhorar o desenho do gráfico fazendo-o menos plano. Utiliza-se o atributo background-repeat: repeat-x; para que o fundo se repita só pela coordenada da x.

Podemos ver o exemplo em funcionamento em uma página à parte.

Isto é tudo. Deixaremos para um artigo posterior outro gráfico um pouco mais elaborado, com


58





mais cores e mais detalhes como uma legenda. Continuaremos então trabalhando na construção de gráficos de barras com posicionamento CSS.


Estilizando formuláriosUma das perguntas mais freqüentes quando se fala de design sob CSS é como podem se estilizar os formulários já que em muitas ocasiões é a parte de um site que não fica de acordo com o estilo do resto dos elementos. Por isto, nesta minha primeira colaboração para CSS Boulevar decidi que seria boa idéia escrever a respeito.

Na verdade a estilização de formulários é mais simples do que parece, entretanto, necessitam-se de um par de truques para adquirir a aparência que queremos, a qual ainda está limitada por certas características que nem todos os navegadores atuais suportam.

Para começar, o primeiro que temos que fazer é fazer o desenho de como vamos querer que seja visto nosso formulário. Desde este ponto teremos que levar em conta muitas considerações que vermos mais adiante e que para este caso não foi levado em conta de propósito por se tratar de um exemplo no qual há que ressaltar estas limitações.

Aqui podemos ver uma imagem do design inicial.

A Marcação

O código (X)HTML deste exemplo não tem muito mistério, unicamente trata-se de um formulário com 4 campos, algo típico de um sistema de comentários, fica algo como o seguinte:

<form name="formulario" id="formulario" method=""> <label for="nombre">Nome:</label> <input type="text" id="nome" class="campo" /> <label for="email">E-mail:</label> <input type="text" id="email" class="campo" /> <label for="url">URL:</label> <input type="text" id="url" class="campo" /> <label for="comentario">Comentario:</label> <textarea id="comentario" class="campo"></textarea> <br /> <input type="submit" id="boton_enviar" name="enviar" value="Enviar" /> </form>

A única coisa que há que ressaltar é a falta de definição do tamanho dos campos de texto, isto será feito através das CSS, portanto não será necessário defini-los nesse momento.

Estilizando

Aplicar estilos a formulários não é diferente de fazer com qualquer outro elemento, para começar, unicamente vamos agregar cor ao fundo da página para ver como esta nosso formulário inicialmente neste primeiro passo. body { background: #A0CE00; }

Como podemos ver nosso formulário está desordenado e não se vê nada bem. O primeiro que vamos fazer é organiza-lo, para facilitar depois o resto do processo. Vamos desmembrar as etiquetas como block para que simulem as mudanças de linha além de definir um pouco o estilo geral do formulário.

form { padding: 50px; background: #84AA00; width: 250px; }


59



http://www.criarweb.com/artigos/exemplos/css/1.html

http://www.criarweb.com/artigos/exemplos/css/disenio_inicial.html


label { font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #FFF; display: block; } .campo { margin-bottom: 20px; }

Assim é como se vê nosso formulário atualmente, já está organizado, porém continua simples e o seguinte passo será muda-lo.

A primeira parte importante para estilizar as caixas de texto é esconder o que temos por default, isto vai nos permitir mais liberdade já que na verdade o truque se trata exatamente de substituir as caixas com uma imagem. Para que as caixas se escondam, sem perder funcionalidade vamos fundi-las com a cor de fundo mudando tanto as bordas como o fundo.

.campo { width: 254px; height: 30px; margin-bottom: 20px; border: 1px Solid #84AA00; background: #84AA00; } #comentario { width: 294px; height: 193px; }

Neste terceiro exemplo, nosso formulário parece não existir, entretanto se movemos um pouco o cursor vemos que continua estando aí.

Agora sim chegou a parte divertida, a seguinte tarefa será adicionar as imagens como fundo, um simples background-image bastará para conseguir o efeito.

.campo { width: 254px; height: 30px; margin-bottom: 20px; border: 1px Solid #84AA00; background: #84AA00; background-image: url(f1.jpg); background-repeat: no-repeat; padding: 2px; color: #669966; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #comentario { width: 254px; height: 193px; background-image: url(f2.jpg); background-repeat: no-repeat; }

Adicionamos o atributo padding para que o texto não fique totalmente grudado na imagem além de mudar a cor, tamanho e fonte do texto como detalhes.

O único que nos falta é o botão de enviar, o processo é o mesmo, o extra neste caso é a indentação do texto no caso em que não quisermos que este seja visto.

#botao_enviar { width: 88px; height: 27px; margin-left: 80px; background: #84AA00; border: 1px Solid #84AA00; background-image: url(boton.jpg); text-indent: -9999px; }

Extras

Basicamente o formulário está pronto, vamos agregar um pequeno efeito para que se veja ainda melhor. Fiz duas imagens extras sem sombreado que se utilizam quando o usuário passa o cursor sobre a caixa de texto.

.campo:hover { background-image: url(f3.jpg); } #comentario:hover { background-image: url(f4.jpg); }

Se estiver utilizando um bom navegador, o efeito é visto sem problema algum pero en Internet Explorer la situación es diferente ya que como sabemos, no reconoce el uso de hover en elementos que no sean enlaces, sin embargo, no hay ningún problema pues se sigue viendo la imagen inicial.

Aqui está nosso exemplo finalizado, podem combina-lo com outros efeitos como a decoração do drop-down menu para conseguir formulários que sejam bem vistos.

Como mencionei ao princípio, ainda encontramos muitos problemas ao estilizar formulários, neste exemplo, podemos ver que as barras de scroll na área de texto podem chegar a ser mal vistas e infelizmente, estas não são estilizáveis mais que em IE. Entretanto, com um pouco de imaginação e uns simples hacks podemos conseguir efeitos para que os formulários fiquem de


60



http://www.criarweb.com/artigos/exemplos/css/ejemplo.html




acordo com o estilo do site.

Artigo por Héctor A. Pinto F

Realizar um rollover só com CSS e utilizando imagensVamos mostrar um pequeno truque para criar um efeito de rollover com imagens, porém usando um simples CSS, sem a necessidade de nenhuma outra tecnologia ou linguagem de programação. O rollover (iluminação ou mudança de cor ao passar o mouse por cima) é um feito muito simples, porém, pode dar idéias para dar maior dinamismo ao nosso site, sem que isto afete a complexidade do código.

Ademais, de passo, vamos responder uma pergunta habitual: como fazer para que os links ocupem todo o espaço da célula ou camada onde estão situados? Ou dito de outra forma: como fazer para que o link se mostre com todo o espaço disponível dentro do container no que está?

O que desejamos é que o lugar onde colocamos o link se comporte como o próprio link, assim, ao passar o mouse pelo container onde estiver situado o link (não necessariamente sobre o texto do link), se realize o efeito de iluminação.

O melhor que podemos fazer é ver o exemplo em funcionamento. Vale a pena prestar atenção a que o link muda de cor ao passar o mouse encima, porém, não faz falta se situar sobre o texto do link para que mude, e sim que serve ao posiciona-lo sobre a camada onde foi colocado o link.

O código HTML

Para realizar este efeito foi criado um código HTML como o seguinte:

<div class=navegador> <p class=navlink><a href="#">Link 1</a></p> <p class=navlink><a href="#">Link legal</a></p> <p class=navlink><a href="#">Outras coisas</a></p> </div>

Temos uma camada com estilo "class=navegador" e dentro desta, três parágrafos com estilo "class=navlink". A classe navegador conterá estilos gerais para toda a barra de navegação e os parágrafos, com classe navlink, conterão os estilos de cada linha do navegador.

Vimos que o HTML é bastante simples. Agora só temos que aplicar uns estilos bonitos para realizar o efeito buscado.

Estilos CSS

Comecemos pela camada geral, com classe "navegador", onde vamos utilizar uma declaração de estilos como esta:

.navegador{ margin-left: 39%; margin-right: 42%; }


61



http://www.criarweb.com/artigos/exemplos/css/navegador_rollover.html


Simplesmente, estamos lhe indicando umas margens, para que se situe onde nós quisermos, que é mais ou menos no centro da janela do navegador.

Agora vejamos a declaração do estilo da classe navlink, que é o estilo que damos a cada linha de link da barra de navegação.

.navlink { font-weight: bold; border: 1px solid #999999; margin:3 0 3 0px; padding: 2px; }

Simplesmente indicamos em negrito, uma borda de 1 pixel, assim como uma margem e um padding.

Agora, para cada link definimos dois estilos. Um para os links em geral e outro para os links "hover", que são os que têm o mouse encima deles. Deste modo, os links sempre serão vistos de um mesmo modo e quando se colocar o mouse encima de um deles se ativará o estilo definido em hover.

.navlink a { background-image: url("nav-fundo2.gif"); color: #666666; text-decoration: none; display: block; width: 100%; }

.navlink a:hover { background-image: url("nav-fundo.gif"); color: #ffffcc; }

No primeiro caso (.navlink a) se indica o estilo para os links em geral. Simplesmente definimos uma imagem de fundo "nav-fundo2.gif" para os links, uma cor para o texto do link, que não apareçam sublinhados e, o mais importante, que se comportem como um bloco, que se indica com o atributo display: block;

Os links, ao se comportarem como um bloco se produzirá o efeito que estávamos buscando: que não precisa se posicionar sobre o texto do link para que mude o estilo, simplesmente o fará ao posicionar-se no container onde estão situados. Com isso, também conseguimos que o estilo dos links se transfira a todo o container. Além disso, também definimos a largura dos links a 100%, para certificarmos que ocupem todo o espaço do container onde estão situados.

No segundo caso (.navlink a:hover) simplesmente definimos um estilo distinto, utilizando uma imagem de fundo e uma cor diferente para os links. A imagem chamada "nav-fundo.gif" se mostrará como fundo do espaço onde está colocado o link. Só se modificará o estilo do link sobre o que tivermos colocado o mouse e não o dos outros links da barra de navegação.

Com isto já está feito tudo. É realmente simples. Foi provado no Internet Explorer e no Mozilla Firefox.

Agora queria comentar que também pode-se dar uma largura definida à camada onde estão todos os links, <div class=navegador>, utilizando o atributo width. Isto dá problemas no


62




Internet Explorer na hora dos links se comportarem como um bloco, com o qual só se ativará se colocarmos o mouse no texto do link. A solução para Internet Explorer, é justamente atribuir o atributo width: 100% aos links, na classe "navlink". Este atributo width: 100% para Firefox é indiferente, com o qual o problema fica resolvido para os navegadores mais comuns.

Para finalizar, podemos ver o exemplo em uma página a parte.


CSS para campos textarea de formulárioCom as folhas de estilo CSS pode-se configurar o aspecto de cada elemento de uma página web, de uma maneira muito detalhada. Neste workshop de CSS vamos aplicar estilos aos elementos de formulário Textarea, que são caixas de texto de várias linhas. Veremos vários estilos aplicados sobre textarea, comentando suas distintas propriedades CSS.

O objetivo deste workshop não é explicar o modo de trabalho com CSS, e sim, praticar com determinados atributos sobre os textarea. Pode-se encontrar informação básica para aprender a manejar as folhas de estilo em nosso Manual de CSS. Também dispomos de outros Workshops de CSS, onde se poderá aprender a utilizar esta tecnologia na prática.

Antes que nada, podemos ver a página aonde estão aplicados os diferentes estilos que vamos comentar sobre elementos textarea.

Um textarea é um elemento de formulário, logo à princípio deveríamos coloca-los entre <form> e </form>. O código HTML mais básico para um textarea é o seguinte: <textarea class=estilotextarea></textarea>

Já lhe aplicamos uma classe de estilos CSS (estilotextarea), que definiremos na declaração de estilos da página: .estilotextarea {width:400px;height:100px;border: 2px solid #990000;}

Nesta declaração de estilos indicamos que a largura da caixa de texto seja de 400 pixels e que a altura seja de 100 pixels. Também indicamos uma borda de 2 pixels de tamanho e de cor vermelho escuro.

O efeito é o seguinte:

Agora vejamos outro código HTML para incluir um textarea. <textarea class=estilotextarea2 cols="60" rows="8"></textarea>

Neste caso, à parte que a classe para definir o estilo do textarea mudou (estilotextarea2), também está sendo indicado umas filas e umas colunas como tamanho do textarea, com os atributos cols e rows. Como os textarea são linhas de texto de várias linhas, com cols indica-se o número de caracteres em horizontal do textarea e com rows o número de filas ou linhas.

Agora o estilo para este textarea seria o seguinte: .estilotextarea2 {width:300px;height:80px;border: 1px dotted #000099;}

Observamos que com CSS redefinimos a largura e altura, com os atributos width e height. Entretanto, entre a definição com HTML da altura e largura em caracteres do textarea, e a definição com CSS da altura e largura em pixels, manda o que tiver sido definido com CSS. Isto é assim geralmente em todos os casos de estilos que se redefinem com CSS, sempre acabam sendo as folhas de estilo as que predominam no aspecto dos elementos das webs.


63



http://www.criarweb.com/artigos/exemplos/css/csstextarea.html

http://www.criarweb.com/artigos/exemplos/css/csstextarea.html



http://www.criarweb.com/artigos/exemplos/css/navegador_rollover.html


Ademais, declaramos uma borda com linha de pontos de 1 pixel de largura no textarea, de cor vermelho escuro. O aspecto final deste textarea será o seguinte:

Agora vejamos um terceiro exemplo de textarea. Primeiro seu código HTML: <textarea class=estilotextarea3 cols="30" rows="8">Texto de prova</textarea>

Este textarea tem a particularidade que aparecerá com um texto escrito dentro. Ou seja, quando se visualizar na página web, ao invés de estar vazio, terá escrito o que colocamos entre <textarea> y </textarea>, "Texto de prova".

A classe que define o estilo deste textarea pode-se ver a seguir: .estilotextarea3 {font-family: Garamond,verdana;font-size: 18pt;font-weight: bold;letter-spacing: 5px;}

Como se pode ver, foram definidos nesta ocasião vários estilos para as tipografias que serão utilizadas no texto do textarea. Neste caso, foi definida uma fonte garamond, e como padrão, verdana. Um tamanho do texto de 18 pontos, negrito, e um espaçamento entre letras de 5 pixels.

O resultado pode ser visto a seguir.

Texto de prova

Para acabar, veremos um último textarea ao qual vamos colocar o fundo transparente e no qual vamos modificar as cores das barras de deslocamento do textarea. <textarea class=estilotextarea4 cols="30" rows="5"></textarea>

Para definir o estilo utilizamos o seguinte CSS: .estilotextarea4 {background-color: transparent;border: 1px solid #000000;scrollbar-arrow-color: #000066;scrollbar-base-color: #000033;scrollbar-dark-shadow-color: #336699;scrollbar-track-color: #666633;scrollbar-face-color: #cc9933;scrollbar-shadow-color: #DDDDDD;scrollbar-highlight-color: #CCCCCC;}

A cor de fundo é transparente, pelo atributo background-color: transparent; isto quer dizer, que a cor do textarea tem a mesma cor que o fundo da página onde está colocado. Se tivermos o textarea colocado sobre um fundo branco, não observaremos nenhuma diferença com respeito a outros textareas, mas se o tivermos sobre um fundo de outra cor, o textarea se verá dessa mesma cor. Logo, foi aplicada uma borda de um pixel negro e com os restantes atributos se modifica a cor das barras de deslocamento do textarea. Atenção, que os estilos para barras de deslocamento só funcionam no Internet Explorer.

O resultado pode ser visto a seguir:

Com estes exemplos podemos ver algumas interessantes declarações de estilos para elementos textarea de formulário. Esperemos que sirva para fazer seus próprios formulários com mais estilo. Aliás, no Workshop de CSS temos exercícios para aplicar estilos a outros elementos de formulário, como os artigos Decorar um campo select de formulário com CSS, Estilizando formulários ou Estilos em campos de texto.


CSS para imprimir páginas webÀs vezes necessitamos que nossa página se imprima em uma impressora de maneira diferente de como se visualiza na página web. Por exemplo, se em uma página mostra-se um informe com dados que se deseja guardar impresso em papel, provavelmente desejaremos que na impressora se mostre com uma fonte menor, para que se possa comprimir todo o conteúdo de


64








forma que caiba em uma folha. Também é possível que desejemos que apareça nos informes o logo da companhia centralizado no cabeçalho do informe.

Tudo isto pode ser feito com CSS. As Folhas de Estilo em Cascata servem para definir o aspecto da página, e estes estilos podem ser declarados de maneira distinta na hora de imprimir um documento e na hora de vê-lo no navegador.

Com CSS pode-se definir estilos em um documento externo, desta maneira:

<link href="estilos.css" rel="stylesheet" type="text/css">

Com isto supomos que temos um arquivo chamado estilos.css, que está no mesmo diretório da página, onde se definem os estilos do documento.

Referência: As diferentes maneiras de incluir estilos em uma web estão comentadas em nosso Manual de CSS.

De modo parecido, podemos atribuir uma folha de estilos externa para definir o aspecto quando um usuário imprime a página web:

<link href="estilos_impressao.css" rel="stylesheet" type="text/css" media="print">

O único que muda é o atributo media="print", que indica que esta folha de estilos é só para quando vai se imprimir a web.

Exemplo de duas folhas CSS distintas para impressão e visualização

Agora vejamos um exemplo de página web que tem duas folhas de estilo diferentes, uma para quando se está no navegador e outra quando vai se imprimir.

O exemplo pode-se ver em funcionamento em uma página a parte.

Temos um HTML que inclui duas folhas de estilos e dispõe de várias camadas, que logo construiremos ou posicionaremos com CSS.

<html> <head> <title>informe super quebra-cabeça</title> <link rel="STYLESHEET" type="text/css" href="estilo.css"> <link rel="STYLESHEET" type="text/css" href="estilo_imprimir.css" media="print"> </head>

<body>

<div id="container"> <div id="cabecalho"> Super quebra-cabeça </div> <div id="logo"> <img src="logo.gif"> </div> <div id="corpo"> <div id="lateral"> <ul> <li><a href="#">Link 1</a> <li><a href="#">Vínculo 2</a> </ul>


65



http://www.criarweb.com/artigos/exemplos/css/css_imprimir/




</div> <div id="direita"> <div id="principal"> Conteúdo de um possível informe </div> </div> </div> <div id="rodape"> © 2007 CriarWeb.com </div> </div>

</body> </html>

Como pode ser visto no HTML anterior, foram incluídos dois arquivos CSS com estilos. O primeiro é estilo.css, que é o estilo que se utilizará ao visualizar a página no navegador. O segundo link com uma folha de estilos CSS é estilo_imprimir.css, que definirá o aspecto da página ao imprimi-la (observe o atributo media="print" da etiqueta).

Os códigos CSS são muito parecidos, simplesmente fizemos duas mudanças para ilustrar o que vínhamos dizendo. Na visualização da página não se mostrará a camada com id="logo". Por sua parte, ao imprimir a página não se mostrará a barra de navegação da esquerda e os conteúdos centrais se mostrarão em toda a largura do espaço de impressão. Também não se mostrará a camada id="cabecalho".

O código CSS de visualização no navegador

BODY { font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10 0 10 0px; text-align: center; background-color: #ffffff; } #container{ text-align: left; width: 770px; margin: auto; } #cabecalho{ background-color: #d0d0ff; color: #333300; font-size:12pt; font-weight: bold; padding: 3 3 3 10px; }

#logo{ visibility:hidden; display: none; }

#corpo{ margin: 10 0 10 0px; } #lateral{ width: 160px; background-color: #d0d0ff; float:left; } #lateral ul{ margin : 0 0 0 0px;


66




padding: 0 0 0 0px; list-style: none; } #lateral li{ background-color: #ffffff; margin: 2 2 2 2px; padding: 2 2 2 2px; font-weight: bold; } #lateral a{ color: #3333cc; text-decoration: none; }

#rodape{ background-color: #cccccc; padding: 3 10 3 10px; text-align:right; clear: both; }


#principal table{ background-color: #ffffff; width: 580px; border: 2px solid #cccccc; font-size:10pt; }

O código CSS que se utilizará para a impressão da página

BODY { font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10 0 10 0px; text-align: center; background-color: #ffffff; } #container{ text-align: left; width: 600px; margin: auto; } #cabecalho{ visibility:hidden; display: none; }

#logo{ visibility:visible; display: block; margin-left: 20px; }

#corpo{ margin: 10 0 10 0px; } #lateral{ visibility:hidden; display: none;


67




}

#rodape{ background-color: #cccccc; padding: 3 10 3 10px; text-align:right; clear: both; }


#principal table{ background-color: #ffffff; width: 600px; border: 2px solid #cccccc; font-size:10pt; }

Novamente, colocamos o link para que se possa ver a página do exemplo de estilos de impressão CSS.

Nota: Se quisermos ver como se imprimiria a página, porém sem a necessidade de utilizar a impressora (para não gastar papel nem tinta ou se não tivermos impressora), podemos acessar ao menu Arquivo - Visualizar impressão ).

Esperamos que este workshop de CSS para imprimir tenha sido útil. Queremos lhes dar um link a outro workshop no qual se explica como evitar, com CSS, que uma página se imprima.


Gerar colunas com CSS de uma lista sem tabelasÉ um truque simples, porém engenhoso para fazer com que as listas mostrem-se em várias colunas. Nós colocamos três colunas, porém poderiam ser criadas quantas desejássemos.

Trata-se simplesmente de criar uma lista e definir com estilos CSS a largura de seus elementos. Definiremos a largura dos elementos <LI> como um 30% do total de largura da lista.

Os estilos CSS que colocaremos são os seguintes. Primeiro veremos o estilo para o qual é a lista <UL> e logo os dos elementos da lista <LI>:

UL.col3 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 15px 0px; WIDTH: 100%; PADDING-TOP: 0px; LIST-STYLE-TYPE: none }


68







UL.col3 LI { PADDING-RIGHT: 2px; DISPLAY: inline; PADDING-LEFT: 2px; FLOAT: left; PADDING-BOTTOM: 2px; WIDTH: 30%; PADDING-TOP: 2px }

Para criar várias colunas em CSS define-se no estilo UL.col3 LI, onde o width é o tamanho de cada coluna. Assim automaticamente irão se criando as colunas. Como colocamos um 30%, o espaço onde esteja a lista se dividirá em três colunas, sem a necessidade de utilizar tabelas.

O HTML ficaria assim para a lista:

<ul class="col3"> <li>O que for</li> <li>Segunda opcao</li> <li>Terceira coisa</li> <li>Outra coisa, que aparecerá na primeira coluna</li> <li>Outra coisa para a segunda coluna</li> <li>E isto para a terceira coluna</li> </ul>

Artigo por Pol Salvat

Molduras para fotos com CSSNeste workshop de CSS vamos criar uma série de 4 molduras para fotos, que podemos utilizar em uma página web para melhorar a presença, porém sem complicar nossa vida. Uma vez escolhida a moldura que mais gostemos, podemos utiliza-la repetidas vezes na página para que todas as fotos sejam vistas de maneira parecida e ganhe também um pouco de personalidade o design da web.

Para fazer esta série de molduras, evitamos o uso de imagens adicionais, só as fotografias, o que faz com que o desenho seja mais fácil de aplicar, definindo somente os estilos CSS.

Podemos ver o resultado conseguido em uma página a parte.

Primeira moldura CSS, que é simples e aplica estilos tanto ao container da foto como à própria imagem.

.moldura1 { padding:8px; background-color: #f5f5f5; width: 200px; border: 1px solid #999999; } .moldura1 IMG{ border: 1px solid #000000; }


69



http://www.criarweb.com/artigos/exemplos/css/marcos/marcos-fotos.html


<div class="moldura1"> <img src="im1.jpg" width="200" height="150" alt=""> </div>

Neste caso definimos um espaço entre a moldura e a foto, uma cor de fundo e uma borda. Com a segunda declaração estamos definindo também uma borda de cor preta para a imagem, para que fique mais ressaltada.

Vejamos agora a segunda moldura, que quisemos fazer uma borda como com relieve.

.moldura2 { padding:8px; background-color: #f5f5f5; width: 200px; border-bottom: 1px solid #999999; border-right: 1px solid #999999; }


Definimos estilos CSS para um espaço entre a foto e a borda do container, uma cor de fundo e as bordas mencionadas, que só se aplicam abaixo e à direita.

Agora definimos uma moldura muito simples, mas que lembra as fotos instantâneas de Polaroid.

.moldura3 { padding:8px 8px 20px 8px; background-color: #ffffff; width: 200px; border: 1px solid #999999; }


Simplesmente definimos uns espaços entre a foto e a borda do elemento, onde o espaço debaixo é maior para emular a moldura das Polaroid, que era mais larga embaixo.

Logo, colocamos uma borda ao próprio container para que se diferencie com o fundo da página, que também é branco.

Por último criamos uma moldura com sombra. Esta moldura com sombra sem utilizar imagens é um pouco mais complicado no código HTML, porém ainda mais no código CSS. Este efeito de sombra com CSS já foi explicado em outro artigo anterior em CriarWeb.com, por isso não daremos mais explicações, e sim a referência ao artigo: Efeito de sombra com CSS

.blur{ background-color: #ccc; /*shadow color*/ color: inherit; margin-left: 4px; margin-top: 4px; width: 224px; } .shadow, .content{


70





position: relative; bottom: 2px; right: 2px; } .shadow{ background-color: #666; /*shadow color*/ color: inherit; } .content{ background-color: #fff; /*background color of content*/ color: #000; /*text color of content*/ border: 1px solid #000; /*border color*/ padding: .5em 2ex; } .content IMG{ border: 1px solid #000000; }

<div class="blur"> <div class="shadow"> <div class="content"><img src="im4.jpg" width="200" height="150" alt=""></div> </div> </div>

Como vemos no código HTML, utilizam-se três containers diferentes, para emular o efeito de degrade da sombra, que é mais escura perto do objeto e mais clara à medida que a sombra se afasta do objeto.

Teremos que definir estilos para cada um dos três containers. O bom é que, como os estilos se definem pelas classes CSS, só teremos que defini-los uma vez e poderemos utiliza-los em todas as imagens que desejarmos.

Podemos ver de novo as distintas molduras realizadas com CSS em uma página a parte.


Gráfico de barras com CSS, parte 2O posicionamento CSS nos serve para criar elementos complexos em páginas web, como poderia ser um gráfico de barras. No artigo anterior do Workshop de CSS aprendemos a realizar uma construção de um gráfico de barras com CSS.

Utilizaremos um HTML no qual temos umas simples camadas e com CSS definiremos seus estilos e posicionamento, de modo que obtenhamos um desenho para realizar um atrativo gráfico de barras, separando por completo o aspecto do conteúdo.

Vejamos o exemplo em uma página a parte para termos uma idéia.

Neste artigo veremos como realizar o segundo gráfico do exemplo, o de baixo, que é um pouco mais elaborado, ao contar várias cores para as barras e uma legenda.

O código HTML para o gráfico

<div id=container2 class=gris> <div id=titulo2>Buscadores referidos</div>


71





http://www.criarweb.com/artigos/exemplos/css/marcos/marcos-fotos.html


<div id=grafico2 class=degradeverde> <div id=google class=azul></div> <div id=direct class=verde></div> <div id=msn class=vermelho></div> <div id=yahoo class=roxo></div> </div> <div id=legenda> <ul> <li class=azul>Google</li> <li class=verde>Direto</li> <li class=vermelho>MSN</li> <li class=roxo>Yahoo</li> </ul> </div> </div>

Como o gráfico do artigo anterior, temos um container que tem dentro todos os elementos do gráfico: O título, o gráfico com as barras e a legenda.

O título é uma simples camada com texto. O gráfico é outra camada que contem outras camadas com cada uma das barras. Por último, a legenda, que está dentro de outra camada, tem uma lista com os distintos elementos que se mostram no gráfico.

Vejamos os estilos para cada elemento dividido entre classes e identificadores. As classes para os estilos comuns a vários elementos e os identificadores com os estilos próprios de cada camada. Vejamos agora os estilos para os identificadores.

O container tem um posicionamento, um tamanho e um espaçado.

#container2{ position: relative; padding:5px; width: 280px; }

O título tem uma tipografia e uma margem.

#titulo2{ font: bold 10pt Verdana, Tahoma, Arial; margin:2 0 5 0px; }

O gráfico tem dentro umas dimensões e um espaçamento à esquerda.

#grafico2 { width: 250px; height: 100px; padding-left:20px; position: relative; }

Logo, para cada uma das barras temos um posicionamento absoluto, para coloca-las dentro do gráfico. Como esta camada está dentro do gráfico, a posição absoluta corresponde à posição que ocupará a barra dentro da camada do gráfico.

#google{ width: 190px; height: 30px; position:absolute; left:0px;


72




top:10px; } #direct{ width: 80px; height: 30px; position:absolute; left:0px; top:25px; } #msn{ width: 35px; height: 30px; position:absolute; left:0px; top:40px; } #yahoo{ width: 25px; height: 30px; position:absolute; left:0px; top:55px; }

Como se pode ver, cada barra tem uma largura que corresponde com o valor que se quer representar.

Para a legenda, há que definir estilos tanto para a camada da legenda como para a lista que contem.

#legenda{ position: relative; text-align:center; } #legenda ul{ margin:10 0 10 0px; padding: 0px; } #legenda li{ display:inline; font: bold 8pt Verdana, Tahoma, Arial; height: 10pt; margin: 2px; padding: 2px; }

O mais destacável da lista é que tem o display inline, que fará com que se mostrem todos os elementos em uma linha, ao invés de ocupar um elemento por linha de texto.

Terminamos vendo as classes, que contém as cores de fundo e borda das camadas. Como cada barra tem sua cor, cada uma tem sua classe diferente, que utilizamos também como estilo na legenda. Ademais, tanto o container como o gráfico em si, têm um estilo personalizado, que já utilizamos e comentamos no exercício anterior, com um gráfico de barras mais simples.

.azul{ background-color: #9190a8; border-bottom: 2px solid #535270; border-right: 2px solid #535270; border-top: 2px solid #cbcbda; border-left: 2px solid #cbcbda; }


73





.vermelho{ background-color: #c47965; border-bottom: 2px solid #67382c; border-right: 2px solid #67382c; border-top: 2px solid #e1a494; border-left: 2px solid #e1a494; } .verde{ background-color: #5aae4c; border-bottom: 2px solid #357d2a; border-right: 2px solid #357d2a; border-top: 2px solid #aceaa2; border-left: 2px solid #aceaa2; } .cinza{ background-color: #b5b5b5; border-bottom: 2px solid #6b6b6b; border-right: 2px solid #6b6b6b; border-top: 2px solid #f0f0f0; border-left: 2px solid #f0f0f0; } .roxo{ background-color: #a05aab; border-bottom: 2px solid #672770; border-right: 2px solid #672770; border-top: 2px solid #d090d9; border-left: 2px solid #d090d9; } .degradeverde{ background-color: #e1e455; background-image: url('images/degrade-verde.jpg'); background-repeat: repeat-x; border-bottom: 2px solid #6f722d; border-right: 2px solid #6f722d; border-top: 2px solid #ece996; border-left: 2px solid #ece996; }

Simplesmente deve-se notar que se utiliza uma cor de fundo e umas bordas para criar um efeito melhor. Na classe que dá cor ao gráfico, chamada degradeverde, utilizamos ademais uma imagem de fundo.


Com isto, vimos como criar gráficos de barras somente com estilos CSS e umas quantas camadas. As possibilidades são muito maiores se desejarmos empregar um pouco de tempo e criatividade para melhorar os exemplos presentes e torna-los mais variados.


Mapear uma imagem apenas com cssVejo muita gente usando a tag map para mapear determinada regiao e juntamente com um link, não sabendo que está em desuso.

Nesse exemplo que posto aqui criei um layout com um topo que é uma imagem qualquer com 758 de largura e 50 de altura, mas quero que quando a pessoa clicar sobre a imagem volte a


74





home. A diferença é que não quero que esse link ocupe a imagem toda, quero apenas que ocupe 200px da imagem. Hoje em dia isso é muito usado na maioria dos sites, o problema é que o pessoal usa ainda a tag map para fazer isso....

Segue o código:

<html>

<head>


body{margin:0px;padding:0px;text-align:center;background-color:silver;font-family:arial, verdana, serif;font-size:11px;}

#moldura{width:758px;height:500px;margin:0 auto;background-color:white;text-align:left;}

ul {position: relative;list-style: none;margin:0;padding: 0;width: 758px;height:50px;background-image: url(carro02.jpg); backgrond-repeat: no-repeat;}

a {position: absolute;display: block;text-decoration: none;}

a.regiao {width: 200px;height:50px;margin:0 auto;}

a:hover {border:none;}

#topo {width:758px;


75




height:500px;margin:0 auto;}

</style>

</head>

<body>

<div id="moldura">

<div id="topo">

<ul><a href="teste_home.htm" title="home" class="regiao"></a></ul>

</div>

</body>

</html>

Artigo por Anderson Faro

Hacks CSSOs Hacks de CSS são artimanhas para conseguir que uma mesma declaração de estilos CSS atue de maneira distinta em diferentes navegadores. Sob este conceito se englobam diversas técnicas, muitas vezes pouco ortodoxas, para lidar com as diferentes interpretações de CSS que têm os distintos navegadores.

Os hacks CSS surgem porque diferentes navegadores muitas vezes interpretam de forma distinta o mesmo estilo CSS. Então, os desenvolvedores e designers, que se vêem na necessidade de fazer páginas que se mostrem igual independentemente do navegador, têm que utilizar códigos e truques complexos para conseguir que a página se visualize da mesma forma em distintos navegadores.

A questão é que deveria haver uma só interpretação do padrão CSS, porém como cada navegador vai por sua conta, afinal cabe a nós resolver o problema de fazer com que tudo se enquadre. É algo que já estamos acostumados com HTML e Javascript, mas que também temos que aprender a lidar com CSS.

Os Hack CSS muitas vezes jogam com distintas interpretações a erros de sintaxe, cometidos de propósito no código CSS. Por isso, à princípio convém evitá-los ou pelo menos utilizá0lo com cuidado.

Hack CSS dos comentários de duas barras (//)

Neste artigo mostraremos um exemplo sobre como funcionam os Hack CSS, com um típico caso que utiliza os comentários formados por duas barras (//), que não são tratados como comentários em Internet Explorer.

Ou seja, como vimos em outras linguagens de programação, se uma linha de código tem duas


76




barras ao começo significa que está comentada e não se tem em conta. Em CSS os comentários tem que ser feitos assim:

/* isto é um comentário */

Poré, Firefox também interpreta os comentários formados por //

// isto é um comentário

Internet Explorer simplesmente ignora as duas barras e trata a linha como se fosse um código normal.

Por exemplo, temos este código:

h1{ font-size: 12px; color: #009900; //font-size: 16px; //color: #000099;}

Aqui definimos dois estilos para a etiqueta H1. Os dois primeiros estilos são font-size:12px e color:#009900. Todos os navegadores lerão estes estilos.

Porém, logo tem outros dois estilos, que na verdade são os mesmos que os anteriores, que começam por duas barras. Firefox e Opera, que interpretam essas duas barras como comentários, não lerão os estilos. Internet Explorer que não tem em conta as duas barras como comentários, lerá os dois últimos estilos.

Portanto, o resultado final será que:

• Todos os navegadores mostrarão os H1 com tamanho de fonte 12px e cor verde. • Internet Explorer mostrará os H1 com tamanho de 16px e cor azul, dado que não tem

em conta as duas barras como se fossem comentários.

Podemos ver o exemplo em funcionamento na URL: http://www.criarweb.com/artigos/exemplos/tallercss/css-hack1.html

Teríamos que vê-lo com Internet Explorer e com outros navegadores para comprovar que mudam os estilos com os que se mostra o cabeçalho H1.

Conclusão sobre os Hacks CSS

O certo é que os Hacks CSS estão aí e muitas pessoas os utilizam habitualmente. Há vários tipos de Hacks, com técnicas mais ou menos conflituosas ou ortodoxas. Não devemos abusar deles, porém em algumas ocasiões não resta outra solução que utilizá-los para que uma página se veja da mesma maneira nos navegadores mais comuns.

Vimos também um tipo de Hack CSS que serve para ocultar certos estilos em Firefox ou outros navegadores e que só funcione em Internet Explorer.



77



http://www.criarweb.com/artigos/exemplos/tallercss/css-hack1.html


Construir uma página com um mapa de Google, usando CSSA construção com mapas de Google, que criamos com o API de Google Maps, é muito simples, já que o mapa ocupa o espaço disponível na camada onde estiver o conteúdo. Sendo assim, ao incorporar um mapa a uma página web, não temos que especificar o tamanho do mapa por Javascript nem nada parecido, simplesmente o mapa de Google tomará os atributos de largura e altura da camada (o <div> ) onde está contido. Isto é dinâmico, ou seja, se mudar o espaço disponível da camada onde estiver o mapa -já seja porque o usuário mudou o tamanho da janela ou porque se alteraram os atributos width e height da capa com Javascript ou por qualquer modo- mudará automaticamente o tamanho do mapa para se ajustar dinamicamente ao espaço disponível.

Dito isto, pode resultar pouco revelador este artigo, porque não vamos ver nada de Javascript, nem de criação de mapas de Google, e sim mostraremos como construir com CSS, tendo em conta que em uma das camadas há um mapa de Google. Não obstante, certamente algumas das informações proporcionadas aqui não serão triviais para os leitores.

Em CriarWeb.com oferecemos um manual no qual se pode aprender a trabalhar com o API de Google Maps.

Também recomendo a leitura do material que oferecemos em CriarWeb.com sobre a construção CSS, pois darei por explicado os aspectos sobre construção com folhas de estilos e portanto, não repetirei este conteúdo neste artigo.

Os atributos de altura e largura de um mapa são a camada que o contém

O exemplo mais simples que podemos encontrar para construir um mapa de google é que tenha dimensões em largura e altura fixas. É como colocamos os mapas no manual até este momento:

<div id="map" style="width: 765px; height: 388px"></div>

Neste exemplo, o mapa ocupa 765 pixel de largura e 388 de altura. Isto não tem nenhum segredo.

Porém, o que acontece se quisermos que um mapa de Google Maps tenha a largura de toda a janela do navegador? Porque sabemos que o navegador pode ter distintos tamanhos, dependendo da definição de tela do visitante e se a janela estiver maximizada ou dimensionada de qualquer outra forma.

Então é muito simples, podemos colocar width:100% na declaração de estilos css da camada onde está o mapa.

<div id="map" style="width: 100%; height: 388px"></div>

Este mapa ocuparia toda a área disponível da janela do navegador, ou da camada onde estiver contido.

O exemplo se complica se quisermos que o mapa de Google ocupe ademais toda a altura disponível no navegador, que também, sabemos, pode ser variável dependendo das características de tela ou do estado da janela do browser. O normal é que provássemos algo como isto:


78




http://www.criarweb.com/desenvolvimento-google-maps/

http://www.criarweb.com/desenvolvimento-google-maps/


<div id="map" style="height: 100%; width:100%;"></div>

Porém, isto tal qual, sem fazer nenhuma outra coisa, tem um problema e é que misteriosamente o mapa aparece vazio ou com height = 0. Isto é porque os navegadores têm problemas ao construir com height=100%. A idéia para solucioná-lo é colocar a todas as camadas que contenham ao mapa height:100%, assim como às etiquetas <BODY> e <HTML> que também deveriam ter o height de 100%. Então, assim deveria funcionar e o mapa ocuparia toda a altura e largura da janela.

Referência: Podemos ver uma FAQ com explicações sobre a utilização do height:100% em CSS.

Agora vejamos o exemplo de um mapa de Google Maps que ocupa toda a largura e altura do espaço em uma página à parte.

Construir um mapa de Google com width e height 100%, porém misturado com outros elementos

Para acabar, veremos um exemplo de construção de um Google Maps que ocupa o 100% do espaço, porém que tem um cabeçalho e uma barra lateral. O cabeçalho e a lateral ocupam uns espaços fixos e o mapa de google ocupará todo o lugar que os outros elementos da construção deixam livres.

Para explicá-lo de uma forma mais simples, veremos diretamente o exemplo em uma página à parte.

O exercício é simples, porém necessitaremos conhecimentos de CSS sobre construção e posicionamento. O código é o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"><head><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"><title>Mapa de Google</title><script src="http://maps.google.com/maps?file=api&v=2&key=coloque-sua-chave"type="text/javascript"></script><script type="text/javascript">//<![CDATA[function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(33,0),3); map.addControl(new GLargeMapControl()); map.setMapType(G_NORMAL_MAP); }}

window.onload=load//]]></script><style type="text/css">html,body{margin:0px;height:100%;}</style></head>


79



http://www.guiarte.com/mapas-google/desarrolloweb/ej_maquetacion.php

http://www.guiarte.com/mapas-google/desarrolloweb/ej_maquetacion.php

http://www.guiarte.com/mapas-google/desarrolloweb/ej_maquetacion1.php

http://www.criarweb.com/faq/css-height-100.html


<body><div id="conteiner" style="width:100%; height:100%;"> <div id="cabecalho" style="background-color: #ffcc99; font-weight:bold; font-size: 110%; height: 23px; padding: 3px; margin-bottom:10px;">Isto é o cabeçalho!!</div> <div id="lateral" style="float:right; width:200px; height:100%; background-color:#eeff99;"> <div id="conteudolateral" style="padding: 30px 10px 0 10px;"> Por <a href="http://www.guiarte.com">guiarte.com</a> <br /> <br /> Isto são conteúdos que colocamos na lateral esquerda. É muito fácil construir com um mapa de Google em uma camada que toma o tamanho do contêiner onde se encontra. </div> </div> <div id="map" style="height: 100%; margin-right:210px;"></div></div></body></html>


Alinhamento vertical com CSSPara os que estão acostumados a utilizar tabelas para construir páginas, parece estranho que com CSS não se tenha pensado uma maneira de alinhar verticalmente um conteúdo em um container. Quando tínhamos um conteúdo colocado em uma célula de uma tabela, utilizávamos o atributo valign=middle para alinhá-lo ao centro vertical da célula.

Porém, nas versões atuais de CSS (vamos pela CSS2), não se incorporou uma forma de definir o alinhamento vertical dos elementos. Imagino que haverá uma razão especial pela qual se decidiu não incorporar o alinhamento vertical em etiquetas DIV, mas a verdade é que os designers necessitam desse atributo, pelo menos em algumas ocasiões, para realizar seu trabalho.

Em breve finalizarão a versão CSS3, e então haverá uma maneira de alinhar verticalmente um conteúdo em uma camada, mas enquanto isso, devemos utilizar algum truque para consegui-lo.

Agora apresentarei um hack CSS para alinhamento vertical de elementos nas páginas. Os chamados hack CSS são como truques para definir estilos que dão problemas em distintos navegadores ou não existem maneiras de defini-los com as ferramentas atuais de CSS. Explicamos e demos exemplos de hacks CSS em um artigo anterior.

Hack CSS para alinhamento vertical por meio de uma imagem

Vamos mostrar um truque simples para alinhar verticalmente com CSS utilizando uma imagem. Aproveitaremos que a imagem tem um atributo vertical-align:middle; que serve para que o texto que está depois da imagem esteja alinhado a sua metade vertical.

Então, faremos algo assim:

Definimos os estilos para uma imagem:



80



http://www.criarweb.com/artigos/hacks-css.html


img.valign { height: 100%; vertical-align: middle; width: 0px;} </style>

Nos estilos da imagem definimos que tenha height 100% para se adaptar à altura do container onde tivermos colocado. vertical-align:middle serve para que o texto que tiver antes ou depois da imagem. O atributo width: 0px nos serve simplesmente para que a imagem não tenha largura, visto que não queremos mostrar nenhuma imagem, nem que esta tome espaço na página, só queremos alinhar verticalmente.

Agora poderemos criar uma camada com um conteúdo alinhado na vertical, desta maneira:

<div style='height:330px; background-color: #ccccff;'>Conteúdo alinhado verticalmente. <img class="valign" /></div>

A etiqueta DIV pode ter a altura que desejarmos. A cor de fundo simplesmente foi colocada para que se vejam seus limites.

Podemos ver a imagem que se colocou dentro da camada, que tem class definida no css anterior. Não tem src nem nada, pois não necessitamos colocá-lo porque não queremos mostrar nenhum arquivo como imagem.

Podemos ver o exemplo em funcionamento em uma página à parte.

O exemplo funciona perfeitamente no Internet Explorer, Firefox e Opera, com o qual é um hack CSS perfeitamente usável e compatível com a maioria de sistemas.

O ruim é que este alinhamento vertical só funcionará no caso em que o conteúdo da camada não supere uma linha. No momento em que o texto da camada tiver várias linhas, só se alinhará verticalmente uma delas, a primeira ou a última, dependendo de onde tiver colocado a imagem, diante ou atrás do texto.


Propriedades de impressão CSS page-break-after e page-break-beforeExistem propriedades de CSS como page-break-after e page-break-before que servem para alterar o aspecto das páginas web ao ser impressas em papel. Estes atributos servem em concreto para forçar quebras de página antes ou depois de elementos da página. Com page-break-after podemos definir se desejarmos uma quebra de página depois de um elemento, enquanto que com page-break-before definimos a possibilidade de incorporar uma quebra de página antes de um elemento.

Lembremos que com CSS se podem definir tanto os estilos que desejamos aplicar na hora de ver a página no monitor como na hora de imprimi-la com uma impressora. Isso já o explicamos no artigo CSS para imprimir páginas web. Porém, estes dois atributos são um pouco diferentes, porque podemos utilizá-los livremente na especificação de estilos em global da web, sendo que, tanto page-break-after como page-break-before, não têm representação


81




http://www.criarweb.com/artigos/exemplos/tallercss/alineacion-vertical-css-imagen.html


no momento de visualização da página na tela do computador, porém, sim na hora de imprimi-la na impressora.

Atributo CSS page-break-after

Serve para forçar, ou não, uma quebra de linha depois de um elemento da página. Pode-se colocar em elementos de bloco, como tabelas ou camadas DIV. Um uso típico seria:

<div style="page-break-after: always;">Conteúdo do div...</div>

Então, na hora de imprimir a web, se inserirá uma quebra de linha depois do bloco DIV.

Atributo CSS page-break-before

De maneira similar ao anterior atributo, page-break-before serve para dizer se queremos, ou não, forçar uma quebra de linha de página antes de um elemento. Se o colocamos com o valor always, faremos que sempre se mude de página antes de imprimir tal elemento.

Isto pode ser muito bom para, por exemplo, tabelas ou outros elementos que não queremos que se rompam em duas partes, se coincide uma quebra de linha no meio da impressão da página. Com isso fazemos que se mude de página, com uma quebra de página forçada e assim na nova página é mais fácil que tenhamos espaço suficiente para que caiba a impressão desse elemento.

Por exemplo, poderia se dar este uso:

<table border="1" style="page-break-before: always;">Outras etiquetas da tabela...</table>

Outros possíveis valores dos atributos

Tanto page-break-after como page-break-before permitem outros tipos de valores, à parte do always que vimos nos dois exemplos anteriores.

• auto: é o valor padrão. Só coloca a quebra de página se for necessário.. • always: coloca sempre uma quebra de linha, depois ou antes do elemento. • avoid: evita colocar uma quebra de linha antes ou depois. • left: insere uma ou duas quebras de página, de modo que se possa assegurar que a

seguinte página seja uma página esquerda (page-break-after), ou para assegurar que a página onde se começa o elemento seja uma página esquerda (page-break-before). Imaginemos um livro aberto, que tem páginas à esquerda e à direita para saber ao que se refere uma página esquerda.

• right: insere uma ou duas quebras de página, para assegurar que se possa inserir o elemento ao princípio de uma página de direita (page-break-before) ou para assegurar que depois do elemento comece uma página direita (page-break-after).

Compatibilidade de page-break-before e page-break-after com distintos navegadores

À princípio, tanto Internet Explorer como Firefox e outros navegadores como Opera, suportam


82




este atributo. O problema é que em Internet Explorer, pelo menos na versão 7, funciona umas vezes e outras não. Isto é uma pena, porque não podemos estar seguros se a impressão será tal como definimos com CSS para o documento.

Para solucioná-lo, colocamos um DIV vazio (porém com um espaço em branco ) antes ou depois do elemento ao que queremos atribuir as quebras de página. Logo, colocando o page-break-after ou page-break-before a esse DIV vazio. Ademais de separar por um <p> o DIV vazio do elemento. O código seria algo parecido a isto:

[Conteúdo da página]<div style="page-break-before: always;"> </div><p><table cellspacing="2" cellpadding="6" border="1" ><tr> <td>Esta tabela</td> <td>Aparecerá em</td> <td>uma nova página</td></tr></table>[Mais conteúdo da página]

Como se pode deduzir do exemplo, a página terá um conteúdo. Logo, se forçará uma quebra de página antes do DIV que tem o , de modo que, ao imprimir, a tabela seguinte aparecerá sempre ao princípio de uma página nova.

Vi por aí outros hack CSS para solucionar a compatibilidade de Explorer com estes atributos, porém complicam um pouco a solução. Assim me funcionou corretamente sempre o page-break-after ou page-break-before em todos os navegadores.


Colunas de altura 100% com CSSCom CSS podemos fazer muitas coisas de uma maneira rápida e simples. Porém, muitas vezes temos que empregar técnicas, algumas simples e outras nem tanto, para conseguir efeitos que de outra maneira são impossíveis. É o caso que falaremos neste artigo, conseguir que as colunas em uma construção CSS ocupem o 100% da altura disponível. Ou seja, ter uma página construída com várias colunas, onde todas cheguem até a parte de baixo da página.

Talvez você tenha chegado a este artigo porque não consegue um height: 100% em uma coluna ao desenhar sua página com CSS e não necessite mais explicações do que pretendemos conseguir. Porém, se não for o caso e deseja ver um exemplo de como se faria uma construção CSS com duas colunas, acesse ao artigo de CriarWeb.com Construção CSS com duas colunas. Logo, dê uma olhada na página do exemplo que se desenvolve no artigo anterior.

Você verá que a coluna que tem uma espécie de barra de navegação lateral só ocupa uma área limitada do espaço que há em vertical. Isto é porque em CSS as camadas DIV crescem verticalmente justamente o necessário, atendendo aos conteúdos que têm que se colocar dentro. Por muito que tentemos colocar um estilo CSS height:100% à camada da coluna pequena, à princípio, não conseguiremos que ocupe o mesmo espaço que a coluna grande. Porém, há uma solução a tudo isto e podemos estar tranqüilos porque é muito simples.


83



http://www.criarweb.com/artigos/exemplos/css/duas-colunas-cabecalho-rodape.html



Antes de continuar, pode ver o exemplo de construção CSS que vamos explicar neste artigo.

Referência: Deixamos aqui um link a uma faq sobre CSS que tem relação com este artigo e que talvez interesse também ler para encontrar outros truques relacionados com camadas <div> de height: 100%.

O pequeno truque de construção consiste em simular as colunas com um fundo. Na verdade vamos ter colunas normais, com camadas DIV transparentes, porém vamos situá-las sobre um fundo de cor que será o que ofereça o acabado em coluna.

O fundo para simular as colunas

Criaremos o fundo com o espaço que nós desejarmos, ou seja, definiremos no fundo a distribuição em colunas que necessitemos para nosso projeto. Faremos um fundo como este:

Nota: a imagem do fundo está distorcida no tamanho, para que caiba nesta página e se possa ler bem o artigo. Nosso fundo original mede 1280x50 pixels e está criado com espaços otimizados para definições de tela de 1024 pixels de largura ou superior.

Como se pode ver na imagem, temos uma barra que tem várias colunas, ao se repetir na vertical fará uma coluna tão alta como os conteúdos que requeiram a página.

Para colocar a imagem de fundo, no body ou no container onde quisermos simular as colunas, faremos um CSS como este:

background: #f0f0f0 url(fundo.gif) repeat-y 50%;

O atributo css tem um valor position, que neste caso é 50%, com o qual conseguimos que o fundo se centralize na página.

Criamos as colunas com camadas flutuando à esquerda e à direita

Logo, seria só criar um container que apareça no centro da página e um par de colunas esquerda e direita, onde estejam flutuando cada uma para seu lado. Em outros artigos de criarweb.com vimos como fazer estas cosas com CSS.

O código HTML ficaria assim:

<div id="container"> <div id="esquerda"> Coluna da esquerda </div> <div id="direita"> Esta coluna da direita </div></div>

O código CSS do exemplo seria como este:


84



http://www.criarweb.com/faq/css-height-100.html

http://www.criarweb.com/artigos/exemplos/css/columnas-height-100/


body { background: #f0f0f0 url(fundo.gif) repeat-y 50%; text-align: center; }#container{ margin:auto; text-align:left; width: 1000px;}#esquerda{ width: 670px; float: left; margin: 10px 0px 10px 10px;}#direita{ width: 290px; float: right; margin: 10px 5px 10px 0px;}

Não tem muito mistério, sobretudo se já seguimos outros workshops publicados em criarweb.com sobre como construir webs com CSS. Aconselhamos seguir a linha de artigos que começa pelo artigo Construção CSS.

Finalmente, passamos o link para ver o exemplo em funcionamento.


Opacidade CSSNeste artigo vamos entrar em detalhes sobre a opacidade em CSS. Veremos como alterar a transparência dos elementos da página através de atributos CSS.

Embora pareça uma contradição, a opacidade serve para definir a transparência dos elementos da página. Isto é porque todos os elementos de uma página são 100% opacos por padrão. Ou seja, não se pode ver através deles e portanto ao se sobrepor tapam totalmente o que tiver debaixo. Sendo assim, através da opacidade poderemos especificar quanto de opaco será um elemento, ou o que é o mesmo o quão transparente for.

A opacidade se trabalha de duas maneiras distintas nos navegadores mais comuns. Por um lado temos Internet Explorer, e por outro lado temos todos os demais navegadores, ou seja, Firefox, Opera ou Chrome. Por isso, para especificar a opacidade ou transparência teremos que fazê-lo com dois atributos distintos. Em CriarWeb.com já havíamos tratado este tema anteriormente, porém agora vamos oferecer explicações mais completas.

Opacidade em Internet Explorer

Em Explorer temos que indicar o grau de opacidade como um filtro de CSS. Tais filtros podem ser aplicados com o atributo filter de folhas de estilos. Existem vários filtros disponíveis para fazer distintos efeitos sobre elementos da página, concretamente o filtro opacity é o que nos interessa para definir transparências. Especifica-se da seguinte maneira:

.classeopacidade{ filter:alpha(opacity=25);


85



http://www.criarweb.com/artigos/exemplos/css/columnas-height-100/



}

Com esta declaração de estilos conseguiríamos que os elementos da classe classeopacidade tivessem um 25% de opacidade, ou o que é o mesmo, um 75% de transparência.

Pois bem, em Explorer não sei o porquê, podemos encontrar um problema ao utilizar o filtro opacity. Simplesmente em alguns casos não funcionará e não veremos a transparência que tivermos declarado. Isto se soluciona aplicando algum estilo adicional, à parte do próprio filtro CSS. Por exemplo, colocar uma largura à camada bastaria, ou também colocar um float:letf. É importante saber isto, visto que é o típico bug que se você não souber pode acabar com uma dor de cabeça.

Ficaria, por exemplo, assim:

.classeopacidade { filter:alpha(opacity=25); width: 120px;}

Opacidade em Firefox, Opera, Chrome...

Nestes navegadores se define a transparência de uma maneira mais simples. Faremos através do atributo opacity, desta maneira:

. classeopacidade {opacity: .5}

Com isto conseguiremos que a classe seja 50% transparente, ou 50% opaca, como prefiramos dizer.

Nota: É bom comentar que em versões antigas de Firefox, e produtos derivados de Mozilla, este atributo não funcionava. Há anos que já está integrado no navegador e funciona sem problemas, porém durante um tempo tínhamos que utilizar outro atributo próprio de Mozilla.

-moz-opacity: .25

Com isto indicamos uma transparência de 75%. Este atributo hoje não faz falta utilizá-lo, porém, se o colocamos não é má idéia para aumentar a compatibilidade da página com versões anteriores do navegador.

Transparência para todos os navegadores

Finalizamos este artículo de criar web .com, colocando todos os conhecimentos adquiridos de uma só vez. Para declarar um estilo de transparência que sirva para todos os navegadores simplesmente temos que colocar as distintas declarações de estilos todas juntas. Cada browser interpretará a que conhece.

.transparencia { opacity: .25; -moz-opacity: .25; filter:alpha(opacity=25); float: left;}

Podemos ver um exemplo sobre como ficaria a opacidade declarada em uma página à parte.


86



http://www.criarweb.com/artigos/exemplos/tallercss/opacidad-css-ejem.html



Estilos de borda CSSCSS permite criar vários tipos de bordas em elementos da página. A borda mais habitual é a de uma linha lisa, porém, também há outros tipos de bordas que podemos implementar como uma linha de pontos, bordas arredondadas, etc. Neste artigo de CriarWeb.com veremos as distintas possibilidades de criação de bordas em CSS.

Na verdade, já falamos várias vezes em CriarWeb.com de bordas com CSS, sobretudo para explicar modos de fazer as bordas arredondadas, que costumam ficar muito atraentes nas páginas web. De qualquer forma, veremos como se especifica uma borda com CSS.

DIV { border: 1px solid #d0d0d0;}

Assim, conseguiremos que todas as etiquetas DIV da página tenham uma borda de 1 pixel, sólido (de uma linha sólida) e com cor acinzentada (#d0d0d0).

O que vamos ver neste artigo são os diferentes estilos de borda, além do solid que já conhecemos. Para ilustrar o exercício, criamos uma página com os distintos exemplos de bordas. Porém, já que estamos falando de bordas, sobre sua declaração em CSS, cabe dizer que poderíamos utilizar outra notação distinta, na qual especificamos separadamente os três atributos da borda, como segue:

.bordasolido{ border-color: #aaaaaa; border-width: 1px; border-style: solid;}

Também podemos especificar as bordas separadamente de cada um dos lados do elemento, desta maneira:

.bordaporlados{ border-top: 1px solid #ff9999; border-right: 2px dotted #99ff99; border-bottom: 2px dashed #9999ff; border-left: 4px double #666666;}

Todas estas indicações para a construção de bordas, já vimos em artigos anteriores de CSS em criarweb.com, como o manual de CSS ou o workshop de CSS.

Estilos de borda

Com o atributo border-style podemos definir vários estilos de borda, entre uma gama relativamente ampla de possibilidades. Não obstante, temos que admitir que muitos dos estilos fazem bordas um pouco feias, que deveríamos utilizar com bastante cuidado.

Os possíveis estilos de borda são:


87




• solid • dotted • double • dashed • groove • ridge • inset • outset

Podemos ver todos estes estilos de borda em uma página à parte.

Agora vamos comentar estes distintos estilos e dar exemplos de cada um.

Borda solid: Esta borda é de uma linha sólida.

.bordasolida{ border:-color: #aaaaaa; border-width: 1px; border-style: solid;}

Borda dotted (pontilhada): Esta borda está composta à base de uma linha de pontos.

.bordapontilhada{ border: 1px dotted #ff8833;}

Borda double (Dupla): A borda dupla está composta por uma linha dupla sólida. Há que saber que para que esta borda se veja como uma linha dupla, temos que especificar uma largura de pelo menos 3 pixel. Assim, se veria uma borda com duas linhas de um pixel mais um espaço de separação da borda de outro pixel. À medida que especificamos uma largura maior da borda dupla, as linhas vão aumentando de grossura, assim como o espaço que as separa.

.bordadupla{ border: 9px double #990000;}

Borda dashed (linha descontínua): A borda dashed é muito parecida com a borda pontilhada, porém no lugar dos pontos, o que temos é uma linha partida.

.bordadashed{ border: 1px dashed #660000;}

Borda groove (ranhura): É uma borda especial, com uma espécie de relevo difícil de descrever, criado com a combinação de cores claras e escuras de borda.

.bordagroove{ border: 5px groove #66cc66;}


88



http://www.criarweb.com/artigos/exemplos/css/bordes-con-css-todos.html


Borda ridge (crista): Este borda também é um pouco diferente. Parecida ao groove, porém com as cores escuras e claras invertidas.

div.bordaridge{ border: 10px ridge #6666cc;}

Borda inset (relevo para dentro): Cria uma borda com uma imitação de chanfrado, como se estivesse fundido. O efeito desta borda se vê melhor se o elemento que estiver na borda tiver uma cor de fundo parecida à cor da borda.

div.bordainset{ border: 10px inset #3333ff; background-color: #0000ff;}

Borda outset (com relevo para fora): Este último estilo de borda imita um chanfrado, como se fosse um botão que está levantado. É igual ao estilo de borda inset, porém com as cores claras e escuras invertidas. Veremos também este efeito melhor se o elemento tiver uma cor de fundo.

div.bordaoutset{ border: 10px outset #cccccc; background-color: #cccccc;}

Novamente, coloco o link ao exemplo onde aparecem todos estes estilos de borda.

Borda arredondada com CSS

A borda arredondada, ou com as esquinas em curva, se pode especificar a partir de CSS 3. Isto já foi explicado no artigo: Bordas arredondadas em CSS 3.


Atributo gradiente de cores em borda com CSS e FirefoxInvestigando um pouco algumas das propriedades novas que vai trazer CSS 3, para completar a informação do artigo Introdução a CSS 3 , me deparei com um atributo para mudar a cor da borda dos elementos da página, que nos permite definir a cor com uma sucessão de distintos valores de cores. Atualmente, com CSS podemos definir separadamente as cores da borda de um elemento, de cima, direita, abaixo e esquerda. Porém, não nos referimos a poder dar uma cor separada para cada parte da borda, e sim, a aplicar várias cores distintas a uma parte, por exemplo, à parte de cima da borda.

Vi esta propriedade comentada em algum lugar como de CSS 3, porém segundo vejo no rascunho da especificação de CSS 3 para bordas e fundos, publicado pelo W3C, não aparece esta nova característica como parte do novo padrão.

Por isso, temos que ressaltar que esta propriedade não é de CSS 3, e sim que se trata de um atributo não padrão de CSS, criado por Mozilla e que, portanto, se pode ver em seu navegador


89



http://www.w3.org/TR/2008/WD-css3-background-20080910

http://www.criarweb.com/artigos/introducao-a-css3.html

http://www.criarweb.com/artigos/bordas-arredondadas-em-css3.html

http://www.criarweb.com/artigos/exemplos/css/bordes-con-css-todos.html


mais conhecido: Firefox. Dito de outra forma, é uma extensão de CSS realizada por Mozilla. Na página de Mozilla podemos encontrar mais informação sobre esta extensão de CSS: https://developer.mozilla.org/en/CSS/-moz-border-bottom-colors

Os atributos aos que nos referimos que permitem definir várias cores para cada uma das partes da borda são os seguintes:

-moz-border-top-colors-moz-border-right-colors-moz-border-bottom-colors-moz-border-left-colors

Em cada um dos atributos se define a cor, podendo especificar uma lista de cores, separadas por espaços, que se aplicarão a cada uma das partes da borda, de dentro para fora. Claro que a borda tem que ter uma largura maior que 1 para que se vejam as distintas cores. Com uma largura de 2 pixel se poderão ver 2 cores diferentes, com uma largura de 3 poderemos definir 3 cores e assim sucessivamente.

Para ver uma das possibilidades que daria o uso deste atributo podemos ver um exemplo em uma página à parte. (Porém, há que ter em conta que só se verá corretamente em Firefox).

O código para criar esse gradiente de cores seria o seguinte:

<style type="text/css">.coresborda{ border-style: solid; border-width: 10px; -moz-border-top-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-right-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-bottom-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-left-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300;}</style>

É uma pena que seja um atributo unicamente desenvolvido por Mozilla, embora se o suporte a estes atributos se realizar por mais navegadores e se W3C tiver bem, talvez em algum momento se converta em um padrão de CSS.

No momento não passa de uma mera curiosidade e possibilidade de personalização especial para os usuários de Firefox e outros navegadores baseados em Mozilla.


Múltiplas imagens de fundo com CSSCom o atributo background-image podemos conseguir que um elemento da página tenha um fundo de imagem. Isto devemos saber, visto que é algo básico das folhas de estilo em cascata (CSS). Porém, neste artigo de CriarWeb.com vamos mostrar como poderíamos conseguir que um elemento da web tivesse várias imagens de fundo ao mesmo tempo. Colocar várias imagens de fundo a um elemento à princípio não se pode com CSS, por isso mostraremos como fazê-lo com uma simples técnica alternativa. Mas também veremos que em SS 3 existe a possibilidade de configurar vários fundos ao mesmo tempo em um elemento, com uma declaração de background-image e sem a necessidade de realizar nenhum tipo de técnica


90



http://www.criarweb.com/artigos/exemplos/css/border-colors-css-mozilla.html

https://developer.mozilla.org/en/CSS/-moz-border-bottom-colors


alternativa.

Referência: Para conhecer um pouco da recente especificação de CSS3 seria bom ler o artigo Introdução a CSS 3.

Em CSS normal (CSS 1), como dissemos, podemos colocar um único fundo a um elemento da página. Isto é algo suportado por todos os navegadores. Como não podemos colocar mais de 1 fundo por elemento, para colocar vários fundos ao mesmo tempo, temos que utilizar vários elementos. A cada elemento lhe colocaremos um único fundo, porém ao se mostrar os elementos no mesmo espaço, conseguiremos o efeito desejado de ter vários fundos de imagem ao mesmo tempo.

Em nosso caso, vamos utilizar várias camadas DIV aninhadas e cada uma terá seu fundo de imagem.

O código HTML que utilizaríamos para aninhar várias camadas DIV seria como segue: <div id="fundo1"> <div id="fundo2"> <div id="fundo3"> conteúdo do elemento que vai ter 3 fundos de imagem distintos ... </div> </div></div>

Como se pode ver, podemos aninhar camadas DIV e cada uma terá um identificador, ou se preferirmos uma classe, para atribuir estilos por CSS. Ao estar aninhados, todos os elementos DIV se mostrarão um em cima do outro.

Agora vejamos o código CSS para lhe dar fundos a cada um destes elementos DIV: <style type="text/css">#fundo1{ background-image: url(fundo1.gif); width: 300px;}#fundo2{ background-image: url(fundo2.png); background-repeat: no-repeat; background-position: bottom right;}#fundo3{ background-image: url(fundo3.png); background-repeat: no-repeat; background-position: center;}</style>

Os fundos irão se sobrepor uns aos outros, sendo o fondo1 o que será visto mais abaixo e o fundo3 o que se verá mais acima.

O resultado deste exemplo se pode ver em uma página à parte.

À princípio todos os navegadores visualizarão perfeitamente os fundos, porém como utilizei imagens transparentes em formato PNG e Internet Explorer 6 tem problemas com a transparência dos arquivos PNG, podemos encontrar algum defeito, mas os fundos dos elementos DIV se verão.


91



http://www.criarweb.com/artigos/exemplos/tallercss/multiples-fondos-css/multiples-fondos.html




Colocar vários fundos de imagem a um elemento com CSS 3

Uma das novas características de CSS 3 consiste na possibilidade de declarar vários fundos de imagem a um elemento da página. O que antes vimos que é possível, criando vários elementos aninhados e colocando um fundo em cada um, se pode fazer em CSS 3 com um só elemento, ao que aplicaremos vários fundos distintos.

O HTML do exemplo de várias imagens de fundo seria o seguinte: <div id="fundos"> texto de um único elemento ...</div>

Agora vejamos o CSS 3 válido para este exemplo: <style type="text/css">#fundos{ background: url(fundo3.png) bottom right no-repeat, url(fondo2.png) center no-repeat, url(fundo1.gif) center repeat; width: 300px;}</style>

Só cabe comentar que as diferentes imagens de fundo se têm que escrever na declaração CSS separadas por vírgulas. Ademais, as imagens que declaramos se vão colocando de modo que a primeira aparece sobre as seguintes. Sendo assim, nesta declaração, fundo1.gif, que está colocada como último fundo, é a que aparece atrás de tudo.

De momento, a possibilidade de incluir vários fundos de imagem a um elemento só está disponível no navegador Safari, porém esperemos que em breve outros navegadores vão incorporando esta funcionalidade de CSS 3.

Este exemplo se pode ver em uma página à parte.


Hack CSS para Internet Explorer: hífen de separaçãoVamos explicar um dos hacks CSS mais utilizados para identificar e especificar estilos específicos para o navegador Internet Explorer, baseado em utilizar o caráter hífen de separação "_" ao principio do nome de um atributo CSS.

Este hack nos permite especificar estilos que só serão interpretados para Internet Explorer, com a particularidade que as especificações de CSS 2.1 o contemplam como válido sintaticamente.

Primeiro, teria que comentar o que são os Hacks CSS, porém é algo que já vimos em artigos anteriores de CriarWeb.com, portanto o melhor seria recomendar a leitura do texto Hacks CSS

O hack que vamos apresentar utiliza o hífen de separação antes de um atributo, que ficaria da seguinte maneira:

_font-size: 8pt;

À princípio, nenhum atributo de CSS começa por um hífen de separação, logo, a maioria dos navegadores simplesmente o ignorará. Entretanto, Internet Explorer sim que detecta este


92



http://www.criarweb.com/artigos/hacks-css.html

http://www.criarweb.com/artigos/exemplos/tallercss/multiples-fondos-css/multiples-fondos-css3.html


atributo e o tem em conta, aplicando o estilo que estiver definindo. Com esta premissa, podemos preparar um código CSS que seja interpretado de maneira distinta por Explorer e outros navegadores, da seguinte maneira:

body{ background-color: #00ff00; _background-color: #ff0000; }

Ao ler este código CSS todos os navegadores entenderão o primeiro atributo, pelo qual colocarão em cor verde o fundo da página (background-color: #00ff00;).

O segundo atributo, que começa por um hífen de separação, não será interpretado por nenhum navegador. Ainda será considerado como um erro CSS, pelo qual não o terão em conta e seguirão mostrando o fundo de cor verde.

Porém, Internet Explorer terá um comportamento distinto, já que reconhece qualquer atributo que comece por um hífen de separação (simplesmente ignorará o hífen). Neste caso, Explorer entenderá pelo segundo atributo que se está sobrescrevendo o atributo background-color e atribuirá a cor de fundo especificado como vermelho (_background-color: #ff0000;).

Sendo assim, com este hack podemos ter, com uma mesma folha de estilos, duas páginas que mostrem estilos distintos em Explorer e em outros navegadores, visto que o hífen de separação se pode utilizar para qualquer atributo CSS.

Podemos ver este hack CSS em funcionamento em uma página à parte.


Rollover com border sem problemasOs rollovers são os efeitos que se mostram na hora de colocar o mouse sobre um elemento quente, ou seja, um elemento sobre o qual podemos clicar. Os rollovers são interessantes porque oferecem ao usuário um sinal para que este saiba que pode clicar para ver alguma informação.

À princípio os rollovers se faziam com Javascript, porém há tempo que não faz falta nenhuma programação para realizar um rollover, como já explicamos no artigo Realizar um rollover só com CSS, que permite inclusive utilizando imagens para realizar o efeito do rollover. Para isso utilizamos o pseudo-element hover, que permite especificar um estilo quando o usuário coloca o mouse sobre um elemento.

O mais certo é que, se estiver lendo este artigo de CriarWeb.com, já saiba o que é um rollover e talvez tenha um problema ao trabalhar com rollovers do tipo borda. Com CSS podemos criar um efeito de link quente através de uma borda que colocamos em um elemento HTML. Na hora de passar o mouse, pode-se criar o rollover colocando uma borda no elemento. O problema é que essa borda às vezes nos desenquadra o desenho que havíamos composto com tanto trabalho por nossa parte.

Vejamos primeiro um par de exemplos de rollover com bordas, que servirão para entender bem o que é que queremos dizer e que problema pode nos dar este efeito em nosso desenho.

Temos dois exemplos, que criamos para ilustrar primeiro o problema e a solução proposta.

No exemplo problemático vemos que ao passar o mouse pelas imagens, se desenquadra o desenho, criando uns espaços em branco pouco desejáveis entre as imagens da barra de


93



http://www.criarweb.com/artigos/exemplos/tallercss/problemas-rollover-borde.html



http://www.criarweb.com/artigos/exemplos/tallercss/hack-css-guion-bajo.html


ferramentas.

Nesse primeiro exemplo se utilizou a seguinte declaração de estilos, que seria a mais fácil de adotar em um primeiro momento. #exemplo-problema a img, #exemplo-problema a { border: none; float: left; }#exemplo-problema a:hover { border: 3px solid #ff8800;}

No entanto, temos um segundo exemplo que tem um comportamento muito melhor, já que com CSS configuramos a barra de ferramentas para que a borda que aparece nas imagens para fazer o rollover apareça por dentro da imagem ao invés de por fora.

A solução passa por colocar uma margem negativa à imagem sobre a que queremos colocar a borda. A margem tem que ser do mesmo tamanho que a borda que tiver definida na pseudo-clase hover. #borda-interior a img, #borda-interior a { border: none; overflow: hidden; float: left;}#borda-interior a:hover { border: 3px solid #ffcc33;}#borda-interior a:hover img { margin: -3px;}

Este exemplo foi tirado de um artigo em inglês publicado no site CSS Tricks, onde ademais podemos ver uma segunda solução que não comentei aqui porque não me funciona em Explorer. Espero que, se tinha efeitos pouco desejáveis com a borda dos elementos ao fazer um hover, com esta técnica possa solucioná-los.

Novamente, deixo o link ao exemplo de rollover CSS baseado em bordas.


Solução ao problema de float em construção CSSSe estivermos construindo nossas páginas web com CSS, algo que já deveríamos estar fazendo há tempo, poderemos ter observado um problema que às vezes tem a construção quando utilizamos float para alinhar camadas à esquerda ou a direita. Neste artigo, vamos tratar de explicar o problema, quando se produz e dar uma simples solução.

Esta solução que publicamos no Workshop de CSS de CriarWeb.com está amplamente divulgada e aceitada por diversos desenvolvedores.


94




http://www.criarweb.com/artigos/exemplos/tallercss/problemas-rollover-borde.html

http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/


O problema do float e o crescimento das camadas container

Imaginemos que temos um container em uma camada DIV que tem suas características, como uma cor de fundo, uma borda ou o que quisermos colocar. Agora imaginemos que nesse container colocamos dentro um par de camadas DIV e que estas estão flutuando à esquerda e à direita, com o atributo float: left e float: right.

Esta configuração de camadas, que é bastante habitual, poderia ser utilizada para por exemplo, criar uma estrutura de duas colunas na página web. Para esclarecer, chamaremos container a camada que inclui as outras camadas com o float, que chamaremos camadas flutuantes.

Nas camadas flutuantes supostamente colocaremos diversos conteúdos, como texto, imagens ou o que desejarmos. Portanto, as camadas flutuantes crescerão para baixo o espaço suficiente para albergar a todos os conteúdos que colocarmos. O ideal é que o container acompanhasse o crescimento das camadas flutuantes, tornando-se tão alto quanto for necessário para hospedar as duas camadas flutuantes. Porém, realmente nem sempre ocorre isto e muitas vezes teremos observado como o container fica com um tamanho mínimo, acima de todo, e não cresce o suficiente para que as camadas flutuantes caibam nele.

Talvez este problema já tenhamos experimentado e então poderemos entendê-lo. Em qualquer caso, o melhor é ver uma imagem para que fique claro o efeito pouco desejável que muitas vezes encontraremos:

Isto é o que ocorreria com um código como este: <style type="text/css">#container{ border: 1px solid #bbb; background: #ddd; padding: 10px;}#flutuanteesquerda{ float: left; background: #fc3; width: 200px; padding: 10px;}#flutuantedireita{ float: right;


95




background: #3cf; width: 200px; padding: 10px;}</style>

<div id="container"> <div id="flutuanteesquerda"> Esta camada tem um float, para se alinhar à esquerda. O problema é que o container da mesma não se intere que esta camada cresce muito para baixo e parece como se terminasse em seguida. </div> <div id="flutuantedireita"> Aqui também temos float, para se alinhar à direita. Porém, o container onde está colocada não se intere que a camada cresce para baixo. </div></div>

Solução com overflow:hidden e definindo um width

O que seria desejável é que o container se faça suficientemente grande para albergar todo o conteúdo que se coloca dentro, independentemente de que as camadas que coloquemos dentro tenham o atributo float. Pode-se ver na seguinte imagem:

Isto na verdade se consegue com uma combinação de dois atributos que devemos colocar nos estilos CSS da camada container.

Simplesmente temos que atribuir o valor hidden ao atributo CSS chamado overflow. Isto funciona corretamente em navegadores como Firefox, Opera ou Chrome (em geral em todos os navegadores menos Explorer, pelo menos em versões atuais).

Para conseguir que Explorer também expanda o container até a medida suficiente como para albergar o conteúdo flutuante, temos que colocar um atributo width, com um valor qualquer.

Por exemplo, o container se veria corretamente com este código CSS:

#container{ overflow: hidden; width: 450px; border: 1px solid #bbb; background: #ddd; padding: 10px;}


96




O atributo width pode ter qualquer valor, por isso não temos por que atribuir um valor fixo. Por exemplo, também funcionaria com um width: 100%;

Para acabar, deixo o link a um exemplo onde se pode ver o problema de construção CSS com float e a solução combinando o overflow: hidden e o width. Ver o exemplo em uma página à parte.



97



http://www.criarweb.com/artigos/exemplos/css/overflowhidden.html

http://www.criarweb.com/artigos/exemplos/css/overflowhidden.html

Documents

Workshop de Css