Download - Construindo layout de sites com CSS
![Page 1: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/1.jpg)
Construindo layout
de sites com
CSSTalita Pagani
@talitapagani
XI JORNADA DE INFORMÁTICA
UNESP - BAURU
![Page 2: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/2.jpg)
Agenda
• Introdução• Inserindo o CSS em documentos HTML• Por que Folhas de Estilo em Cascata?• Seletores• Propriedades• O Box Model• Na Prática: estilizando um documento XHTML com CSS• Diretrizes para melhorar o desenvolvimento de layouts• O que vem por aí com o CSS 3
![Page 3: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/3.jpg)
Agenda
• Introdução• Inserindo o CSS em documentos HTML• Por que Folhas de Estilo em Cascata?• Seletores• Propriedades• O Box Model• Na Prática: estilizando um documento XHTML com CSS• Diretrizes para melhorar o desenvolvimento de layouts• O que vem por aí com o CSS 3
![Page 4: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/4.jpg)
Introdução
• Cascading Style Sheets ou Folhas de Estilo em Cascata
• Linguagem de formatação para documentos HTML e XHTML
• Separa o estilo do conteúdo• Criação e manutenção do design ficam mais
fáceis e consistentes
![Page 5: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/5.jpg)
Introdução
• Principais especificações do CSS– CSS 1 (1996, 1999): continha apenas propriedades
básicas– CSS 2.1: versão mais utilizada atualmente– CSS 3: em desenvolvimento, contém novas
propriedades, mas já pode ser utilizada
![Page 6: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/6.jpg)
Introdução
![Page 7: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/7.jpg)
Introdução
arquivo.html
estilo.css
arquivo.html
![Page 8: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/8.jpg)
Agenda
• Introdução• Inserindo o CSS em documentos HTML• Por que Folhas de Estilo em Cascata?• Seletores• Propriedades• O Box Model• Na Prática: estilizando um documento XHTML com CSS• Diretrizes para melhorar o desenvolvimento de layouts• O que vem por aí com o CSS 3
![Page 9: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/9.jpg)
Inserindo o CSS em documento HTML
• Inline– Insere as definições de estilo diretamente no elemento (não
recomendado) • <p style=”color: #F00;”>Conteúdo</p>
• Embeded– O código é embutido diretamente em um arquivo HTML
• <style type=”text/css”> p { color: #F00; } </style>
• Arquivo Externo– Todas as definições de estilo ficam centralizadas em um arquivo externo
*.css que deve ser linkado aos arquivos HTML que a utilizarão, dentro da tag <head>. • <link rel="stylesheet" type="text/css" href="structure.css" />
![Page 10: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/10.jpg)
Agenda
• Introdução• Inserindo o CSS em documentos HTML• Por que Folhas de Estilo em Cascata?• Seletores• Propriedades• O Box Model• Na Prática: estilizando um documento XHTML com CSS• Diretrizes para melhorar o desenvolvimento de layouts• O que vem por aí com o CSS 3
![Page 11: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/11.jpg)
Por que Folhas de Estilo em Cascata?
• Prioridade e precedência de estilos• Quando várias regras são aplicadas a uma
elemento, entra em cena as regras de precedência em cascata:– Estilo inline (maior precedência)– Folha de estilo embutida– Folha de estilo linkada– Estilo padrão do navegador (menor precedência)
![Page 12: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/12.jpg)
Agenda
• Introdução• Inserindo o CSS em documentos HTML• Por que Folhas de Estilo em Cascata?• Seletores• Propriedades• O Box Model• Na Prática: estilizando um documento XHTML com CSS• Diretrizes para melhorar o desenvolvimento de layouts• O que vem por aí com o CSS 3
![Page 13: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/13.jpg)
Seletores
seletor { propriedade: valor; }
Seletor que defineo elemento quereceberá o estilo
Declaração
Um atributo que seráalterado (bordas, margem,fonte, espaçamento, etc.)
Valor da propriedade,podendo ser numérico,
texto, medida, código, etc.
Bloco de Declarações
![Page 14: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/14.jpg)
Seletores
• Um seletor pode ser:– Uma tag HTML (ex.: p {...}, div {...}, h1 {...}, etc.)– Uma classe
• Definição de estilo que pode ser utilizada por mais de um elemento na mesma página, criando assim uma categoria . Começam sempre com um ponto e são utilizadas no atributo class do HTML
– Um ID• constitui uma definição/identificação única e só pode ser
utilizada para apenas um elemento em cada página. Começam com # e são utilizados na propriedade id do HTML
![Page 15: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/15.jpg)
Seletores• Um seletor pode ser:– Seletores mistos (ex.: p.destaque {...}, div#header {...})– Seletores agrupados (ex.: h1, p, div {...} )
• Se vários elementos possuem as mesmas propriedades, pode-se aplicá-las em uma única declaração, separando os seletores com vírgula
– Seletores encadeados (ex.: #coluna div p {...})• Também chamados de seletores contextuais, definem uma regra para
especificar o estilo de um elemento dentro de outros elementos– Pseudo-classes (ex.: :link, :active, :hover, :visited, :first-child,
etc.)– E combinações de todas essas formas
![Page 16: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/16.jpg)
Agenda
• Introdução• Inserindo o CSS em documentos HTML• Por que Folhas de Estilo em Cascata?• Seletores• Propriedades• O Box Model• Na Prática: estilizando um documento XHTML com CSS• Diretrizes para melhorar o desenvolvimento de layouts• O que vem por aí com o CSS 3
![Page 17: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/17.jpg)
Principais Propriedades
• Plano de Fundo:– background-color – background-image – background-repeat (repeat, repeat-x, repeat-y, no-
repeat) – background-attachment (fixed, scroll)– background-position– Forma abreviada: background
• background: #FC0 url(imagem.gif) no-repeat center top;
![Page 18: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/18.jpg)
Principais Propriedades• Bordas
– border-bottom (<width> <style> <color>)• border-bottom-color• border-bottom-style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset,
outset, inherit)• border-bottom-width
– border-left– border-right– border-top– Todas juntas: border
• border-color• border-style• border-width
– outline-color– outline-style– outline-width
border: 2px solid #FF9900;
border: 2px solid #FF9900;border-right-color: #4A7EBB;
border-bottom-color: #4A7EBB;
border: 2px solid #FF9900;outline: 1px solid #000000;
![Page 19: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/19.jpg)
Principais Propriedades
• Dimensões– height– min-height– max-height– width– min-width– max-width
![Page 20: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/20.jpg)
Principais Propriedades
• Texto– Font-style– Font-variant– font-weight– font-size– line-height– font-family– Forma abreviada: font
• font: italic bold 12px/18px Arial, Helvetica, sans-serif;
![Page 21: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/21.jpg)
Principais Propriedades
• Texto– color
• color: #036;– letter-spacing– text-align (center, left, right, justify)– text-decoration (none, underline, overline, line-
through, blink)– text-indent– text-transform (none, capitalize, uppercase, lowercase)– white-space (normal, pre, nowrap)
![Page 22: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/22.jpg)
Principais Propriedades
• Lista– list-style-image (url(“imagem"))– list-style-position (inside, outside)– list-style-type (none, circle, disc, square, armenian,
decimal, decimal-leading-zero, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman)
– Forma abreviada: list-style• list-style: inside square url("/images/blueball.gif");
![Page 23: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/23.jpg)
Principais Propriedades
• Margens– margin-bottom– margin-left– margin-right– margin-top– Forma abreviada: margin (top right bottom left)• margin: 10px 5px 2px 150px;• margin: 10px auto;
![Page 24: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/24.jpg)
Principais Propriedades
• Espaçamento interno– padding-bottom– padding-left– padding-right– padding-top– Forma abreviada: padding (top right bottom left)• padding: 8px 10px 8px 20px;• padding: 10px 5px;
![Page 25: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/25.jpg)
Principais Propriedades• Posicionamento
– float (left, right, none)– clear (left, right, both, none)– display (block, inline, inline-block, inline-table, list-item, run-in, table, table-
caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group, none)
– overflow (visible, hidden, scroll, auto)– position (absolute, fixed, relative, static)– top– right– left– bottom– visibility (visible, hidden, collapse)– z-index
![Page 26: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/26.jpg)
Principais Propriedades
![Page 27: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/27.jpg)
Principais Propriedades
![Page 28: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/28.jpg)
Principais Propriedades
• Pseudo-classes– :active– :focus– :hover– :link– :visited– :first-child– :first-letter– :after– :before
![Page 29: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/29.jpg)
Agenda
• Introdução• Inserindo o CSS em documentos HTML• Por que Folhas de Estilo em Cascata?• Seletores• Propriedades• O Box Model• Na Prática: estilizando um documento XHTML com CSS• Diretrizes para melhorar o desenvolvimento de layouts• O que vem por aí com o CSS 3
![Page 30: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/30.jpg)
O Box Model
• Padrão de renderização ou apresentação visual de um box (container de informações) segundo a formatação CSS.
![Page 31: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/31.jpg)
O Box Model
![Page 32: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/32.jpg)
O Box Model
• Se uma div possuir largura e altura de 200 pixels e padding de 10 pixels em todas as direções, o navegador irá mostrar uma caixa com 220 pixels de largura e altura
![Page 33: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/33.jpg)
Agenda
• Introdução• Inserindo o CSS em documentos HTML• Por que Folhas de Estilo em Cascata?• Seletores• Propriedades• O Box Model• Na Prática: estilizando um documento XHTML com CSS• Diretrizes para melhorar o desenvolvimento de layouts• O que vem por aí com o CSS 3
![Page 34: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/34.jpg)
Na Prática
• Iremos estilizar um documento HTML pronto utilizando as propriedades CSS
![Page 35: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/35.jpg)
Na Prática
![Page 36: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/36.jpg)
Na Prática
.wrapper
![Page 37: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/37.jpg)
Na Prática
.header
.content
.footer
.navbar
![Page 38: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/38.jpg)
Na Prática
.mainContent .sidebar
![Page 39: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/39.jpg)
Na Prática• Baixar os arquivos do minicurso em
http://www.talitapagani.com/material/site_minicurso.zip e descompactar na sua máquina
• Abrir o Dreamweaver• Ctrl+N para criar um nova arquivo do tipo CSS
![Page 40: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/40.jpg)
Na Prática
• Salve o arquivo com o nome estilo.css na mesma pasta do arquivo index.html
• Abrir o arquivo index.html no Firefox, no Internet Explorer e no IETester
![Page 41: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/41.jpg)
Na Prática
• Começando: Declaração Reset*{ border: none; margin: 0; padding: 0; }
![Page 42: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/42.jpg)
Na Prática
body
{ background: #069 url(images/bg_body.jpg) repeat-x 0 0; font:
normal 12px/18px Arial, Helvetica, sans-serif; padding: 20px; }
a, a:visited
{ color: #069; }
a:hover
{ color: #333; text-decoration: none; }
![Page 43: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/43.jpg)
Na Prática
/* Estrutura */
.wrapper
{ background: #FFF; border: 1px solid #666;
height: 100%; margin: 0 auto 0 auto;
overflow: hidden; padding: 10px; width:
980px; }
![Page 44: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/44.jpg)
Na Prática
.header
{ height: 100%; position: relative;
width: 100% }
.header img
{ vertical-align: middle; }
![Page 45: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/45.jpg)
Na Prática
.content
{ height: 100%; overflow: hidden; padding: 10px 0 10px 0; }
.mainContent
{ float: left; width: 760px; }
.sidebar
{ float: left; margin: 0 0 0 20px; width: 200px; }
.footer
{ border-top: 3px solid #999; clear: both; }
![Page 46: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/46.jpg)
Na Prática
/* Caixa de Busca */
.search
{ bottom: 80px; position: absolute; right: 0px; width: 400px; }
.search input
{ border: 1px solid #999; padding: 3px; width: 300px; }
.search button
{ background: #F60; border: 2px outset #F60; color: #FFF; font: bold
14px Arial, Helvetica, sans-serif; margin: 0 0 0 10px; }
![Page 47: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/47.jpg)
Na Prática/* Menu de Navegação */
.navbar
{ background: url(images/bg_navbar.jpg) repeat-x 0 0; font-size: 14px; height: 42px; margin: 0; }
.navbar li
{ float: left; list-style: none; margin: 0 10px 0 10px; }
.navbar li a, .navbar li a:visited
{ color: #FFF; display: block; font-weight: bold; line-height: 42px; text-decoration: none; }
.navbar .menuActive
{ margin-top: 5px; }
.navbar .menuActive a, .navbar .menuActive a:visited
{ background: #FFF; color: #F60; padding: 0 10px 0 10px; line-height: 37px; }
![Page 48: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/48.jpg)
Na Prática/* Menu do footer */
.footerNavbar
{ padding: 10px 0 10px 0; }
.footerNavbar li
{ float: left; list-style: none; margin: 0 10px 0 10px; }
.footerNavbar li a, .footerNavbar li a:visited
{ font-size: 11px; font-weight: bold; }
.footerNavbar .copyright
{ float: right; }
![Page 49: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/49.jpg)
Na Prática/* Tipografia */
h2
{ color: #666; font-size: 32px; font-weight: normal; line-height: 40px; margin:
10px 0 10px 0; }
h2 strong
{ color: #000; }
h3
{ border-bottom: 1px solid #CCC; font-size: 18px; font-weight: normal; line-
height: 24px; margin: 10px 0 10px 0; }
![Page 50: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/50.jpg)
Na Prática/* Notícias */
.headline
{ background: #E1E9FF; margin: 0 0 10px 0; padding: 10px; width: 180px; }
.headline p
{ background: #FFF; border: 1px solid #999; font-size: 11px; height: 100%; overflow: hidden; padding: 5px; }
.headline img
{ border: 1px solid #CCC; padding: 1px; }
.imgSales
{ float: left; margin-right: 5px; }
.imgComputer
{ float: right; margin-left: 5px; }
![Page 51: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/51.jpg)
Na Prática
/* Serviços */
.services
{ float: left; list-style: none; margin: 0 0 0 10px; padding: 0; width:
31%; }
.services li
{ background: #EEE; clear: left; float: left; padding: 0 5px 0 5px;
margin: 0 0 5px 0; width: 95%; }
.services li a, .services li a:visited
{ display: block; }
![Page 52: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/52.jpg)
Agenda
• Introdução• Inserindo o CSS em documentos HTML• Por que Folhas de Estilo em Cascata?• Seletores• Propriedades• O Box Model• Na Prática: estilizando um documento XHTML com CSS• Diretrizes para melhorar o desenvolvimento de layouts• O que vem por aí com o CSS 3
![Page 53: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/53.jpg)
Diretrizes para melhorar o desenvolvimento de layouts
• Construa o layout por etapas e ao concluir a etapa teste em diferentes navegadores
• Desenvolva para os navegadores modernos e depois adapte para os antigos
• Valide seu código HTML e CSS• Evite hacks para determinados navegadores• Modularizar CSS quando necessário– @import url(“estilo.css”)– Múltiplas folhas de estilo
![Page 54: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/54.jpg)
Agenda
• Introdução• Inserindo o CSS em documentos HTML• Por que Folhas de Estilo em Cascata?• Seletores• Propriedades• O Box Model• Na Prática: estilizando um documento XHTML com CSS• Diretrizes para melhorar o desenvolvimento de layouts• O que vem por aí com o CSS 3
![Page 55: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/55.jpg)
O que vem por aí com CSS3
• Maior controle de formas e efeitos– Maior independência do uso de imagens,
principalmente PNG para criar transparências• Estilizar elementos de acordo com
determinados atributos da tag HTML• Concentrar a formatação cada vez mais
apenas no CSS, diminuindo o uso de imagens e scripts
![Page 56: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/56.jpg)
O que vem por aí com CSS3
• Cantos arredondados: border-radius#div1 {
border: 1px solid #699; -moz-border-radius: 20px; -webkit-border-radius: 20px;
}
![Page 57: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/57.jpg)
O que vem por aí com CSS3
• Sombras em elementos de bloco: box-shadow#div2 {
border: 1px solid #699; -moz-box-shadow: 5px 5px 5px #b6ebf7; -webkit-box-shadow: 5px 5px 5px #b6ebf7;
}
![Page 58: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/58.jpg)
O que vem por aí com CSS3
• Sombras em textos: text-shadowp.shadow { text-shadow: 2px 2px 2px #000;
}
![Page 59: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/59.jpg)
O que vem por aí com CSS3
• Transparência: opacity e rgba#div3 {
background-color: rgba(110, 142, 185, .4); } #div3 {
background-color: #6e8eb9; opacity: 0.4;
}
![Page 60: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/60.jpg)
O que vem por aí com CSS3
• Colunas: column-count, column-gap, column-rule
#div4 { /* borda inserida para facilitar o entedimento */ border: 1px solid #699; -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-rule: 1px solid #6e8eb9; -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #6e8eb9;
}
![Page 61: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/61.jpg)
O que vem por aí com CSS3
• Múltiplos backgrounds: separar os backgrounds por vírgula#div5 blockquote{
background: url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%;
}
![Page 62: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/62.jpg)
O que vem por aí com CSS3
• Background com gradiente: linear-gradient, gradient#div8 {
background: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));
}
![Page 63: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/63.jpg)
O que vem por aí com CSS3
• Rotacionar elementos: transform#div9 {
-moz-transform: rotate(2deg); -webkit-transform: rotate(2deg);
}
![Page 64: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/64.jpg)
O que vem por aí com CSS3• Seletores por atributos– elemento[atributo=valor]
• input[type=“text”]• div[title=“abc”]
– :not()• div.teste :not(span)• table tr td :not(:last-child)
– :last-child• ol.teste li:last-child
– :empty• p:empty
• E muitos outros
![Page 65: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/65.jpg)
Referências
• MACEDO, Marcelo da Silva. Construindo sites adotando padrões Web. Rio de Janeiro: Editora Ciência Moderna Ltda., 2004.
• SILVA, Maurício Samy. Criando sites com HTML: sites de alta qualidade com HTML e CSS. São Paulo: Novatec Editora, 2008.
• VISIE. Campus Online. Textos sobre Tableless.
![Page 66: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/66.jpg)
Referências e sites interessantes• Tableless
www.tableless.com.br
• CSS no Lanchewww.cssnolanche.com.br
• Maujorwww.maujor.com
• Pinceladas da Webwww.pinceladasdaweb.com.br
• W3Schoolshttp://www.w3schools.com/
![Page 67: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/67.jpg)
Referências e sites interessantes
• CSS3.infowww.css3.info
• 10 Efeitos com Propriedades CSS• http://www.kadunew.com/blog/css/10-efeitos-com-proprieda
des-css3
![Page 68: Construindo layout de sites com CSS](https://reader033.vdocuments.net/reader033/viewer/2022061306/58ab5fab1a28abbc2a8b5647/html5/thumbnails/68.jpg)
PERGUNTAS?