Upload
edu-agni
View
4.477
Download
0
Embed Size (px)
DESCRIPTION
Que dificuldades surgem 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 que o CSS3 oferece e os ganhos visuais na hora de projetar layouts para essa linguagem?
Citation preview
CSS é como xadrez...
Você pode aprender osprincípios em um dia,e passar a vida inteira
se especializando.
(Chris Coyier | css-tricks.com)
@eduagni | www.agni.art.br
O conceito ideal
Web dividida em três camadas:✔ Conteúdo (HTML)✔ Apresentação (CSS)✔ Comportamento (Javascript)
Devem ser desenvolvidas de forma independente, porém uma complementa a outra.
@eduagni | www.agni.art.br
Divisão em Camadas...
HTML
Javascript
CSSCSS
CSS
@eduagni | www.agni.art.br
CSS2 deixa a desejar
Hoje, ainda temos que nos virar pra conseguir certos efeitos gráficos como
sombras em objetos e textos, cantos arredondados, fazer múltiplos planos
de fundo, inserir opacidade nos elementos, trabalhar com diferentes
famílias tipográficas, trabalhartextos em coluna...
@eduagni | www.agni.art.br
#CSS3
Com uma série de novas propriedades, teremos maior controle sobre o estilo
dos elementos.
Propriedades para cantos arredondados ou sombras em textos
estarão disponíveis no CSS3, sem precisarmos recorrer ao uso de
truques ou imagens.
@eduagni | www.agni.art.br
Tá quase pronta!
O CSS3 ainda não é uma especificação completa da W3C,
ainda está em fase de rascunho, e nem todos os navegadores
suportam por completo.
@eduagni | www.agni.art.br
Mas dá pra usar?
É possível implementar algumas dessas novas propriedades em
todos os navegadores com o uso de bibliotecas de Javascript.
Dependendo do nível de satisfação, o uso fica
a critério de cada um.
@eduagni | www.agni.art.br
Modernizr é uma pequena biblioteca
JavaScript criada por Faruk Ateş e Paul Irish que tem por finalidade detectar o suporte do
navegador para algumas das novas
funcionalidades da HTML5 e das CSS3
@eduagni | www.agni.art.br
Aptana Studio 3: IDE Open Source multi-plataforma para
desenvolvimento web baseada no Eclipse. Trás diversas novidades, entre elas o
suporte ao HTML5 e ao CSS3.
@eduagni | www.agni.art.br
t
HTML5 e CSS3 não criam maravilhas, eles
apenas possibilitam que você crie maravilhas...
São apenas as ferramentas, mas
quem faz a bunitezaacontecer é você.
@eduagni | www.agni.art.br
O CSS3 não chega aser um concorrente
do Flash, mas já podemos ver
aplicações RIA sendo feitas com a
combinação de CSS3, HTML5 e Javascript, com as vantagens de
serem acessíveis, indexáveis, semânticas
e abertas.
@eduagni | www.agni.art.br
Um pouco do CSS3
na prática,testando algumas
novas propriedades
Para que alguns dos novos recursos possam funcionar, ainda é necessário adicionarmos prefixos para a compreensão dos navegadores:
-moz- (para a renderização no Firefox)
-webkit- (para renderização no Safari)
@eduagni | www.agni.art.br
border-radius
Com essa propriedade podemos adicionar um raio de arredondamento para todos os cantos de um elemento, como
-moz-border-radius: 10px
ou valores diferentes para cada canto
-moz-border-radius-topright: 5px
@eduagni | www.agni.art.br
border-colors
Podemos adicionar um efeito gradiente nas bordas de um elemento, aplicando cores em diferentes camadas:
-moz-border-top-colors: #555 #666 #777...
@eduagni | www.agni.art.br
text-shadow
Com essa propriedade podemos adicionar sombras em textos, configurando a distância da sombra para a esquerda e para o topo do texto, o enevoamento e cor:
text-shadow: 5px 5px 2px #999
@eduagni | www.agni.art.br
box-shadow
Funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos:
-moz-box-shadow: -10px -10px 0px #333
@eduagni | www.agni.art.br
opacity
Podemos adicionar opacidade aos elementos:
opacity: 0.2
@eduagni | www.agni.art.br
columns
Podemos definir estilos de colunas para textos, aplicando valores para a largura, quantidade, bordas de separação e distância entre colunas:
-moz-column-width: 13em; -moz-column-count: 3;-moz-column-rule: 1px solid black;-moz-column-gap: 1em;
@eduagni | www.agni.art.br
Multiple backgrounds
Podemos definir diferentes planos de fundo para um mesmo elemento:
background: url(fundo-um.jpg) top left no-repeat, url(fundo-dois.jpg) top 11px no-repeat, url(fundo-tres.jpg) bottom left no-repeat, url(fundo-quatro.jpg) left repeat-y
@eduagni | www.agni.art.br
@font-face
Importamos um arquivo de fonte:
@font-face { font-family: Agni; src: url(‘fonts/agni-font.otf’)}
Em seguida aplicamos essa fonte a um elemento de texto:
h3 { font-family: Agni, sans-serif; }
@eduagni | www.agni.art.br
Por hoje é só pessoal.
Perguntas?
Thanks!
Fallow me!
@eduagni
www.agni.art.br