Clara Ferreira
 Apenas algumas novas funções (algumas ainda em desenvolvimento) nos seguintes módulos:   Selectors   Box Model   Back...
 Arredondar as bordas de um elemento e acrescentar sombras. <!DOCTYPE        HTML     PUBLIC       "-//W3C//DTD        HT...
 Usar uma imagem como borda.<html><head><style type="text/css">div{border-width:15px;width:250px;padding:10px 20px;}#repe...
 Qualquer objeto poderá ser apresentado com as seguintes     alterações:Função                  O que fazmatrix(n,n,n,n,n...
 Aplicar mudanças nos estilos, criando transições de estados  nos elementos especificando a característica que muda e  du...
 Para fazer animações usa-se o @keyframe, no entanto não funciona no IE nem no Opera, tendo de se colocar prefixos especí...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style t...
@-moz-keyframes myfirst /* Firefox */{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}...
 Poderá criar colunas através de comandos como:   column-count   column-fill   column-gap   column-rule   column-rul...
<html><head><style type="text/css">.newspaper{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chro...
<html><head><style type="text/css">div{border:2px solid;padding:10px 40px;width:300px;resize:both;overflow:auto;}</style><...
Upcoming SlideShare
Loading in …5
×

Css3

677
-1

Published on

Presentation about css3

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
677
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css3

  1. 1. Clara Ferreira
  2. 2.  Apenas algumas novas funções (algumas ainda em desenvolvimento) nos seguintes módulos:  Selectors  Box Model  Backgrounds and Borders  Text Effects  2D/3D Transformations  Animations  Multiple Column Layout  User Interface
  3. 3.  Arredondar as bordas de um elemento e acrescentar sombras. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> div { border:2px solid #000033; padding:10px 20px; background:#3399FF; width:300px; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 e mais recentes */ } </style> </head> <body> <div>Agora os elementos ficam mais bonitos visualmente.</div> </body> </html>
  4. 4.  Usar uma imagem como borda.<html><head><style type="text/css">div{border-width:15px;width:250px;padding:10px 20px;}#repetir{border-image:url("borda.png") 30 30 round;}#esticar{border-image:url("borda.png") 30 30 stretch;}</style></head><body><div id="repetir">A imagem aqui é repetida até preencher a área.</div><br /><div id="esticar">Aqui a imagem é esticada.</div><p>Esta é a imagem usada.</p><img src="borda.png" /></body></html>
  5. 5.  Qualquer objeto poderá ser apresentado com as seguintes alterações:Função O que fazmatrix(n,n,n,n,n,n) Transformação 2D recorrendo a uma matriz com 6 valores.translate(x,y) Desloca ao longo do eixo dos X e dos Y.translateX(n) Desloca no eixo dos X.translateY(n) Desloca no eixo dos Y.scale(x,y) Escala na largura e alturascaleX(n) Escala na largurascaleY(n) Escala na alturarotate(angle) Roda para um determinado ângulo.skew(x-angle,y-angle) Torna a imagem obliqua com base nos ângulos X e Y.skewX(angle) Torna a imagem obliqua com base no ângulo X.skewY(angle) DeTorna a imagem obliqua com base no ângulo Y.
  6. 6.  Aplicar mudanças nos estilos, criando transições de estados nos elementos especificando a característica que muda e durante quanto tempo levará a transição a acontecer. <html><head> <style type="text/css"> div{ width:100px; height:100px; background:blue; transition:width 2s, height 2s; -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */ -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */ -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */} div:hover{ width:200px; height:200px; transform:rotate(180deg); -moz-transform:rotate(180deg); /* Firefox 4 */ -webkit-transform:rotate(180deg); /* Safari and Chrome */ -o-transform:rotate(180deg); /* Opera */} </style></head><body> <div><p> ola </p></div> </body></html>
  7. 7.  Para fazer animações usa-se o @keyframe, no entanto não funciona no IE nem no Opera, tendo de se colocar prefixos específicos para Firefox -moz-, e para Chrome e Safari -webkit-.
  8. 8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s linear 2s infinite alternate;/* Firefox: */-moz-animation:myfirst 5s linear 2s infinite alternate;/* Safari and Chrome: */-webkit-animation:myfirst 5s linear 2s infinite alternate;}@keyframes myfirst{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}
  9. 9. @-moz-keyframes myfirst /* Firefox */{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}@-webkit-keyframes myfirst /*Safari and Chrome */{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}</style></head><body><div></div></body></html>
  10. 10.  Poderá criar colunas através de comandos como:  column-count  column-fill  column-gap  column-rule  column-rule-color  column-rule-style  column-rule-width  column-width
  11. 11. <html><head><style type="text/css">.newspaper{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome */column-gap:40px;-moz-column-rule:4px outset #ff00ff; /* Firefox */-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */column-rule:4px outset #ff00ff;}</style></head><body><p><b>Note:</b> Internet Explorer does not support the column-rule property.</p><div class="newspaper">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div></body></html>
  12. 12. <html><head><style type="text/css">div{border:2px solid;padding:10px 40px;width:300px;resize:both;overflow:auto;}</style></head><body><div>Este objeto poderá ser redimensionado por si.</div></body></html>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×