Embed Size (px)
DESCRIPTION
Palestra ministrada no dia 30 de janeiro na Campus Party Brasil 2010."Quais dificuldades existem na hora de transformar o seu layout em uma página da Web. O que um designer precisa saber de CSS antes de iniciar o projeto de um layout? Quais os novos recursos o CSS3 nos traz, e quais os ganhos visuais na hora de projetar layouts para essa linguagem."
Citation preview
www.agni.art.br 2
CSS é como xadrez...
“Você pode aprender osprincípios em um dia,
E passar a vida inteiraSe especializando”
(Chris Coyier | css-tricks.com)
www.agni.art.br 3
Web dividida em três camadas:✔ Conteúdo (XHTML)✔ Apresentação (CSS)✔ Comportamento (Javascript)
Devem ser desenvolvidas de forma independente, porém uma complementa a outra
O conceito ideal...
www.agni.art.br 5
CSS: Cascading Style Sheets
Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.
Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
Pode-se definir apresentações especificas para diferentes dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas criando folhas de estilo alternativas.
www.agni.art.br 6
CSS: Cascading Style Sheets
Podemos inserir código CSS diretamente dentro de uma marcação (inline) ou entre as marcações <head></head> (Interno).
Porém, a forma mais correta é criar um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas do site.
<link href="estilo.css" rel="stylesheet" type="text/css" />
www.agni.art.br 7
O Zen Garden tem como alvo entusiasmar, inspirar e encorajar a separação do Conteúdo (HTML) da Apresentação (CSS)
Mostrar as enormes possibilidades de se obter belos Layouts através do CSS
Como exemplo, podemos Acessar os links e visualizar diversos Layouts diferentes. O código HTML permanece o mesmo, a única coisa que muda é o arquivo CSS externo.
Caso: CSS Zen Garden
www.agni.art.br 11
Folhas de Estilo
seletor { propriedade: valor; }
seletor: Marcação HTML ou identificadorpropriedade: O que será alteradovalor: O valor de alteração
body {font-family: Arial, Verdana, sans-serif;background-color: #FFF;margin: 5px 10px;}
www.agni.art.br 12
Exemplos:
margin-top: 20px;
margin: 10px 20px 50px 30px;
padding-left: 25px;
padding: 20px 40px;
border-left-width: 3px;
border-top-style: dotted;
border-color: #FF0000;
border: 1px solid #333;
Elementos de Bloco...
www.agni.art.br 13
Exemplos:
position: absolute;
top: 20px;
left: 60px;
background-color: #ccc;
background-image: url(cominho/imagem.jpg);
background-repeat: no-repeat;
Elementos de Bloco...
www.agni.art.br 14
Exemplos:
color: #5d665b;
font-family: Verdana, Arial, sans-serif;
font-size: small;
line-height: 180%;
font-weight: bold;
Estilizando Texto...
www.agni.art.br 15
Exemplos:
list-style-image: url(caminho/marcador.gif);
list-style-position: outside;
list-style-type: square;
Estilizando Listas...
www.agni.art.br 16
Exemplos:
a:link {color: #696; text-decoration: none; background-color: transparent}
a:visited {color: #699; text-decoration: none; background-color: transparent}
a:hover {color: #c93; text-decoration: underline; background-color: transparent}
a:active {color: #900; text-decoration: underline; background-color: transparent }
Estilizando Links...
www.agni.art.br 17
Flutuação:
Float: left;
Visualização:
Display: block;
Display: inline;
Controlando o tamanho dos elementos:
Overflow: auto;
Overflor: scroll;
Outros estilos...
www.agni.art.br 18
CSS2 ainda fica devendo...
#Fail...
Hoje os Designers e Desenvolvedores ainda tem que se virar pra conseguir certos efeitos gráficos como sombras em objetos e textos, cantos arredondados, fazer multiplas camadas de planos de fundo, inserir opacidade nos elementos, trabalhar com diferentes famílias tipográficas, trabalhar com colunas de textos...
www.agni.art.br 19
CSS3
Com o CSS3 teremos maior controle sobre o estilo dos elementos da página, sem ter que
recorrer a Hacks ou truques para isso.
Propriedades para cantos arredondados, ou sombras em textos estarão disponíveis na
nova versão da linguagem, sem precisarmos recorrer ao uso de imagens.
Informações - http://www.css3.info
www.agni.art.br 20
Agni é diretor de arte online, trabalha com projetos de
interface, web standards e criação.
www.twitter.com/eduagni
www.formspring.me/eduagni
Muito Obrigado :)
www.agni.art.br
