UNIVERSIDADE FEDERAL DE SANTA MARIA - UFSM COLGIO AGRCOLA DE FREDERICO WESTPHALEN WEBDESIGN II

WEBDESIGN II AULA 4 CSS

Folhas de Estilo em Cascata

DISCIPLINA: WEBDESIGN II PROF.: ROMULO VANZIN

Data: 10/04/2012

TPICOS A SEREM ABORDADOS

Exemplos avanados do uso de CSS;

Exemplo 1 MENU CSS

Criando um menu horizontal com CSS. Primeiro iremos criar um arquivo html contendo a estrutura do menu, usando a tags ul e li:

<ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">Sobre</a></li> <li><a href="#">Servi&ccedil;o</a></li> <li><a href="#">Produtos</a></li> <li><a href="#">Mapa do Site</a></li> <li><a href="#">Ajuda</a></li> <li><a href="#">Contato</a></li> </ul>

Exemplo 1 MENU CSS

Agora iremos criar um arquivo css para formatar o menu. Para deixar o menu com disposio horizontal, inclua no arquivo css para o id nav li contendo as seguintes propriedades:

#nav li { display: inline; }

Exemplo 1 MENU CSS

Agora iremos alterar o arquivo css para o id nav li a (links dentro da lista com id nav) contendo as seguintes propriedades:
Fonte

Arial Fonte de tamanho 12px Retirar o sublinhado da fonte Alinhar a esquerda Incluir espao interno de 10px Cor de fundo do item #333 Cor da fonte #fff Borda inferior de 1px, cor #000 e tipo solida

Exemplo 1 - MENU CSS

Para realizar o efeito ao passar com mouse iremos acrescentar no arquivo CSS a formatao para o id nav li a:hover e mudar as seguintes propriedades:
Cor

de fundo para #9B1C26 Espao inferior interno de 12px Borda inferior de 2px Cor da Borda inferior #000 Estilo da Borda Inferior Solido Margem em todos os lados de -1px;

Exemplo 2 MENU CSS COM IMAGEM

Em um segundo exemplo iremos montar um menu com imagem. Crie a estrutura html para o novo menu

<ul id="menu"> <li><a href="#">Principal</a></li> <li><a href="#">Empresa</a></li> <li><a href="#">Contato</a></li> </ul>

Exemplo 2 MENU CSS COM IMAGEM

Agora crie um arquivo css para formatar o menu. Primeiro remova o marcador da lista e configure a fonte (#menu li).

#menu li { list-style-type: none; /*remove o marcador*/ font: bold 16px arial, helvetica, sans-serif; }

Exemplo 2 MENU CSS COM IMAGEM

Agora vamos configurar a formatao dos links do #menu li a.

#menu li a { display: block; padding: 1px 0 1px 25px; border: 1px solid #000000; background-color: #339966; color: #FFFFFF; text-decoration: none; background-image: url(fundo_1.gif); width: 153px; }

Exemplo 2 MENU CSS COM IMAGEM

Agora vamos configurar a formatao dos links ao passar o mouse #menu li a:hover.

#menu li a:hover { border: 1px solid #000000; background-color:#FFFF99; background-image: url(fundo_2.gif); color:#000000; }

Exemplo 3 Efeito de Sombras em Textos

A propriedade text-shadow destinada a obter um efeito de sombreamento em textos.

A sintaxe geral para escrever uma regra CSS que contenha esta propriedade a seguinte: seletor { text-shadow: medida-1 medida-2 medida-3 cor; }

Exemplo 3 Efeito de Sombras em Textos

Onde: medida-1: o deslocamento da sombra para a direita (valor positivo) ou para a esquerda (valor negativo); medida-2: o deslocamento da sombra para baixo (valor positivo) ou para cima (valor negativo); medida-3: o raio para um efeito blur na sombra; cor: a cor da sombra.

Exemplo 3 Efeito de Sombras em Textos

Os valores de medida-3 e de cor so opcionais. Omitir a medida-3 significa que no haver um efeito blur na sombra. Omitir a cor significa que a sombra ter a mesma cor definida para o texto. Os valores de medida-1 e medida-2 so obrigatrios. O valor da cor pode ser declarado depois das medidas como mostrado no exemplo anterior ou antes das medidas, indiferentemente.

Exemplo 3 Efeito de Sombras em Textos

Efeito blur uma funcionalidade presente em qualquer editor de imagens que consiste em "borrar" ou "desfocar" uma rea de cor slida.

A propriedade text-shadow admite a aplicao de vrias sombras declarando uma lista de grupo de valores como mostrado nos exemplos anteriores, separados por vrgula. Ex.: text-shadow: 30px -30px #0f0, 20px -20px #f00, 10px 10px #ff0;

Vamos aplicar o efeito blur na sombra do exemplo anterior acrescentando um raio de 10px;

Exemplo 4 Construo de uma barra

de navegao CSS com tool-tip

Tool-tip ou dica de contexto aquela moldura pop up que abre quando voc passa o mouse sobre um elemento HTML (normalmente uma palavra em um texto) e que contm uma explicao adicional sobre aquele elemento que recebeu o ponteiro do mouse sobre ele. A seguir o cdigo HTML da pgina contendo a barra de navegao na qual iremos acrescentar as tool-tips.

Exemplo 4 Construo de uma barra

de navegao CSS com tool-tip

<p class="barNav">
<a href=#" >Home</a> <a href=#">Quem somos</a> <a href=#">Portflio</a> <a href=#">Contato</a>

</p>

Exemplo 4 Construo de uma barra

de navegao CSS com tool-tip

No arquivo CSS iremos incluir a classe .barNav conforme a configurao abaixo: .barNav a {
font: 12px Arial, Verdana,Helvetica,sans-serif; color: #000000; text-decoration: none; background: #FFC50C; text-align: center; padding: 1px 5px; margin-right: -1px; border: 1px solid #000000;

} .barNav a:hover {
color: #666666; background: #FCFCFC; border: 1px solid #666666;

Exemplo 4 Construo de uma barra

de navegao CSS com tool-tip

Nosso primeiro passo ser colocar o texto da tool-tip de cada um dos links no cdigo HTML.

<a href=#" >Home<span>Pgina de entrada no site</span></a>

Colocamos o texto da tool-tip dentro de uma tag <span> e esta por sua vez dentro da tag <a> do link.

Exemplo 4 Construo de uma barra

de navegao CSS com tool-tip

A regra CSS para esconder o tool-tip : .barNav a span { display:none; /* esconde */ }

A regra CSS para mostrar o tool-tip : .barNav a:hover span { display: block; /* mostra como bloco */ }

Exemplo 4 Construo de uma barra

de navegao CSS com tool-tip

A tool-tip precisa ser posicionada corretamente. E aqui entra em ao a propriedade position, combinada com left e top. Vamos acrescentar mais regras CSS: .barNav a:hover span { display: block; position: absolute; top:-20px; left:0; }

Exemplo 4 Construo de uma barra

de navegao CSS com tool-tip

Mas seria interessante se consegussemos posicionar as tool-tips em relao a barra de navegao e no em relao a tela como fizemos. Lembrando que um elemento posiciona-se em relao ao seu elemento ancestral que esteja posicionado, basta posicionarmos o elemento que contm a barra de navegao (ancestral da tool-tip).
Olhando

no cdigo l em cima este elemento o <p> da classe .barNav isto , temos que posicionar p.barNav p.barNav { position:relative; }

Exemplo 4 Construo de uma barra

de navegao CSS com tool-tip

Para finalizar vamos acrescentar umas regras CSS a mais, para criar uma caixinha com fundo, borda e largura para a tool-tip.

.barNav a:hover span {

width: 200px; padding: 2px 0; color: #666; background:#fffff0; font-size: 12px; border:2px dotted #000; text-align:center;

Exemplo 5 Galeria de imagens com

CSS Veremos um exemplo para fazer uma galeria de fotos sem usar Flash ou Javascript, somente com CSS.

Para isto, crie o HTML para apresentar as imagens.

Exemplo 5 Galeria de imagens com

CSS
<div id="galeria"> <ul class="zoom"> <li> <a href="#"> <img src="01.jpg" alt="description" /> <img src="01.jpg" alt="description" class="preview" /> </a> </li> <li> <a href="#"> <img src="02.jpg" alt="description" /> <img src="02.jpg" alt="description" class="preview" /> </a> </li> </ul> </div>

Exemplo 5 Galeria de imagens com

CSS
Aps vamos montar o CSS da galeria. .zoom{ list-style:none; } .zoom a{ position:relative; } .zoom a .preview{ display:none; } .zoom a:hover .preview{ display:block; position:absolute; top:-33px; left:-45px; z-index:1; }

Exemplo 5 Galeria de imagens com

CSS
.zoom img{ background:#fff; border-color:#aaa #ccc #ddd #bbb; border-style:solid; border-width:1px; padding:2px; vertical-align:top; width:80px; height:50px; }

Exemplo 5 Galeria de imagens com

CSS
.zoom li{ background:#eee; border-color:#ddd #bbb #aaa #ccc; border-style:solid; border-width:1px; display:inline; float:left; margin:3px; padding:5px; position:static; } .zoom .preview { border-color:#000; width:200px; height:150px; }

Exerccio

Crie um layout usando HTML e CSS com divises. O layout dever ter no mnimo:
Um cabealho contendo seu nome com algum efeito de sombra em texto. Uma rea para um menu com efeitos css, contendo os seguintes links (Principal, Galeria, Sobre). Uma rea de contedo. Uma rea de rodap contendo o nome do aluno e seu endereo de e-mail.

Usando o padro de layout criado, desenvolva as pginas internas:

Uma galeria de imagens. A pgina sobre com as informaes sobre o autor (aluno)

Utilize o mximo de atributos, parmetros, propriedades, valores, vistos em aula (HTML e CSS) para a elaborao de pginas (imagens, alinhamentos, fundos, cores, tabelas, listas, Box, margens, preenchimento, bordas, formataes de fonte, etc...Quanto mais insero de itens mais valer o trabalho).

DVIDAS

http://www.cafw.ufsm.br/~romulo romulovanzin@yahoo.com.br