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.

40.- Construir uma página com um mapa de Google, usando CSS
É muito fácil construir uma página que tenha um mapa de Google, simplesmente devemos utilizar construção e posicionamento CSS.

41.- Alinhamento vertical com CSS
CSS 2 não suporta alinhamento vertical, por isso para alinhar verticalmente um conteúdo de uma camada temos que utilizar técnicas ou truques alternativos.

42.- Propriedades de impressão CSS page-break-after e page-break-before
page-break-after e page-break-before são propriedades de estilos CSS que se aplicam na hora de imprimir páginas web na impressora, para forçar quebras de página depois ou antes de certos elementos.

43.- Colunas de altura 100% com CSS
Como construir uma página com CSS e conseguir que a altura das colunas ocupe todo o espaço disponível da página.

44.- Opacidade CSS
A opacidade em CSS serve para definir o opaco ou transparente de um elemento em uma página web.

45.- Estilos de borda CSS
Explicação dos diferentes tipos ou estilos de bordas que podemos criar em CSS, através do atributo border.

46.- Atributo gradiente de cores em borda com CSS e Firefox
Possibilidade de definir um gradiente de cor na borda dos elementos com CSS, em um atributo não padronizado de Firefox.

47.- Múltiplas imagens de fundo com CSS
Como conseguir que um elemento da página tenha várias imagens de fundo ao mesmo tempo, com CSS básico e com características de CSS 3.

48.- Hack CSS para Internet Explorer: hífen de separação
Um hack em CSS que serve para indicar estilos CSS específicos para Internet Explorer, utilizando um _ (hífen de separação) ao princípio do atributo.

49.- Rollover com border sem problemas
Um problema típico quando desejamos fazer um rollover a um elemento utilizando o atributo CSS border e a solução para que não nos desenquadre o desenho.

50.- Solução ao problema de float em construção CSS
Quando uma camada tem um float a camada container sobre a que está situada muitas vezes não acompanha. Solucionamos isso com o atributo CSS overflow:hidden e definindo um width ao container.

51.- Animações de sprites mediante CSS3 e JavaScript
Com o aparecimento de CSS3 nos abrem novas capacidades de programação no âmbito das animações HTML.

52.- HTML5 otimizado mediante CSS/CSS3
Sprites e imagens embebidas usadas com CSS para a otimização de documentos HTML.

53.- Biblioteca de animação jQuery.spritely
Como podemos animar sprites mediante JavaScript...e um mínimo de CSS.

54.- Como fazer com CSS3 um balão de cartum ou globo de historia em quadrinhos
Por meio de formas CSS podemos implementar, apenas com uma camada e estilos CSS3, os típicos globos de historias em quadrinhos ou balões de cartuns.

55.- Unidades de medida CSS para fontes Responsive Web Design
As melhores unidades de medida de CSS para trabalhar com tamanhos para tipografias em Responsive Web Design, vantagens, inconvenientes e soluções para a unidade rem.

56.- Usos avançados de Border­radius CSS3 para criar formas
O incrível mundo de border­radius, muito mais que caixas com cantos arredondados, permite fazer formas de diversos tipos.

57.- Ajustar texto ou outros elementos às formas de seus conteiners em CSS3
Técnicas CSS para criar textos ou outros elementos que podem ser transformados para se ajustarem a diversas formas que conseguimos com CSS3.


Downloads
Archivo de descarga 440.64 KB 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.


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

Comentários do manual
Foram enviados 3 comentários à manual
1 comentário não revisado
2 comentários revisados:
LINK LINK LINK LINK...
Por: rebk
01/10/09
aLGUEM PODE COLOCAR UM LINK POR FAVORE....OBRIGADA ...
css é o estilo web que é e será usado em larga escala
Por: efraim_dutra
17/11/10
css é o estilo web que é e será sempre usado em larga escala, utilizo muito os exemplos de criarwevb , tenho até o logotipo da criar web em meus websites, aprecio muito as sugestões daqui, passo sempre que possivel por aqui, como se diz, meu proff...

Usuários :    login / registro

Neste manual
Baixar manual

Categorias relacionadas:

Manuais relacionados