Your SlideShare is downloading. ×
Seu desenho vai virar código, e agora?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Seu desenho vai virar código, e agora?

3,108
views

Published on

Palestra ministrada no dia 30 de janeiro na Campus Party Brasil 2010. …

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."

Published in: Design, Technology, Education

1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,108
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
193
Comments
1
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS é como xadrez... “Você pode aprender os princípios em um dia, E passar a vida inteira Se especializando” (Chris Coyier | css-tricks.com) www.agni.art.br 2
  • 2. O conceito ideal... 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 www.agni.art.br 3
  • 3. Div isão em Camadas... Javascript XHTML CSS CSS CSS www.agni.art.br 4
  • 4. CSS: Cascading Style S heets 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 5
  • 5. CSS: Cascading Style S heets 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. s" /> <link href="estilo.css" rel="stylesheet" type="text/cs www.agni.art.br 6
  • 6. Caso: CSS Zen Garden 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. www.agni.art.br 7
  • 7. www.agni.art.br 8
  • 8. www.agni.art.br 9
  • 9. www.agni.art.br 10
  • 10. Folhas de Estilo seletor { propriedade: valor; } seletor: Marcação HTML ou identificador propriedade: O que será alterado valor: O valor de alteração body { font-family: Arial, Verdana, sans-serif; background-color: #FFF; margin: 5px 10px; } www.agni.art.br 11
  • 11. Elementos de Bloco... 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; www.agni.art.br 12
  • 12. Elementos de Bloco... Exemplos: position: absolute; top: 20px; left: 60px; background-color: #ccc; background-image: url(cominho/imagem.jpg); background-repeat: no-repeat; www.agni.art.br 13
  • 13. Estilizando Texto... Exemplos: color: #5d665b; font-family: Verdana, Arial, sans-serif; font-size: small; line-height: 180%; font-weight: bold; www.agni.art.br 14
  • 14. Estilizando Listas... Exemplos: list-style-image: url(caminho/marcador.gif); list-style-position: outside; list-style-type: square; www.agni.art.br 15
  • 15. Estilizando Links... 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 } www.agni.art.br 16
  • 16. Outros estilos... Flutuação: Float: left; Visualização: Display: block; Display: inline; Controlando o tamanho dos elementos: Overflow: auto; Overflor: scroll; www.agni.art.br 17
  • 17. CSS2 ainda fica devend o... #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 18
  • 18. 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 19
  • 19. Muito Obrigado :) os de Agni é diretor de arte online, trabalha com projet interface, web standards e criação. www.twitter.com/eduagni www.formspring.me/eduagni www.a gni.art.br www.agni.art.br 20

×