0
Estilo & CSS3 César Carruitero Avila
Objetivo CSS3 Styling
Objetivo  <ul>Dar a conocer las novedades de la nueva especificación CSS3 </ul>Qué de bueno tiene usar CSS3? -Código más s...
Antecedentes CSS3 Styling
Pseudo-Elementos CSS3 Styling
Pseudo-elementos <ul><li>::first-line
::first-letter
::before
::after
::selection </li></ul>
Pseudo-Clases CSS3 Styling
Pseudo-clases :nth-child(N) :nth-last-child(N) :nth-of-type(N). :nth-last-of-type(N) :last-child.  :first-of-type :last-of...
Bordes CSS3 Styling
border-color <ul>Permite utilizar  múltiples  border-color </ul>border: 8px solid #000; -moz-border-bottom-colors: #555 #6...
border-image -moz-border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 stretch;
border-radius -moz-border-radius: 10px; -moz-border-radius: 0 10px 0 10px; <ul>Permite crear bordes redondeados de igual o...
box shadow -moz-box-shadow: 10px 10px 10px #3f74a3; box-shadow: 10px 10px 10px #3f74a3; <ul>Permite crear sombras a objeto...
Fondos CSS3 Styling
multiple background <ul>Permite asignar  multiples  fondos  a un elemento  .. </ul>Background: url(&quot;imagen&quot;), ur...
background-size <ul>Permite modificar el tamaño de una imagen de fondo </ul>background:url(img_flwr.gif); -moz-background-...
gradient <ul>Permite crear gradientes </ul>background-image:  -moz-linear-gradient(  center bottom,  rgb(6,153,99) 34%,  r...
Color CSS3 Styling
opacity <ul>Permite modificar la opacidad de un elemento. </ul>background-color: #f00; opacity: 1.00; <ul>Valores de 0,0 a...
RGBA color <ul>Permite definir colores usando el formato rgb </ul>background-color: rgb(0,200,0); background-color: rgba(0...
HSL/A color <ul>Permite usar hsl para definir color </ul>background-color: hsl(0,50%,50%); background-color: hsla(0,50%,50...
Texto CSS3 Styling
text-shadow <ul>Sombras en texto </ul>text-shadow: 2px 2px 2px #000;
multicolum <ul>Crear columnas de una manera sencilla </ul>-moz-column-count: 2;-moz-column-gap: 40px;
@font-face <ul>Poder utilizar un tipo de fuente sin necesidad que el usuario la tenga instalada </ul>@font-face { font-fam...
TRASFORM CSS3 Styling
rotate <ul>Rotar un objeto </ul>-moz-transform: rotate(5deg);
scale -moz-transform: scale(0.5,1.5);
skew -moz-transform: skew(-30deg);
translate -moz-transform: translate(30px, 0);
Transiciones CSS3 Styling
transitions <ul>Intervalos de tiempo entre cambio de propiedades </ul>-moz-transition -moz-transition-property Especifica ...
Animaciones CSS3 Styling
@keyframes <ul>animaciones completas mediante @keyframes (fotogramas clave) </ul>@keyframe animacionCoche{ /*Indicamos que...
@media <ul>Consiste en un tipo de expresiones que limiten el alcance de las hojas de estilo usando propiedades como ancho,...
@media
@media
Upcoming SlideShare
Loading in...5
×

Estilo & CSS3

4,272

Published on

Introducción a CSS3

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,272
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
281
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Estilo & CSS3"

  1. 1. Estilo & CSS3 César Carruitero Avila
  2. 2. Objetivo CSS3 Styling
  3. 3. Objetivo <ul>Dar a conocer las novedades de la nueva especificación CSS3 </ul>Qué de bueno tiene usar CSS3? -Código más simple -Ahorro tiempo y trabajo Inconvenientes? no está implementado al 100% en todos los navegadores
  4. 4. Antecedentes CSS3 Styling
  5. 5. Pseudo-Elementos CSS3 Styling
  6. 6. Pseudo-elementos <ul><li>::first-line
  7. 7. ::first-letter
  8. 8. ::before
  9. 9. ::after
  10. 10. ::selection </li></ul>
  11. 11. Pseudo-Clases CSS3 Styling
  12. 12. Pseudo-clases :nth-child(N) :nth-last-child(N) :nth-of-type(N). :nth-last-of-type(N) :last-child. :first-of-type :last-of-type. :only-child :only-of-type . :root. :empty. :enabled :disabled. :checked :not(S) .....
  13. 13. Bordes CSS3 Styling
  14. 14. border-color <ul>Permite utilizar múltiples border-color </ul>border: 8px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 -moz-border-top-colors: #555 #666 #777 #888 -moz-border-left-colors: #555 #666 #777 #888 -moz-border-right-colors: #555 #666 #777 #888
  15. 15. border-image -moz-border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 stretch;
  16. 16. border-radius -moz-border-radius: 10px; -moz-border-radius: 0 10px 0 10px; <ul>Permite crear bordes redondeados de igual o diferente medida de una manera sencilla </ul>
  17. 17. box shadow -moz-box-shadow: 10px 10px 10px #3f74a3; box-shadow: 10px 10px 10px #3f74a3; <ul>Permite crear sombras a objetos </ul>
  18. 18. Fondos CSS3 Styling
  19. 19. multiple background <ul>Permite asignar multiples fondos a un elemento .. </ul>Background: url(&quot;imagen&quot;), url(&quot;imagen&quot;); <ul>Y definir su posición </ul>Background-position: 20px 20px, top right;
  20. 20. background-size <ul>Permite modificar el tamaño de una imagen de fondo </ul>background:url(img_flwr.gif); -moz-background-size:80px 60px; background-size:80px 60px;
  21. 21. gradient <ul>Permite crear gradientes </ul>background-image: -moz-linear-gradient( center bottom, rgb(6,153,99) 34%, rgb(36,167,171) 77%);
  22. 22. Color CSS3 Styling
  23. 23. opacity <ul>Permite modificar la opacidad de un elemento. </ul>background-color: #f00; opacity: 1.00; <ul>Valores de 0,0 a 1,0 </ul>
  24. 24. RGBA color <ul>Permite definir colores usando el formato rgb </ul>background-color: rgb(0,200,0); background-color: rgba(0,200,0,0.5); <ul>RGB= Red Green Blue </ul>
  25. 25. HSL/A color <ul>Permite usar hsl para definir color </ul>background-color: hsl(0,50%,50%); background-color: hsla(0,50%,50%,0.5); <ul>HSL= <ul>Hue (Tonalidad) Saturation (Saturación) Lughtness (Luminosidad) </ul></ul>
  26. 26. Texto CSS3 Styling
  27. 27. text-shadow <ul>Sombras en texto </ul>text-shadow: 2px 2px 2px #000;
  28. 28. multicolum <ul>Crear columnas de una manera sencilla </ul>-moz-column-count: 2;-moz-column-gap: 40px;
  29. 29. @font-face <ul>Poder utilizar un tipo de fuente sin necesidad que el usuario la tenga instalada </ul>@font-face { font-family: DeliciousRoman; src: url(/Delicious-Roman.otf); } h1 { font-family: DeliciousRoman; }
  30. 30. TRASFORM CSS3 Styling
  31. 31. rotate <ul>Rotar un objeto </ul>-moz-transform: rotate(5deg);
  32. 32. scale -moz-transform: scale(0.5,1.5);
  33. 33. skew -moz-transform: skew(-30deg);
  34. 34. translate -moz-transform: translate(30px, 0);
  35. 35. Transiciones CSS3 Styling
  36. 36. transitions <ul>Intervalos de tiempo entre cambio de propiedades </ul>-moz-transition -moz-transition-property Especifica el nombre de la propiedad CSS a la que la transición será apliacada -moz-transition-duration Duración de la transición -moz-transition-timing-function Especifica una curva bezier para definir los valores intermedios de la propiedad -moz-transition-delay Define el tiempo de espera entre el momento en que se cambia la propiedad y la transición comienza en realidad
  37. 37. Animaciones CSS3 Styling
  38. 38. @keyframes <ul>animaciones completas mediante @keyframes (fotogramas clave) </ul>@keyframe animacionCoche{ /*Indicamos que salimos de la posición 0*/ from{ left:0px; } /*Indicamos que al final la posición debe ser 350*/ to{ left:350px; } }
  39. 39. @media <ul>Consiste en un tipo de expresiones que limiten el alcance de las hojas de estilo usando propiedades como ancho, color y altura </ul>@media all and Es decir aplicar un estilo condicional cuando se visualiza el contenido dependiendo de las dimensiones del navegador
  40. 40. @media
  41. 41. @media
  42. 42. Aplicación CSS3 Styling
  43. 43. FIN!
  44. 44. Semantics Offline & Storage Device Access Connectivity Multimedia 3D, Graphics & Effects Performance & Integration CSS3 Styling Tecnologías HTML5
  45. 45. Estilo & CSS3 César Carruitero Avila cesar(a)mozilla.pe /mozillaperu
  1. A particular slide catching your eye?

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

×