Workshop de CSS

Aplicações práticas realizadas com folhas de estilo em cascata. Desde aplicação de estilo links à construção de páginas realizadas unicamente com CSS.
Capítulos do manual
1.- Aplicação avançada de estilo aos links
Vemos como atribuir estilos aos links da página de uma maneira potente, para fazer interessantes barras de navegação.

2.- Como evitar que um página se imprima
Veremos um pequeno truque com folhas de estilos para evitar que se possa imprimir uma página web com o botão de imprimir de nosso navegador.

3.- Título para tabelas decoradas com CSS
Criação e aplicação de estilos com CSS para realizar tabelas com uma decoração vistosa e fácil de aplicar.

4.- Bordas pontilhadas com CSS
Para dar distintos efeitos a elementos estruturados, como as tabelas, podemos recorrer às classes, parte integrante das folhas de estilo (CSS).

5.- Estilos em campo de texto
É possível fornecer estilos e formatos aos campos de textos dos formulários. Neste capítulo veremos como fazê-lo.

6.- Montar uma página com CSS
Tutorial para montar uma página web utilizando CSS ao invés de tabelas.

7.- Montar uma página com CSS II
Explicamos a criação da página, que se simplificará ao máximo para tornar o exercício mais fácil.

8.- Montar uma página com CSS III
Realizamos a construção da área do corpo, aonde se mostrará o conteúdo da página.

9.- Montar uma página com CSS IV
Criamos a lateral da página, onde se mostram várias caixas com um buscador e acesso a outras informações.

10.- Montar uma página com CSS V
Para terminar, vamos criar um rodapé da página e uma borda que encaixe a página. Ofereceremos também umas conclusões do exercício.

11.- Variar o desenho e a construção com a folha de estilos
Continuamos o workshop de construção com CSS. Criamos um desenho diferente, que aplicamos ao exemplo realizado anteriormente, mudando somente a folha de estilos.

12.- Workshop de CSS, Opacity
Explicamos como fazer efeitos de transparência, mudando a opacidade de elementos como camadas, formulários e imagens, entre outros.

13.- Links com estilo CSS que simulam botões
Fazer um botão com CSS sem utilizar formulários, simplesmente com links que se comportam visualmente como botões.

14.- Criar um menu dinâmico com CSS
Código que nos ajuda a criar um menu com CSS similar aos de Javascript.

15.- Utilizar CSS para montar um boletim
As vantagens da construção CSS, em relação à construção tradicional por tabelas, podem ser aplicados também a envios de boletins em formato HTML.

16.- Caixa simples e elegante com CSS
Como fazer uma caixa atraente e muito fácil de fazer, utilizando CSS para aplicar os estilos.

17.- Decorar um campo select de formulário com CSS
Exemplo de um código para decorar um campo select de um formulário, utilizando folhas de estilos em cascata.

18.- Esconder com CSS o e-mail aos spambots
Existem robôs que rastreiam páginas em busca de e-mails para fazer spam. Veremos algumas técnicas para evitar que cacem nosso endereço publicado na web.

19.- Efeito de sombra com CSS
Veremos vários métodos para realizar um efeito de sombreado utilizando folhas de estilo em cascata.

20.- Texto na vertical usando CSS
Novo atributo CSS para colocar um texto que possa ser lido na vertical em nosso documento HTML.

21.- Mudando o cursor do mouse
Como mudar com CSS as opções por padrão dos cursores ao passar por certas partes da página.

22.- Caixa CSS para colocar conteúdo
Realizar com imagens e folhas de estilo um desenho para uma caixa para colocar conteúdos.

23.- Construção CSS com duas colunas
Mostramos como fazer uma página web construída utilizando unicamente CSS, sem tabelas, com uma distribuição de 2 colunas, uma cabeçalho e um rodapé de página. Com desenho de largura fixa ou fluída.

24.- Construção CSS com três colunas
Vejamos como fazer uma página, construída unicamente com Folhas de Estilo em Cascata, composta por três colunas. Com desenho de largura fixa e fluida.

25.- Variação da construção com CSS com 3 colunas
Mostramos uma melhoria no código mostrado anteriormente para construir uma página com CSS com três colunas.

26.- Caixa CSS com as esquinas arredondadas
Novo exemplo de construção de caixas com esquinas arredondadas, realizado com CSS.

27.- Caixa CSS com linha de borda arredondada
Outro exemplo de caixa realizada com CSS no qual temos uma linha de 2 pixels de largura que rodeia o conteúdo. A linha tem esquinas arredondadas.

28.- Construir uma galeria de fotos com CSS
Criamos uma galeria de fotos construída com CSS, de uma maneira muito simples, porém vistosa.

29.- Construir uma galeria de fotos com CSS usando listas
Outro exemplo de uma construção CSS de uma galeria de fotos, desta vez utilizando listas.

30.- Criação de gráficos de barras com CSS para a construção
Neste artigo vamos criar uns gráficos de barras construídas inteiramente com CSS. Utilizamos camadas e posicionamento CSS para criar o gráfico.

31.- Estilizando formulários
Este é um artigo que lhe servirá de guia para criar formulários totalmente acessíveis usando XHTML e folhas de estilo em cascata (css) para lhe dar formato.

32.- Realizar um rollover só com CSS e utilizando imagens
Os efeitos de rollover muda ao passar o mouse por cima especificados mediante CSS, também pode ser feito com imagens.

33.- CSS para campos textarea de formulário
Veremos como aplicar estilos variados a campos de formulário de texto de várias linhas (textarea) com CSS.

34.- CSS para imprimir páginas web
Como fazer uma folha de estilo CSS diferente para a visualização da página no navegador e outra para a impressão em uma impressora.

35.- Gerar colunas com CSS de uma lista sem tabelas
Graças a esse truque de CSS você poderá gerar colunas com CSS utilizando uma lista e sem tabelas.

36.- Molduras para fotos com CSS
Vemos 4 exemplos de molduras vistosas para fotos que se podem criar com CSS sem utilizar imagens.

37.- Gráfico de barras com CSS, parte 2
Fazemos um gráfico de barras CSS mais elaborado, com camadas e construção e posicionamento CSS.

38.- Mapear uma imagem apenas com css
Veremos como mapear uma região sem o uso da tag map, utilizando apenas CSS.

39.- Hacks CSS
Comentamos o que são os Hacks CSS e damos um exemplo de Hack CSS simples de aplicar e muito prático.


Downloads
Versão imprimível do manual Versão imprimível do manual. Agora você tem a possibilidade de obter o manual em um só arquivo optimizado para sua melhor impressão.


Manual traduzido em espanhol
Está disponível em Desarrolloweb.com:Taller de CSS

Comentarios
Envie seus comentários ou opiniões sobre este manual.
Comentar o manual

Usuários :    login / registro
Neste manual

Categorias relacionadas:

Manuais relacionados