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