CSS
CURSO W3C ESCRITRIO BRASIL
NDICE1. CSS 5
O que CSS? 5
2. Seletorescomplexos 7O que um seletor? 7
Exemplo de funcionamento 8
3. Gradiente 11Stops ou definindo o tamanho do seu gradiente 12
4. Columns 15column-count 15column-width 15column-gap 16
5. Transform2D 17CSS Transform na prtica 17
Vrias transformaes em um nico elemento 18transform-origin 18
6. Transieseanimaes 21O bsico: propriedade transition 21Propriedade animation e regra keyframe 24Definindo ciclos 28
7. Bordas 31Dividindo a imagem 31Comportamento da imagem 32Aplicao 32
8. Mltiplosbackgrounds 35
9. MduloTemplateLayout 37Sintaxe e funcionamento 39O funcionamento da propriedade display 39
Definindo a largura e altura dos slots 41O funcionamento da propriedade position 42
Pseudo-elemento ::slot() 43
10. Cores 45RGBA 45
RGBA e a diferena da propriedade OPACITY 45currentColor 47
11. Pagedmedia 49@page 49Terminologia e Page Model (modelo de pgina) 50
Page box 50Page area 51Margin box 51Page sheet 51Non-printable area - rea no impressa 52rea de impresso 52
Propriedade size 52auto 52landscape 52portrait 52
Page-size 53
12. @font-face 55Compatibilidade 56
Kit de sobrevivncia 56
13. Presentation-levels 57Como funciona o modelo 57A propriedade presentation-level 58
CSS - Curso W3C Escritrio Brasil 5
1. CSS
O que CSS?O CSS formata a informao entregue pelo HTML. Essa informao pode ser qualquer coisa: ima-
gem, texto, vdeo, udio ou qualquer outro elemento criado. Grave isso: CSS formata a informao.
Essa formatao na maioria das vezes visual, mas no necessariamente. No CSS Aural, ns ma-
nipulamos o udio entregue ao visitante pelo sistema de leitura de tela. Ns controlamos volume,
profundidade, tipo da voz ou em qual das caixas de som a voz sair. De certa forma voc est for-
matando a informao que est em formato de udio e que o visitante est consumindo ao entrar
no site utilizando um dispositivo ou um sistema de leitura de tela. O CSS prepara essa informao
para que ela seja consumida da melhor maneira possvel.
O HTML5 trouxe poucas novidades para os desenvolvedores client-side. Basicamente foram cria-
das novas tags, o significado de algumas foi modificado e outras tags foram descontinuadas. As no-
vidades interessantes mesmo ficaram para o pessoal que conhece Javascript. As APIs que o HTML5
disponibilizou so sem dvida uma das features mais aguardadas por todos estes desenvolvedores.
Diferentemente do CSS3 que trouxe mudanas drsticas para a manipulao visual dos elementos
do HTML.
Com o CSS que ns conhecemos podemos formatar algumas caractersticas bsicas: cores, back-
ground, caractersticas de font, margins, paddings, posio e controlamos de uma maneira muito
artesanal e simples a estrutura do site com a propriedade float.
Voc deve pensar: mas com todas as caractersticas ns conseguimos fazer sites fantsticos, com
design atraente e com a manuteno relativamente simples. E eu concordo com voc, mas outras
caractersticas que ns no temos controles e dependemos de:
1) Algum programa visual como o Photoshop para criarmos detalhes de layout;
2) Javascript para tratarmos comportamentos ou manipularmos elementos especficos na es-
trutura do HTML;
3) Estrutura e controle dos elementos para melhorarmos acessibilidade e diversos aspectos do
SEO;
Com as atualizaes do CSS3 e com os browsers atualizando o suporte do CSS2.1, ns entramos em
patamar onde sem dvida o CSS a arma mais poderosa para o designer web. Segue uma pequena
lista dos principais pontos que podemos controlar nesse novo patamar:
1) selecionar primeiro e ltimo elemento;
2) selecionar elementos pares ou mpares;
3) selecionarmos elementos especficos de um determinado grupo de elementos;
4) gradiente em textos e elementos;
5) bordas arredondadas;
6) sombras em texto e elementos;
7) manipulao de opacidade;
8) controle de rotao;
9) controle de perspectiva;
10) animao;
11) estruturao independente da posio no cdigo HTML;
agora que comea diverso ao formatar sites com CSS.
CSS - Curso W3C Escritrio Brasil 7
2. SELETORESCOMPLEXOSA sintaxe do CSS simples:
seletor { propriedade: valor;}
A propriedade a caracterstica que voc deseja modificar no elemento. O valor o valor referente
a esta caracterstica. Se voc quer modificar a cor do texto, o valor um Hexadecimal, RGBA ou at
mesmo o nome da cor por extenso. At aqui, nada diferente. Muitas vezes voc no precisa apren-
der do que se trata a propriedade, basta saber que existe e se quiser decorar, decore. Propriedades
so criadas todos os dias e no um ato de herosmo voc saber todas as propriedades do CSS e
seus respectivos valores.
Os seletores so a alma do CSS e voc precisa domin-los. com os seletores que voc ir escolher
um determinado elemento dentro todos os outros elementos do site para format-lo. Boa parte da
inteligncia do CSS est em saber utilizar os seletores de uma maneira eficaz, escalvel e inteligente.
O que um seletor?O seletor representa uma estrutura. Essa estrutura usada como uma condio para determinar
quais elementos de um grupo de elementos sero formatados.
Seletores encadeados e seletores agrupados so a base do CSS. Voc os aprende por osmose duran-
te o dia a dia. Para voc lembrar o que so seletores encadeados e agrupados segue um exemplo
abaixo:
Exemplo de seletor encadeado:
div p strong a { color: red;}
Este seletor formata o link (a), que est dentro de um strong, que est dentro de P e que por sua vez
est dentro de um DIV.
Exemplo de seletor agrupado:
strong, em, span { color: red;}
Voc agrupa elementos separados por vrgula para que herdem a mesma formatao.
Estes seletores so para cobrir suas necessidades bsicas de formatao de elementos. Eles fazem o
simples. O que vai fazer voc trabalhar menos, escrever menos cdigo CSS e tambm menos cdi-
go Javascript so os seletores complexos.
Os seletores complexos selecionam elementos que talvez voc precisaria fazer algum script em
Javascript para poder marc-lo com uma CLASS ou um ID para ento voc format-lo. Com os
seletores complexos voc consegue formatar elementos que antes eram inalcanveis.
Exemplo de funcionamento
Imagine que voc tenha um ttulo (h1) seguido de um pargrafo (p). Voc precisa selecionar todos
os pargrafos que vem depois de um ttulo h1. Com os seletores complexos voc far assim:
h1 + p { color:red;}
Esses seletores um dos mais simples e mais teis que eu j utilizei em projetos por a. No precisei
adicionar uma classe com JQuery, no precisei de manipular o CMS para marcar esse pargrafo,
no precisei de nada. Apenas apliquei o seletor.
CSS - Curso W3C Escritrio Brasil 9
Abaixo, veja uma lista de seletores complexos e quais as suas funes. No colocarei todas as possi-
bilidades aqui porque podem haver modificaes, novos formatos ou outros formatos que podem
ser descontinuados. Para ter uma lista sempre atualizada, siga o link no final da tabela.
PADRO SIGNIFICADO CSS
elemento[atr] Elemento com um atributo especfico. 2
elemento[atr=x] Elemento que tenha um atributo com um valor especfico igual a x. 2
elemento[atr~=x] Elemento com um atributo cujo valor uma lista separada por espa-
os, sendo que um dos valores x.
2
elemento[atr^=x] Elemento com um atributo cujo valor comece exatamente com
string x.
3
elemento[atr$=x] Elemento com um atributo cujo valor termina exatamente com
string x.
3
elemento[atr*=x] Elemento com um atributo cujo valor contenha a string x. 3
elemento[atr|=en] Um elemento que tem o atributo especfico com o valor que sepa-
rado por hfen comeando com EN (da esquerda para direita).
2
elemento:root Elemento root do documento. Normalmente o HTML. 3
elemento:nth-
child(n)
Selecione um objeto N de um determinado elemento. 3
elemento:nth-last-
child(n)
Seleciona um objeto N comeando pelo ltimo objeto do elemento. 3
elemento:empty Seleciona um elemento vazio, sem filhos. Incluindo elementos de
texto.
3
elemento:enabled
elemento:disabled
Seleciona um elemento de interface que esteja habilitado ou desabi-
lidade, como selects, checkbox, radio button etc.
3
elemento:checked Seleciona elementos que esto checados, como radio buttons e
checkboxes.
3
E>F Seleciona os elementos E que so filhos diretos de F. 2
E+F Seleciona um elemento F que precede imediatamente o elemento E. 2
Lista atualizada pelo W3C http://www.w3.org/TR/css3-selectors/#selectors
CSS - Curso W3C Escritrio Brasil 11
3. GRADIENTEUma das features mais interessantes a criao de gradientes apenas utilizando CSS. Todos os
browsers mais novos como Safari, Opera, Firefox e Chrome j aceitam essa feature e voc pode
utiliz-la hoje. Os Internet Explorer atuais (8 e 9) no reconhecem ainda, contudo voc poder
utilizar imagens para estes browsers que no aceitam essa feature. Voc pode perguntar: Mas j
que terei o trabalho de produzir a imagem do gradiente, porque no utilizar imagens para todos os
browsers? Lembre-se que se utilizar uma imagem, o browser far uma requisio no servidor bus-
cando essa imagem, sem imagem, teremos uma requisio a menos, logo o site fica um pouquinho
mais rpido. Multiplique isso para todas as imagens de gradiente que voc fizer e tudo realmente
far mais sentido.
Deixe para que os browsers no adeptos baixem imagens e faam mais requisies.
Veja abaixo um exemplo de cdigo, juntamente com o fallback de imagem:
div { width:200px; height:200px; background-color: #FFF;
/* imagem caso o browser no aceite a feature */ background-image: url(images/gradiente.png);
/* Firefox 3.6+ */ background-image: -moz-linear-gradient(green, red);
/* Safari 5.1+, Chrome 10+ */ background-image: -webkit-linear-gradient(green, red);
/* Opera 11.10+ */ background-image: -o-linear-gradient(green, red);}
Ateno: At que os browsers implementem de vez essa feature, iremos utilizar seus prefixos.
Como ficou:
Stops ou definindo o tamanho do seu gradienteO padro que o gradiente ocupe 100% do elemento como vimos no exemplo anterior, mas muitas
vezes queremos fazer apenas um detalhe.
Nesse caso ns temos que definir um STOP, para que o browser saiba onde uma cor deve terminar
para comear a outra. Perceba o 20% ao lado da cor vermelha. O browser calcula quanto 20% da
altura (ou largura dependendo do caso) do elemento, e comea o gradiente da cor exatamente ali.
O cdigo de exemplo segue abaixo:
/* Firefox 3.6+ */ background-image: -moz-linear-gradient(green, red 20%);
/* Safari 5.1+, Chrome 10+ */ background-image: -webkit-linear-gradient(green, red 20%);
/* Opera 11.10+ */ background-image: -o-linear-gradient(green, red 20%);
Veja o resultado:
CSS - Curso W3C Escritrio Brasil 13
Se colocarmos um valor para o verde, ns iremos conseguir efeitos que antes s conseguiramos no
Illustrator ou no Photoshop. Segue o cdigo e o resultado logo aps:
/* Firefox 3.6+ */ background-image: -moz-linear-gradient(green 10%, red 20%);
/* Safari 5.1+, Chrome 10+ */ background-image: -webkit-linear-gradient(green 10%, red 20%);
/* Opera 11.10+ */ background-image: -o-linear-gradient(green 10%, red 20%);
Perceba que o tamanho da transio vai ficando menor medida que vamos aumentando as por-
centagens. Muito, mas muito til.
CSS - Curso W3C Escritrio Brasil 15
4. COLUMNSCom o controle de colunas no CSS, podemos definir colunas de texto de forma automtica. At
hoje no havia maneira de fazer isso de maneira inteligente com CSS e o grupo de propriedades
columns pode fazer isso de maneira livre de gambiarras.
column-countA propriedade column-count define a quantidade de colunas ter o bloco de textos.
/* Define a quantidade de colunas, a largura definida uniforme-mente. */-moz-column-count: 2;-webkit-column-count: 2;
column-widthCom a propriedade column-width definimos a largura destas colunas.
/* Define qual a largura mnima para as colunas. Se as colunas forem espremidas, fazendo com que a largura delas fique menor que este valor, elas se transformam em 1 coluna automaticamente */-moz-column-width: 400px; -webkit-column-width: 400px;
Fiz alguns testes aqui e h uma diferena entre o Firefox 3.5 e o Safari 4 (Public Beta).
O column-width define a largura mnima das colunas. Na documentao do W3C a seguinte:
imagine que voc tenha uma rea disponvel para as colunas de 100px. Ou seja, voc tem um div
com 100px de largura (width). E voc define que as larguras destas colunas (column-width) sejam
de 45px. Logo, haver 10px de sobra, e as colunas iro automaticamente ter 50px de largura, preen-
chendo este espao disponvel. esse o comportamento que o Firefox adota.
J no Safari, acontece o seguinte: se voc define um column-width, as colunas obedecem a esse va-
lor e no preenchem o espao disponvel, como acontece na explicao do W3C e como acontece
tambm no Firefox. Dessa forma faz mais sentido para mim.
Como a propriedade no est 100% aprovada ainda, h tempo para que isso seja modificado no-
vamente. Talvez a mudana da nomenclatura da classe para column-min-width ou algo parecida
venha a calhar, assim, ficamos com os dois resultados citados, que so bem teis para ns de qual-
quer maneira.
column-gapA propriedade column-gap cria um espao entre as colunas, um gap.
/* Define o espao entre as colunas. */-moz-column-gap: 50px;-webkit-column-gap: 50px;
Utilizamos aqui os prefixos -moz- e -webkit-, estas propriedades no funcionam oficialmente em
nenhum browser. Mas j podem ser usados em browsers como Firefox e Safari.
CSS - Curso W3C Escritrio Brasil 17
5. TRANSFORM2DA propriedade transform manipula a forma com que o elemento aparecer na tela. Voc pode-
r manipular sua perspectiva, escala e ngulos. Uma transformao especificada utilizando a
propriedade transform. Os browsers que suportam essa propriedade, a suportam com o prefixo
especificado.
Os valores possveis at agora esto especificados abaixo:
scaleO valor scale modificar a dimenso do elemento. Ele aumentar proporcionalmente o tama-nho do elemento levando em considerao o tamanho original do elemento.
skewSkew modificar os ngulos dos elementos. Voc pode modificar os ngulos individualmente dos eixos X e Y como no cdigo abaixo:
-webkit-transform: skewY(30deg); -webkit-transform: skewX(30deg);
translationO translation mover o elemento no eixo X e Y. O interessante que voc no precisa se pre-ocupar com floats, positions, margins e etc. Se voc aplica o translation, ele mover o objeto e pronto.
rotateO rotate rotaciona o elemento levando em considerao seu ngulo, especialmente quando o ngulo personalizado com o transform-origin.
CSS Transform na prticaVeja o cdigo abaixo e seu respectivo resultado:
img { -webkit-transform: skew(30deg); /* para webkit */ -moz-transform: skew(30deg); /* para gecko */ -o-transform: skew(30deg); /* para opera */ transform: skew(30deg); /* para browsers sem prefixo */}
O cdigo acima determina que o ngulo da imagem seja de 30deg. Colocamos um exemplo para
cada prefixo de browser. Ficando assim:
Vrias transformaes em um nico elemento
Para utilizarmos vrios valores ao mesmo tempo em um mesmo elemento, basta definir vrios va-
lores separando-os com espaos em uma mesma propriedade transform:
img { -webkit-transform: scale(1.5) skew(30deg); /* para webkit */ -moz-transform: scale(1.5) skew(30deg); /* para gecko */ -o-transform: scale(1.5) skew(30deg); /* para opera */ transform: scale(1.5) skew(30deg); /* para browsers sem prefi-xo */}
transform-originA propriedade transform-origin define qual o ponto do elemento a transformao ter origem. A
sintaxe idntica ao background-position. Observe o cdigo abaixo:
img { -webkit-transform-origin: 10px 10px; /* para webkit */ -moz-transform-origin: 10px 10px; /* para webkit */ -o-transform-origin: 10px 10px; /* para webkit */ transform-origin: 10px 10px; /* para webkit */}
Como padro as transies sempre acontecem tendo como ponto de ncora o centro do objeto.
H algumas situaes que pode ser que voc queira modificar essa ncora, fazendo com que por
CSS - Curso W3C Escritrio Brasil 19
exemplo, a rotao acontea em algum dos cantos do elemento. O cdigo de exemplo acima far
com que a transformao acontea a partir dos 10px do topo no canto esquerdo. Veja a compara-
o entre o padro e o resultado do cdigo acima.
A propriedade transform fica mais interessante quando a utilizamos com a propriedade transition,
onde podemos executar algumas animaes bsicas manipulando os valores de transformao.
CSS - Curso W3C Escritrio Brasil 21
6. TRANSIESEANIMAESDurante muito tempo o CSS s serviu para pintar quadradinhos e mais nada. Desde quando o
pessoal do WaSP organizou todo o movimento dos Padres Web fazendo com que todos os desen-
volvedores, fabricantes de browsers e at mesmo o W3C acreditassem no poder dos padres no
houve grandes atualizaes no CSS. Praticamente formatvamos font, background, cor, tamanhos
e medidas de distncia e posio.
A propriedade transition, a regra keyframe e outras propriedades vieram vitaminar a funo que
o CSS tem perante o HTML acrescentando maneiras de produzirmos animaes e transies. No
estou dizendo que voc far animaes complicadas, com diversos detalhes tcnicos e etc. Para
esse tipo de resultado existem outras ferramentas, incluindo Canvas e SVG, que com certeza faro
um trabalho melhor com menos esforo. Mas fato que as animaes via CSS nos ajudar a levar a
experincia do usurio para outro patamar.
Lembrando que o nvel de suporte de algumas dessas tcnicas ainda muito baixo. A propriedade
transition funciona em boa parte dos browsers atuais. Mas a regra keyframe que nos permite con-
trolar as fases de uma animao ainda muito restrito. Para uma tabela mais atual e detalhada de
suporte e compatibilidade, faa uma procura no Google. Onde for possvel demonstrarei o cdigo
com o prefixo dos browsers que suportam as propriedades.
O bsico: propriedade transitionA propriedade transition praticamente auto-explicativa. Sua sintaxe to simples que talvez at
dispense explicaes mais elaboradas. Vamos comear com o cdigo abaixo:
a { color: white; background: gray;}
No cdigo definimos que o link ter sua cor de texto igual a preta e seu background ser cinza.
O resultado esperado que ao passar o mouse no link a cor do texto seja modificada, mudando do
branco para o preto e que a cor de background mude de cinza para vermelho. O cdigo abaixo faz
exatamente isso:
a { color: white; background: gray;}
a:hover { color: black; background: red;}
O problema que a transio muito brusca. O browser apenas modifica as caractersticas entre os
dois blocos e pronto. No h nenhuma transio suave entre os dois estados.
Podemos fazer a mudana de um estado para outro utilizando a propriedade transition. Suponha
que ao passar o mouse, as mudanas acontecessem em um intervalo de meio segundo. Bastaria
colocar a propriedade transition no a:hover e pronto. Ao passar o mouse, o browser modificaria as
caractersticas do link com uma pequena transio de meio segundo. O cdigo seria como se segue
abaixo:
a:hover { color: black; background: red; -webkit-transition: 0.5s;}
CSS - Curso W3C Escritrio Brasil 23
Dessa forma a transio apenas acontece quando o hover ativado. O problema que ao tirar o
mouse, o browser volta bruscamente para as caractersticas iniciais. Para modificar isso basta inse-
rir tambm a propriedade transition no estado inicial.
a { color: white; background: gray; -webkit-transition: 0.5s;}
a:hover { color: black; background: red; -webkit-transition: 0.5s;}
O que a propriedade transition faz comparar os valores das propriedades em comum entre os dois
estados do link ou de qualquer outro elemento, assim ela modifica suavemente os valores quando
h a ativao da funo. Esta uma tcnica simples e que serve para manipularmos transies b-
sicas como cor, tamanho, posio etc.
Agora suponha que em um bloco h uma determinada propriedade que no outro bloco no h,
como no cdigo abaixo:
a { border:1px solid orange; color: white; background: gray; -webkit-transition: 0.5s;}
a:hover { color: black; background: red; -webkit-transition: 0.5s;}
Nesse caso o browser detecta que h uma propriedade no primeiro estado, mas no no segundo,
por isso ele no faz a transio desta propriedade, apenas das propriedades em comuns.
Abaixo veja o cdigo. copie em um arquivo HTML e veja o efeito:
CSS Transition a { color:white; background:gray; -webkit-transition: 0.5s linear; } a:hover { color:black; background:red; -webkit-transition: 0.5s linear; }
Link! Hello World!
Propriedade animation e regra keyframeA propriedade trasition trabalha de forma muito simples e inflexvel. Voc praticamente diz para o
browser qual o valor inicial e o valor final para que ele aplique a transio automaticamente, con-
trolamos praticamente apenas o tempo de execuo. Para termos mais controle sobre a animao
temos a propriedade animation que trabalha juntamente com a rule keyframe.
Basicamente voc consegue controlar as caractersticas do objeto e suas diversas transformaes
definindo fases da animao. Observe o cdigo abaixo e veja seu funcionamento:
@-webkit-keyframes rodar { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); }}
CSS - Curso W3C Escritrio Brasil 25
O cdigo acima define um valor inicial e um valor final. Agora vamos aplicar esse cdigo a um
elemento. Minha ideia fazer um DIV girar. ;-)
O cdigo HTML at agora este. Fiz apenas um div e defini este keyframe:
@-webkit-keyframes rodaroda { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } }
Primeiro voc define a funo de animao, no caso o nosso cdigo que define um valor inicial de
0 graus e um valor final de 360 graus. Agora vamos definir as caractersticas deste DIV.
div { width:50px; height:50px; margin:30% auto 0; background:black;}
Nas primeiras linhas defini qual ser o estilo do div. Ele ter uma largura e uma altura de 50px. A
margin de 30% do topo garantir um espao entre o objeto e o topo do documento, e background
preto.
A propriedade animation tem uma srie de propriedades que podem ser resumidas em um
shortcode bem simples. Veja a tabela logo a seguir para entender o que cada propriedade significa:
Propriedade Definio
animation-name Especificamos o nome da funo de animao
animation-
duration
Define a durao da animao. O valor declarado em segundos.
animation-timing-
function
Descreve qual ser a progresso da animao a cada ciclo de durao.
Existem uma srie de valores possveis e que pode ser que o seu navegador
ainda no suporte, mas so eles: ease, linear, ease-in, ease-out, ease-in-out,
cubic-bezier(, , , ) [, ease, linear,
ease-in, ease-out, ease-in-out, cubic-bezier(, , , )]*
O valor padro ease.
animation-
interation-count
Define o nmero de vezes que o ciclo deve acontecer. O padro um, ou
seja, a animao acontece uma vez e pra. Pode ser tambm infinito defi-
nindo o valor infinite no valor.
animation-
direction
Define se a animao ir acontecer ou no no sentido inverso em ciclos
alternados. Ou seja, se a animao est acontecendo no sentido horrio, ao
acabar a animao, o browser faz a mesma animao no elemento, mas no
sentido anti-horrio. Os valores so alternate ou normal.
animation-play-
state
Define se a animao est acontecendo ou se est pausada. Voc poder por
exemplo, via script, pausar a animao se ela estiver acontecendo. Os valo-
res so running ou paused.
animation-delay Define quando a animao ir comear. Ou seja, voc define um tempo
para que a animao inicie. O valor 0, significa que a animao comear
imediatamente.
CSS - Curso W3C Escritrio Brasil 27
Voltando para o nosso cdigo, vamos aplicar algumas dessas propriedades:
div { width:50px; height:50px; margin:30% auto 0; background:black;
-webkit-animation-name: rodaroda; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate;
}
Veja que na propriedade animation-name chamamos o mesmo nome que demos na nossa funo
de keyframe logo no comeo da explicao. Depois definimos uma durao de ciclo de meio se-
gundo. Definimos que o comportamento da animao ser linear, e com a propriedade animation-
iteration-count definimos que ele girar infinitamente. E por ltimo definimos pelo animation-di-
rection que a animao dever ser alternada, ou seja, o DIV girar para um lado, e quando alcanar
o final da animao, o browser dever alternar essa animao.
Podemos melhorar esse cdigo utilizando a verso shortcode, que mais recomendado. Veja a or-
dem que devemos escrever as propriedades animation em forma de shortcode:
animation: [ || || || || || ] [, [ || || || || || ] ]*
Aplicando isso ao nosso cdigo:
div { width:50px; height:50px; margin:30% auto 0; background:black;
-webkit-animation: rodaroda 0.5s linear infinite alternate;}
Pronto. Agora temos um elemento que gira sem parar, hora para direita hora para esquerda.
Definindo ciclosNs definimos no keyframe do nosso ltimo exemplo apenas um incio e um fim. Mas e se quiss-
semos que ao chegar na metade da animao o nosso elemento ficasse com o background verme-
lho? Ou que ele mudasse de tamanho, posio e etc.? a onde podemos flexibilizar melhor nosso
keyframe definindo as fases da animao. Por exemplo, podemos dizer para o elemento ter uma cor
de background diferente quando a animao chegar aos 10% do ciclo, e assim por diante.
Veja o exemplo:
@-webkit-keyframes rodaroda { 0% { -webkit-transform:rotate(0deg); } 50% { background:red; -webkit-transform:rotate(180deg); } 100% { -webkit-transform:rotate(360deg); } }
Definimos acima que o incio da animao o elemento comear na posio normal, 0 graus.
Quando a animao chegar aos 50% do ciclo, o elemento dever ter girado para 180 graus e o ba-
ckground dele deve ser vermelho. E quando a animao chegar a 100% o elemento deve ter girado
ao todo 360 graus e o background, como no est sendo definido, volta ao valor padro, no nosso
caso black, que foi definido no CSS onde formatamos este DIV.
Logo nosso elemento girar pra sempre e ficar alternando a cor de fundo de preto para vermelho.
Fiz um exemplo bem simples modificando apenas o background, mas voc pode muito bem definir
um position e modificar os valores de left e top para fazer o elemento se movimentar.
CSS - Curso W3C Escritrio Brasil 29
No exemplo tambm defini apenas 3 estgios (0%, 50% e 100%) voc pode definir um maior n-
mero de estgios: 5%, 10%, 12%, 16% e etc... Adequando as fases da animao s suas necessidades.
H exemplos muito interessantes na internet onde podemos ver todo o poder das animaes feitas
pela CSS. Veja o exemplo que fizemos aqui neste texto no endereo: http://migre.me/4ubym
CSS - Curso W3C Escritrio Brasil 31
7. BORDASDefinir imagem para as bordas uma daquelas propriedades da CSS que voc se pergunta como
vivamos antes de conhec-la. muito mais fcil entender testando na prtica, por isso sugiro que
se voc estiver perto de um computador, faa testes enquanto l este texto. A explicao pode no
ser suficiente em algumas partes, mas a prtica ir ajud-lo a entender.
Esta propriedade ainda est em fase de testes pelos browsers, por isso utilizaremos os prefixos para
ver os resultados.Utilizarei apenas o prefixo do Safari, mas o Firefox j entende essa propriedade
muito bem.
A sintaxe do border-image se divide em trs partes: 1) URL da imagem que ser utilizada. 2)
Tamanho do slice das bordas. 3) Como o browser ir aplicar a imagem na borda.
Segue um exemplo da sintaxe abaixo:
a { display:block; width:100px; -webkit-border-image: url(border.gif) 10 10 10 10 stretch;}
Acima definimos uma imagem com o nome de border.gif, logo depois definimos o width de cada
uma das bordas do elemento. A sintaxe igual a outras propriedades com 4 valores: top, right, bot-
tom, left. E logo depois colocamos qual o tipo de tratamento que a imagem vai receber.
Dividindo a imagemPara posicionar a imagem devidamente em seu objeto o browser divide a imagem em 9 sees:
Quando a imagem colocada no elemento, o browser posiciona os cantos da imagem juntamente
com os cantos correspondentes do elemento. Ou seja, o bloco 1 da imagem colocado no canto
superior esquerdo, o 3 no canto superior direito e assim por diante. Se voc fizer o teste, a imagem
aparecer no elemento como se estivesse desproporcional. Isso normal porque a imagem deve
seguir as propores do elemento e no as suas prprias.
Comportamento da imagemO comportamento da imagem a parte mais importante porque define como o centro da imagem
(no caso do nosso exemplo a seo de nmero 5), ir ser tratada. H vrios valores, mas que mais
simples de se entender a stretch, que estica e escala a imagem para o tamanho do elemento aplica-
do. H outros valores como round e repeat. Mas hoje alguns browsers no tem tanto suporte e aca-
bam ou ignorando esses valores ou como no caso do Safari e o Chrome, interpretam o round como
o repeat. Vamos nos concentrar com o stretch e voc entender como funciona a propriedade.
AplicaoVamos utilizar a imagem abaixo para aplicar a propriedade. Iremos fazer um boto ao estilo iPho-
ne. A coisa simples e sugiro que voc faa testes individualmente brincando com os valores das
bordas e com diversas outras imagens para ver como funciona o recurso.
Irei aplicar o estilo em um link. O cdigo que irei aplicar segue abaixo:
a { display:block; width:100px; text-align:center; font:bold 13px verdana, arial, tahoma, sans-serif; text-decoration:none; color:black;}
CSS - Curso W3C Escritrio Brasil 33
Para inserir a imagem, colocamos as duas linhas abaixo:
border-width:10px; -webkit-border-image: url(button.png) 10 stretch;
Defini com a primeira linha que a borda teria 10px de largura com a propriedade border-width. Na
segunda linha define que a imagem utilizada seria a button.png, que as reas da imagem teriam que
se estender por 10px, e o valor stretch define que a imagem cobrir o elemento inteiro, o resultado
segue abaixo:
Para voc ver como tudo ali meio estranho. Se eu diminuir o valor de 10 do border-image, que
o valor que define quanto a imagem deve se estender nas bordas, veja como fica:
Temos o border-width definindo a largura da borda, mas no temos nenhum valor dizendo quanto
dessa largura a imagem deve tomar.
Os efeitos so bem estranhos quando esses valores esto mal formatados. Por isso, teste na prtica
essa propriedade para que no haja problemas a implementar em seus projetos. O pulo da gato,
para mim, a propriedade border-width.
CSS - Curso W3C Escritrio Brasil 35
8. MLTIPLOSBACKGROUNDSQuem nunca teve que criar um background onde havia um gradiente em cima, embaixo e dos
lados? Voc sabe que para criar algo parecido voc no pode utilizar uma imagem s. A soluo
at hoje seria criar 4 elementos divs aninhados (ou seja, um dentro do outro) e aplicar um pedao
deste background em cada um destes elementos para dar a sensao de um background nico. O
resultado interessante mas o meio que isso feito no nada bonito. Voc era obrigado a declarar
4 elementos inteis no seu HTML apenas para compensar um efeito visual. A possibilidade de
atribuirmos mltiplos backgrounds em apenas um elemento a feature que vai ajud-lo a no sujar
seu cdigo.
A sintaxe para mltiplos backgrounds praticamente idntica a sintaxe para definir um back-
ground. Segue abaixo um exemplo:
div { width:600px; height:500px; background: url(img1.png) top left repeat-X, url(img2.png) bottom left repeat-Y; }
Definimos apenas uma propriedade background, o valor dessa propriedade em vez de conter ape-
nas um valor como normalmente fazemos, poder haver vrios, com suas respectivas definies de
posio, repeat e attachment (fixed).
CSS - Curso W3C Escritrio Brasil 37
9. MDULOTEMPLATELAYOUTTalvez voc me chame de louco, mas para mim a parte mais fcil de desenvolver um site com CSS
o planejamento e diagramao do layout. Coincidentemente a parte que mais os desenvolvedo-
res tem problemas crossbrowser ou por falta de recursos mais avanados. Mas se voc parar para
pensar, apenas uma propriedade cuida dessa parte, que a propriedade float. De longe, para mim,
o float a propriedade mais importante que h no CSS. Se o IE no soubesse o que float, at hoje
ns no estaramos fazendo sites com CSS. O float cuida de toda a diagramao do site, desde os
elementos que definiro as reas mestres do site at os pequenos detalhes de imagens e cones.
A propriedade float muito simples de se entender. O problema no o funcionamento, mas os
efeitos que a propriedade float causa nos elementos prximos. Se voc pede para duas colunas fica-
rem flutuando esquerda e outra coluna direita, o rodap sobe. Ou se voc coloca um elemento
envolvendo outros elementos com float, esse elemento perde a altura. Estes so problemas corri-
queiros que j tem solues inteligentes e que no apresentam chateaes mais graves.
Infelizmente o float no o ideal para a diagramao e organizao dos elementos do layout. Ele
resolve muitos problemas, mas deixa a desejar em diversos sentidos. O float est completamente
ligado a ordem dos elementos no HTML. Existem tcnicas que voc consegue fazer quase que
qualquer organizao visual sem encostar no cdigo HTML. Mas h outras necessidades que in-
variavelmente voc precisar modificar a ordem dos elementos no meio do HTML para que a
diagramao do site saia conforme o esperado. Essa organizao do HTML pode alterar desde pro-
gramao server-side e at resultados de SEO e acessibilidade. Por isso interessante que o HTML
fique organizado de forma que ele supre as necessidades dessas bases. Sua organizao visual deve
ser independente desta organizao.
Tendo em vista estes e outros problemas o W3C criou um novo mdulo. Na verdade ele no o
nico, e nem pode ser para que tenhamos diversas formas de trabalhar. O mdulo em questo
chamado de Template Layout. Esse mdulo consiste em uma forma de criarmos e organizarmos os
elementos e informaes do layout de forma menos espartana e mais flexvel.
Podemos dividir a construo do layout em duas grandes partes: 1) Definio dos elementos mes-
tres e grid a ser seguido. 2) Formatao de font, cores, background, bordas etc.
As propriedades nesta especificao trabalham associando uma poltica de layout de um elemento.
Essa poltica chamada de template-based positioning (no tem nada a ver com a propriedade
position, pelo contrrio uma alternativa) que d ao elemento uma grid invisvel para alinhar seus
elementos descendentes.
Porque o layout deve se adaptar em diferentes janelas e tamanhos de papis, as colunas e linhas do
grid deve ser fixas ou flexveis dependendo do tamanho.
O W3C mostra alguns casos comuns:
Pginas complexas com mltiplas barras de navegao em reas com posies fixas como publicidade, submenus e etc.
Formulrios complexos, onde o alinhamento de labels e campos podem ser facilmente defi-nidos com as propriedades deste mdulo com a ajuda das propriedades de margin, padding e tables.
GUIs, onde botes, toolbars, labels, cones etc, tem alinhamentos complexos e precisam estar sempre alinhados caso o tamanho ou a resoluo da tela mudam.
Medias que so paginadas, como medias de impresso onde cada pgina so divididos em reas fixas para contedos de gneros diferentes.
Template-based positioning so uma alternativa para a propriedade position com o valor abso-
lute. Antigamente lembro-me que quase todos os desenvolvedores tentavam organizar e diagra-
mar layouts utilizando position. No que seja errado, mas definitivamente no a melhor for-
ma. Costumo dizer em meus cursos e palestras que position para detalhes. Nada muito grande,
mas para pequenos detalhes. Usamos position para posicionarmos elementos que no tem rela-
o direta com sua posio no cdigo HTML. Ou seja, no importa onde o elemento esteja, o
position:absolute; ir posicionar o elemento nas coordenadas que voc quiser.
CSS - Curso W3C Escritrio Brasil 39
Sintaxe e funcionamentoO mdulo Template Layout basicamente define slots de layout para que voc encaixe e posicione
seus elementos. O mapeamento dos slots feito com duas propriedades que j conhecemos que
este mdulo adiciona mais alguns valores e funcionalidades, so as propriedades position e display.
A propriedade display ir definir como ser o Grid. Quantos slots e etc.
A propriedade position ir posicionar seus elementos nestes slots.
Veja o cdigo HTML abaixo:
... ... ... ... ...
Agora iremos definir a posio destes elementos. O cdigo CSS seria assim:
.geral { display: aaa bcd eee;}
nav.menu {position:a;}aside.menulateral {position:b;}aside.publicidade {position:d;}article.post {position:c;}footer {position:e;}
O funcionamento da propriedade displayA propriedade display define a organizao dos slots. Um slot um local onde o seu elemento fica-
r. Cada elemento fica em um slot.
Aqui o elemento display trabalha como um table, onde seu contedo ser colocando em colunas
e linhas. A nica diferena que o nmero de linhas e colunas no dependem do contedo fixa
pelo valor da propriedade. E a outra principal diferena que a ordem dos descendentes no cdigo
no importa.
Existem alguns valores para que voc trabalhe: letra, @ (arroba) e . (pronto).
Cada letra diferente um slot de contedo diferente. O @ define um sinal para um slot padro. E o
. (ponto) define um espao em branco.
Quando repetimos as letras como no exemplo anterior, tanto na horizontal quanto na vertical,
formado um slot nico que se expande para o tamanho da quantidade de slots. Lembra do colspan
ou rowspan utilizados na tabela? Pois , funciona igualzinho.
No possvel fazer um slot que no seja retangular ou vrios slots com a mesma letra. Um templa-
te sem letra nenhuma tambm no possvel. Um template com mais de um @ tambm proibido.
Se houverem esses erros a declarao ignorada pelo browser.
Pra definir a altura da linha (row-height) podemos utilizar o valor padro auto, que define altura
que a altura da linha feito de acordo com a quantidade de contedo no slot. Voc pode definir um
valor fixo para a altura. No possvel definir um valor negativo. Quando definimos um * (asters-
co) para a altura, isso quer dizer que todas as alturas de linha sero iguais.
A largura da coluna (col-width) definida com valores fixos, como o row-height. Podemos definir
tambm o valor de * que funciona exatamente igual ao altura de linha, mas aplicados a largura da
coluna. H dois valores chamados max-content e min-content que fazem com que a largura seja
determinada de acordo com o contedo. Outro valor o minmax(p,q) que funciona assim: a lar-
gura das colunas so fixadas para ser maiores ou iguais a p e menores ou iguais a q. Pode haver um
espao branco (white space) em volta de p e q. Se q > p, ento q ignorado e o minmax(p,q) trata-
do como minmax(p,p). O valor fit-content o equivalente a minmax(min-content, max-content).
CSS - Curso W3C Escritrio Brasil 41
Definindo a largura e altura dos slots
Para definir a altura dos slots, utilizamos uma sintaxe diretamente na propriedade display. Veja
abaixo um exemplo de como podemos fazer isso:
display: a a a /150px b c d e e e / 150px 100px 400px 100px;
Formatando de uma maneira que voc entenda, fica assim:
display: a a a /150px b c d e e e /150px 100px 400px 100px;
Ou seja, a primeira coluna do grid ter 100px de largura, a segunda 400px e a terceira 100px.
As medidas que coloquei ao lado, iniciando com uma / (barra) definem a altura das linhas. Logo a
primeira linha ter 150px e a terceira linha tambm. A linha do meio, como no tem altura definida
ter a altura de acordo com a quantidade de contedo.
O espao entre as colunas so definidos com . (pontos). Veja o exemplo abaixo:
display: a a a /150px . . . /50px b c d . . . /50px e e e /150px 100px 400px 100px;
No exemplo acima fiz duas colunas no cdigo compostos por pontos em vez de fazer com letras.
Isso quer dizer que entre as colunas do grid haver um espao em branco de 50px de altura. Veja a
imagem abaixo para entender melhor o cdigo:
O funcionamento da propriedade positionO valor da propriedade position especifica qual linha e coluna o elemento ser colocado no tem-
plate. Voc escreve apenas uma letra por elemento. Vrios elementos podem ser colocados em um
mesmo slot. Logo estes elementos tero o mesmo valor de position.
Abaixo veja uma imagem que pegamos diretamente do exemplo do W3C. O layout muito simples:
Este layout representado pelo cdigo abaixo. Primeiro o HTML:
navigation
Weather
There will be weather
FootballPeople like football.
ChessThere was a brawl at the chess tournament
Your HoroscopeYoure going to die (eventually).
Copyright some folks
CSS - Curso W3C Escritrio Brasil 43
Agora veja o CSS com toda a mgica:
body { display: a b 10em *;}#nav { position: a;}#content { position: b; display: c . d . e . . . . . /1em . . f . . * 1em * 1em *;}.module.news {position: c;}.module.sports {position: d;}.module.personal {position: e;}#foot {position: f;}
Lembre-se que no importa a posio dos elementos no cdigo. E essa a mgica. Podemos or-
ganizar o cdigo HTML de acordo com nossas necessidades e levando em considerao SEO,
Acessibilidade e processo de manuteno. O HTML fica totalmente intacto separado de qualquer
formatao. Muito, mas muito interessante.
Pseudo-elemento ::slot()
Voc pode formatar um slot especifico simplesmente declarando-o no CSS. Suponha que voc
queira que um determinado slot tenha um fundo diferente, alinhamento e etc... Essa formatao
ser aplicada diretamente no slot e no no elemento que voc colocou l. Fica mais simples de se
formatar porque voc no atrela um estilo ao elemento e sim ao slot. Se voc precisar posicionar
aquele elemento em outro lugar, voc consegue facilmente.
body { display: aaa bcd }body::slot(b) { background: #FF0 }body::slot(c), body::slot(d) { vertical-align: bottom }
As propriedades aplicadas no pseudo elemento slot() seguem abaixo:
Todos as propriedades background. vertical-align overflow box-shadow, block-flow e direction ainda esto sendo estudados pelo W3C se elas entraro
ou no.
CSS - Curso W3C Escritrio Brasil 45
10. CORES
RGBANormalmente em web trabalhamos com cores na forma de hexadecimal. a forma mais comum
e mais utilizada desde os primrdios do desenvolvimento web. Mesmo assim, h outros formatos
menos comuns que funcionam sem problemas, um destes formatos o RGB. O RGB so 3 con-
juntos de nmeros que comeam no 0 e vo at 255 (0% at 100%), onde o primeiro bloco define
a quantidade de vermelho (Red), o segundo bloco a quantidade de verde (Green) e o ltimo bloco
a quantidade de azul (Blue). A combinao destes nmeros formam todas as cores que voc pode
imaginar.
No HTML o RGB pode ser usado em qualquer propriedade que tenha a necessidade de cor, como:
color, background, border etc. Exemplo:
p { background:rgb(255,255,0); padding:10px; font:13px verdana; }
Este cdigo RGB define que o background o elemento P ser amarelo.
RGBA e a diferena da propriedade OPACITY
At ento ns s podamos escrever cores slidas, sem nem ao menos escolhermos a opacidade
dessa cor. O CSS3 nos trouxe a possibilidade de modificar a opacidade dos elementos via pro-
priedade opacity. Lembrando que quando modificamos a opacidade do elemento, tudo o que est
contido nele tambm fica opaco e no apenas o background ou a cor dele. Veja o exemplo abaixo
e compare as imagens.
A primeira a imagem normal, sem a aplicao de opacidade:
Agora com o bloco branco, marcado com um P, com opacidade definida. Perceba que o back-
ground e tambm a cor do texto ficaram transparentes.
Isso til mas dificulta muito quando queremos que apenas a cor de fundo de um determinado
elemento tenha a opacidade modificada. a que entra o RGBA. O RGBA funciona da mesma
forma que o RGB, ou seja, definindo uma cor para a propriedade. No caso do RGBA, alm dos 3
canais RGB (Red, Green e Blue) h um quarto canal, A (Alpha) que controla a opacidade da cor.
Nesse caso, podemos controlar a opacidade da cor do background sem afetar a opacidade dos ou-
tros elementos:
CSS - Curso W3C Escritrio Brasil 47
Veja um exemplo de cdigo aplicado abaixo:
p { background:rgba(255,255,0, 0.5); padding:10px; font:13px verdana; }
O ltimo valor referente ao canal Alpha, onde 1 totalmente visvel e 0 totalmente invisvel. No
exemplo acima est com uma opacidade de 50%.
currentColorO valor currentColor muito simples de se entender e pode ser muito til para diminuirmos o
retrabalho em alguns momentos da produo. Imagine que o currentColor uma varivel cujo seu
valor definido pelo valor da propriedade color do seletor. Veja o cdigo abaixo:
p { background:red; padding:10px; font:13px verdana; color: green; border:1px solid green; }
Note que o valor da propriedade color igual ao valor da cor da propriedade border.
H uma redundncia de cdigo, que nesse caso irrelevante, mas quando falamos de dezenas de
arquivos de CSS modulados, com centenas de linhas cada, essa redundncia pode incomodar a
produtividade. A funo do currentColor simples: ele copia para outras propriedades do mesmo
seletor o valor da propriedade color. Veja o cdigo abaixo para entender melhor:
p { background:red; padding:10px; font:13px verdana; color: green; border:1px solid currentColor; }
Veja que apliquei o valor currentColor onde deveria estar o valor de cor da propriedade border.
Agora, toda vez que o valor da propriedade color for modificado, o currentColor aplicar o mesmo
valor para a propriedade onde ela est sendo aplicada.
Isso funciona em qualquer propriedade que faa utilizao de cor como background, border, etc.
Obviamente no funciona para a propriedade color. O currentColor tambm no funciona em se-
letores separados, ou seja, voc no consegue atrelar o valor da propriedade color ao currentColor
de outro seletor.
CSS - Curso W3C Escritrio Brasil 49
11. PAGEDMEDIACom certeza voc j deve ter tentado ler um livro ou uma apostila em algum site na web e preferiu
imprimir o texto para ler off-line, no papel por ser mais confortvel ou por ser mais prtico quando
no se est conectado. Existem vrios motivos para que um leitor queira imprimir o contedo de
um site, principalmente sites com textos longos e pesados. Durante muito tempo o principal mo-
tivo era que ler na tela do computador era cansativo. Hoje isso ainda um problema, mas com o
avano das telas e do aparecimento das tablets no mercado, voc consegue passar mais tempo na
frente de uma tela lendo grandes quantidades de texto. O problema que geralmente a organizao
de pginas e o contedo no exatamente confortvel para passarmos horas lendo.
Outro problema comum que ns desenvolvedores no temos uma maneira fcil de formatar pgi-
nas. Na verdade temos, mas um pouco de gambiarra e claro, no maneira correta. A especifica-
o de Paged Media traz nos possibilita formatar as pginas, transparncias (aqueles plsticos que
usamos com retroprojetores) ou at mesmo pginas que sero vistas pelo monitor. Controlaremos
suas medidas, tamanhos, margens, quebras de pginas e etc...
Nota: Para voc no se confundir, quando digo pginas, quero dizer pginas fsicas, de papel, no
pginas web, ok? ;-)
@pageDefiniremos com CSS3 um modelo de pgina que especifica como o documento ser formatado
em uma rea retangular, chamada de page box, com larguras e alturas limitadas. Nem sempre o
page box tem referncia correspondente para uma folha de papel fsica, como normalmente conhe-
cemos em diversos formatos: folhas, transparncias e etc. Esta especificao formata o page box,
mas o browser ou o meio de acesso que o usurio est utilizando que tem a responsabilidade de
transferir o formato do page box para a folha de papel no momento da impresso.
O documento transferido no modelo da pgina para um ou mais page boxes. O page box uma
caixa retangular que ser sua rea de impresso. Isso como se fosse um viewport do browser.
Como qualquer outro box, a page box tem margin, border, padding e outras reas. O contedo e as
reas de margin do page box tem algumas funes especiais:
A rea de contedo do page box chamada de area da pgina ou page area. O contedo do docu-
mento flui na rea de pgina. Os limites da rea da pgina na primeira pgina estabelece o retngu-
lo inicial que contm o bloco do documento.
A rea da margem da page box dividido em 16 caixas de margem ou margin boxes. Voc pode
definir para cada caixa de margem sua prpria borda, margem, padding e reas de contedo.
Normalmente essas caixas de margem so usadas para definir headers e footers do documento.
Confesso que o nome utilizado (caixas de margem) meio estranho.
As propriedades do page box so determinadas pelas propriedades estabelecidas pelo page context,
o qual a regra de CSS @page. Para definir a largura e altura de uma page box no se usa as pro-
priedades width e height. O tamanho da page box especificada utilizando a propriedade size no
page context.
Terminologia e Page Model (modelo de pgina)O page box tem algumas reas simples de se entender que facilitar a explicao. Veja abaixo uma
imagem e uma explicao de suas respectivas reas:
Page box
O page box onde tudo acontece. Tenha em mente que o page box o viewport das medias impres-
sas. l que conter as reas de margem, padding, border e onde o texto ser consumido.
A largura e altura do page box determinada pela propriedade size. Em um caso simples, o page
box tem a largura e a altura de uma folha. Entretanto em casos complexos onde page box difere
CSS - Curso W3C Escritrio Brasil 51
das folhas de papel em valores e orientaes j que voc pode personalizar de acordo com sua
necessidade.
Page area
A page area a area de contedo (content area) do page box.
Margin box
Margin boxes contm boxes para header e footer. So conjunto de 16 boxes onde voc pode inserir
contedo til como nmero da pgina, ttulo do livro, etc, etc, etc. Essas reas ficam fora do Page
area. Cada um tem suas margins, paddings e bordas individuais. Veja o diagrama abaixo para vi-
sualizar melhor.
Page sheet
A folha, a pgina, a superfcie que ser impresso o contedo. A ilustrao abaixo mostra a repre-
sentao de uma folha.
Non-printable area - rea no impressa
A rea de no impresso a rea onde o dispositivo de impresso no capaz de imprimir. Esta
rea depende do dispositivo que voc est utilizando. O page box fica dentro da rea de impresso.
rea de impresso
A rea impressa onde o dispositivo de impresso capaz de imprimir. A rea de impresso o
tamanho da page sheet menos a rea de no impresso. Como a rea de no impresso, a rea til
de impresso depende muito do dispositivo. O dispositivo pode ajustar o contedo para que seja
impresso sem problemas nessa rea. Cada dispositivo tem seu meio de ajuste.
Propriedade sizeA propriedade size especifica o tamanho e a orientao da rea do de contedo, o page box. O ta-
manho do page box pode ser definida com valores absolutos (px) ou relativos (%). Voc pode usar
trs valores para definir a largura e a orientao do page box:
auto
O page box ir ter o tamanho e orientao do page sheet escolhido pelo usurio.
landscape
Define que a pgina ser impressa em modo paisagem. O page box neste caso tem o mesmo ta-
manho da pgina, mas o lado maior o horizontal. Se o tamanho da pgina no for definido, o
tamanho especificado pelo usurio e seu dispositivo.
portrait
Define que a pgina ser impressa em modo retrato. O page box neste caso tem o mesmo tamanho
da pgina, mas o lado maior o vertical. Se o tamanho da pgina no for definido, o tamanho
especificado pelo usurio e seu dispositivo.
CSS - Curso W3C Escritrio Brasil 53
Veja um exemplo abaixo:
@page { size: auto; /* auto is the valor padro */ margin: 10%; /* margem */}
Como nessa caso a margem varivel, ela est sendo relativa s dimenses da pgina. Logo se a
pgina uma A4, com as dimenses: 210mm x 297mm, as margens sero 21mm e 29.7mm.
Outro exemplo:
@page { size: 210mm 297mm; /* definem o page-sheet para um tamanho de A4 */}
Page-sizeO page-size pode ser especificado utilizando um dos media names abaixo. Isso o equivalente a
utilizar os valores escritos diretamente na propriedade size. Contudo muito melhor utilizar o
nome de um formato de formato de papel.
Formato Descrio
A5 A pgina deve ser definida para o tamanho ISO A5: 148mm x 210mm.
A4 A pgina deve ser definida para o tamanho ISO A4: 210 mm x 297 mm.
A3 A pgina deve ser definida para o tamanho ISO A3: 297mm x 420mm.
B5 A pgina deve ser definida para o tamanho ISO B3 media: 176mm x 250mm.
B4 A pgina deve ser definida para o tamanho ISO B4: 250mm x 353mm.
letter A pgina deve ser definida para o tamanho papel carta: 8.5 pol x 11 pol
Abaixo veja um exemplo de aplicao:
@page { size: A4 landscape;}
O W3C tem uma especificao muito extensa que pode ser encontrada aqui:
http://www.w3.org/TR/css3-page/
CSS - Curso W3C Escritrio Brasil 55
12. @FONT-FACEA regra @font-face utilizada para que voc utilize fontes fora do padro do sistema em seus sites.
Para que isso funcione, ns disponibilizamos as fontes necessrias em seu servidor e linkamos estas
fontes no arquivo CSS. A sintaxe bem simples e tem suporte a todos os navegadores, com algumas
ressalvas.
@font-face { font-family: helveticaneue; src: url(helveticaNeueLTStd-UltLt.otf);}
Na primeira linha voc customiza o nome da font que voc usar durante todo o projeto. Na segun-
da linha definimos a URL onde o browser procurar o arquivo da font para baixar e aplicar no site.
Voc aplica a fonte como abaixo:
p {font:36px helveticaneue, Arial, Tahoma, Sans-serif;}
Suponha que o usurio tenha a font instalada, logo ele no precisa baixar a font, assim podemos
indicar para que o browser possa utilizar o arquivo da prpria mquina do usurio. Menos requi-
sies, mais velocidade. Veja o cdigo abaixo:
@font-face { font-family: helveticaneue; src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);}
Abaixo segue uma srie de formatos que podem ser usados e que os browsers podem adotar:
String FontFormat CommonExtensions
truetype TrueType .ttf
opentype OpenType .ttf, .otf
truetype-aat TrueType with Apple Advanced
Typography extensions
.ttf
embedded-opentype Embedded OpenType .eot
woff WOFF (Web Open Font
Format)
.woff
svg SVG Font .svg, .svgz
CompatibilidadeAs verses 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT. Voc pode
encontrar qualquer conversor online que esse problema resolvido. Voc pode converter suas fon-
tes para EOT diretamente no Font Squirrel. O Safari, Firefox, Chrome e Opera aceitam fontes em
TTF e OTF.
Para suprir a necessidade de ateno do Internet Explorer, voc precisa especificar a URL da font
.eot para que o Internet Explorer possa aplicar a font corretamente. A sintaxe fica desta forma:
@font-face { font-family: helveticaneue; src: url(helveticaNeueLTStd-UltLt.eot); src: url(helveticaNeueLTStd-UltLt.otf);}
Kit de sobrevivncia
O Font Squirrel fez um pequeno favor para toda a comunidade. um sisteminha que con-
verte suas fontes para os formatos necessrios e te devolve para voc utilizar em seus sites:
http://migre.me/4qST9
CSS - Curso W3C Escritrio Brasil 57
13. PRESENTATION-LEVELSA informao na web reutilizada de diversas maneiras. Toda informao publicada reutilizada
por diversos meios de acesso, seja o seu browser, leitor de tela ou robs de busca. O HTML propor-
ciona essa liberdade para a informao. Por ser uma linguagem muito simples, podemos reutilizar
a informao marcada com HTML em diversos meios de acesso. Mas o HTML no cuida da forma
com que o usurio vai visualizar a informao em seu dispositivo. O HTML apenas exibe a infor-
mao. A maneira que o usurio consome essa informao diferente em cada um dos meios de
acesso e dispositivos. a que entra todo o poder do CSS. O CSS formata a informao para que
ela possa ser acessvel em diversos usar agents (meios de acesso). Se voc acessa o site do seu banco
pelo monitor de 22 da sua casa ou pelo seu celular, a informao tem que aparecer bem organizada
em ambos cenrios. o CSS que organiza visualmente essas informaes.
Alm disso podemos apresentar a informao de diversas formas em um mesmo dispositivo. Por
exemplo: voc pode ver uma galeria de imagens da maneira convencional, clicando nas thumbs das
fotos ou ver em forma de slideshow. Podemos levar essas experincias para websites de contedo
textual tambm. A especificao de presentation-levels uma das especificaes que levam o usu-
rio a terem contedo mostrados de uma outra forma da qual estamos acostumados. muito til
para apresentaes de slides, com efeitos, transies e etc ou qualquer documento que seria mais
bem apresentado no formato de apresentao, como uma proposta, documentos tcnicos e etc.
Como funciona o modeloO modelo por trs da especificao simples. Cada elemento no documento definido como um
elemento de apresentao ou no formato original elements presentation level - EPL.
O EPL pode ser explicito em uma folha de estilo ou calculado automaticamente baseado na posio
do elemento pela estrutura do documento. assim que o browser calcula para mostrar os elemen-
tos progressivamente, como se faz normalmente em programas de apresentao.
O elemento fica em um dos trs seguintes nveis que tambm so representadas por classes: below-
level, at-level e above-level. Dependendo da pontuao de EPL que o browser d, o elemento fica
em um determinado nvel. Essas pseudo-classes podem e devem ser modificadas via CSS.
A propriedade presentation-levelA propriedade presentation-level define como os valores de apresentao (EPL) de um determi-
nado objeto devem ser calculados. So trs valores possveis: nmeros inteiros, increment e same.
Quando definimos um valor inteiro, o elemento tem aquele valor fixo.
Quando colocamos increment, o valor do objeto aumenta um ponto em relao ao objeto anterior.
Suponha que h duas LI em uma UL. A primeira LI tem o valor de 1, a segunda tem valor de 2 e
assim por diante.
Quando definimos o valor same, o browser computa o mesmo valor do objeto anterior.
Isso tudo vai ficar mais esclarecido com os exemplos a seguir.
Utilizando o mesmo exemplo da especificao do W3C, temos o cdigo abaixo:
strategiesour strategy
divide conquer
(in that order)
their strategy
obfuscate propagate
CSS - Curso W3C Escritrio Brasil 59
Vamos definir o CSS de presentation-levels para esse HTML adicionado o cdigo CSS:
@media projection { h1 { page-break-before: always } li { presentation-level: increment } :below-level { color: black } :at-level { color: red } :above-level { color: silver } }
Definimos que o H1 ir sempre iniciar em uma nova pgina.
Mas o mais importante a propriedade presentation-level que definimos para a LI. Isso quer dizer
que a cada LI o browser contar mais um ponto.
As trs pseudo-classes que falamos no comeo do texto: below-level, at-level, above-level, que for-
mata os elementos que foram mostrados anteriores, o que elemento que est sendo mostrado e o
prximo elemento.
Sendo assim, o browser calcula a pontuao de cada um dos elementos utilizados no exemplo
como mostra abaixo:
HTML Valor de EPL
strategies 0
our strategy 0
0
divide 1
conquer 2
0
their strategy 0
0
obfuscate 1
propagate 2
0
Temos um outro exemplo, segue abaixo o HTML e logo depois a tabela com os valores de EPL:
@media projection { h1 { presentation-level: 0; } h2 { presentation-level: 1; } h3 { presentation-level: 2; } body * { presentation-level: 3; } :above-level { display: none; } }
strategiesour strategy
divide conquer
their strategy
obfuscate propagate
Perceba que agora definimos no CSS que tudo dentro de body tem o valor de 3. Logo o H1 que foi
definido como 0 pela propriedade presentation-level tem o valor de 3.
Definimos tambm display:none; para os prximos elementos. Agora veja a pontuao aplicada:
CSS - Curso W3C Escritrio Brasil 61
HTML ValordeEPL
strategies 3
ourstrategy 2
0
divide 0
conquer 0
0
theirstrategy 2
0
obfuscate 0
propagate 0
0
O W3C tem uma especificao completa e em constante atualizao do presentation-levels aqui:
http://www.w3.org/TR/css3-preslev/
1.CSSO que CSS?
2.Seletores complexosO que um seletor?Exemplo de funcionamento
3.GradienteStops ou definindo o tamanho do seu gradiente
4.Columnscolumn-countcolumn-widthcolumn-gap
5.Transform 2DCSS Transform na prticaVrias transformaes em um nico elemento
transform-origin
6.Transies e animaes O bsico: propriedade transitionPropriedade animation e regra keyframeDefinindo ciclos
7.BordasDividindo a imagemComportamento da imagemAplicao
8.Mltiplos backgrounds9.Mdulo Template LayoutSintaxe e funcionamentoO funcionamento da propriedade displayDefinindo a largura e altura dos slots
O funcionamento da propriedade positionPseudo-elemento ::slot()
10.CoresRGBARGBA e a diferena da propriedade OPACITY
currentColor
11.Paged media@pageTerminologia e Page Model (modelo de pgina)Page boxPage areaMargin boxPage sheetNon-printable area - rea no impressarea de impresso
Propriedade sizeautolandscapeportrait
Page-size
12.@font-faceCompatibilidadeKit de sobrevivncia
13.Presentation-levelsComo funciona o modeloA propriedade presentation-level
Top Related