1. CSS3
Monday, January 16, 12

2. Un sitio moderno se trabaja en 3 capas
Contenido
Presentacion
Interaccion
Monday, January 16, 12

3. Un sitio moderno se trabaja en 3 capas
HTML(5)
CSS(3)
Javascript
Monday, January 16, 12

4. Porque es superior CSS?
Monday, January 16, 12

5. Porque es superior CSS?
•Separacion por capas
•Cosistencia Global
•Ancho de Banda
•Control de cambios
•SEO
•Accebilidad
•Asi se trabaja la web en este siglo
Monday, January 16, 12

6. Arquitectura de CSS
Monday, January 16, 12

7. Monday, January 16, 12

8. Monday, January 16, 12

9. CSS3 no es trabaja igual que HTML5!!
Monday, January 16, 12

10. CSS Layer 1
CSS Layer 2
CSS Layer 3
Monday, January 16, 12

11. Monday, January 16, 12

12. Monday, January 16, 12

13. 1996
CSS Layer 1
CSS Layer 2
CSS Layer 3
Monday, January 16, 12

14. 1998
CSS Layer 1
CSS Layer 2
CSS Layer 3
Monday, January 16, 12

15. 2000
CSS Layer 1
CSS Layer 2
CSS Layer 3
Monday, January 16, 12

16. CSS Layer 1
CSS Layer 2
CSS Layer 3
CSS Layer 4
CSS Layer 5
.....
Monday, January 16, 12

17. Soporte en Browsers
Monday, January 16, 12

18. Monday, January 16, 12

19. Monday, January 16, 12

20. Monday, January 16, 12

21. Modelo de Cajas
Monday, January 16, 12

22. Monday, January 16, 12

23. Selectores
Monday, January 16, 12

24. Selectores
elemento {
propiedad: valor
}
Monday, January 16, 12

25. Selectores
elemento hijo {
propiedad: valor
}
Monday, January 16, 12

26. Selectores
elemento hijo:pseudo {
propiedad: valor
}
Monday, January 16, 12

27. Como las cataratas, CSS solo cae
Monday, January 16, 12

28. Nuevos Selectores
Monday, January 16, 12

29. Hijo ( A > B)
Selecciona únicamente el primer elemento B que sea
descendiente de A
A
B
Monday, January 16, 12

30. Hermano Adyacente (A + B)
Selecciona cualquier elemento B que tenga el mismo
parent que E. por ejemplo en una lista li+li
seleccionara todos los elementos de la lista menos el
primer <li>.
A
B
Monday, January 16, 12

31. Hermano General (A ~ B)
Selecciona cualquier elemento B que comparta el
mismo parent que cualquier A y que venga posterior
en la estructura HTML. Por ejemplo H1~H2
seleccionara cualquier <h2> que este después de un
<h1> siempre y cuando ambos compartan el mismo
nodo padre, o sea siempre que <h2> no este anidado
en otro elemento.
A
B
Monday, January 16, 12

32. X[atr]
Selecciona cualquier elemento X que tenga el atributo
“atr” con cualquier valor,
img[alt] { border: solid}
Monday, January 16, 12

33. X[atr = val]
Selecciona cualquier elemento X que tenga el atributo
“atr” con el valor exacto a “val”.,
img[alt=”curso”] { border: solid}
Monday, January 16, 12

34. X[atr ^= val]
Selecciona cualquier elemento X que tenga un
atributo que comience con “val”.,
img[alt^=”.jpg”] { border: solid 1px lime}
Monday, January 16, 12

35. X[atr $= val]
Selecciona cualquier elemento X que tenga un
atributo que termine con “val”.,
img[alt$=”.jpg”] { border: solid 1px lime}
Monday, January 16, 12

36. X[atr *= val]
Selecciona cualquier elemento X que tenga un
atributo incluya “val”.,
img[alt=”img/”] { border: solid 1px lime}
Monday, January 16, 12

37. Pseudolementos
Monday, January 16, 12

38. X: valid
X: invalid
X: required
X: optional
Monday, January 16, 12

39. E F:nth-child(n)
El elemento F que es el descendiente numero #n del
elemento parent E.
li:nth-child(2) { border: solid 1px lime}
Monday, January 16, 12

40. E F:nth-last-child(n)
El elemento F que es el descendiente numero #n del
elemento parent E, pero contando de atras a adelante.
li:nth-last-child(2) { border: solid 1px lime}
Monday, January 16, 12

41. E:nth-of-type(n)
El elemento E que es el numero n de su tipo.
div:nth-of-type(2) { border: solid 1px lime}
Monday, January 16, 12

42. E:nth-last-of-type(n)
El elemento E que es el numero n de su
tipo.Contando desde atras.
div:nth-last-of-type(2) { border: solid 1px lime}
Monday, January 16, 12

43. F E:first-child
El primer elemento E dentro de F.
li:first-child { border: solid 1px lime}
Monday, January 16, 12

44. F E:last-child
El ultimo elemento E dentro de F.
li:last-child { border: solid 1px lime}
Monday, January 16, 12

45. E:not( selector )
Cualquier elemento E que no coincida con el selector.
div:not ( .destacado ) { border: solid 1px silver}
Monday, January 16, 12

46. Animacion y transiciones
Monday, January 16, 12

47. Herramientas de animacion
•Flash
•Javascript
•CSS3
Monday, January 16, 12

48. Porque animar con CSS?
•Menos dependencia de plugins
•Menos código
•Menos NERD
•Mejor Performance en moviles
Monday, January 16, 12

49. Ahorrar ancho de banda
Monday, January 16, 12

50. Bordes redondeados
.recuadro{
border-radius:10px
}
Monday, January 16, 12

51. Sombras
.recuadro{
box-shadow: 1px 1px 1px rgba(0,0,0, 0.5)
}
Monday, January 16, 12

52. Sombras
.recuadro{
text-shadow: 1px 1px 1px rgba(0,0,0, 0.5)
}
Monday, January 16, 12

53. Gradientes
.recuadro{
background-image: linear-gradient(bottom, rgb(169,113,40) 15%,
rgb(203,147,68) 58%, rgb(244,177,96) 79%);
}
Monday, January 16, 12

54. Gradientes
http://gradients.glrzad.com/
Monday, January 16, 12

55. CSS Transforms
•Scale
•Rotate
•Skew
•Translate
Monday, January 16, 12

56. transform: scale()
.cuadro{
height:250px;
width:250px;
background-color:rgb(171, 38, 41);
}
.cuadro:hover{
transform:scale(2)
}
Monday, January 16, 12

57. transform: scale()
.cuadro{
height:250px;
width:250px;
background-color:rgb(171, 38, 41);
}
.cuadro:hover{
transform:scale(2)
}
Monday, January 16, 12

58. transform: rotate()
.cuadro{
height:250px;
width:250px;
background-color:rgb(171, 38, 41);
}
.cuadro:hover{
transform:rotate(45deg)
}
Monday, January 16, 12

59. transform: skew()
.cuadro{
height:250px;
width:250px;
background-color:rgb(171, 38, 41);
}
.cuadro:hover{
transform:skew(45deg)
}
Monday, January 16, 12

60. transformaciones multiples
.cuadro{
height:250px;
width:250px;
background-color:rgb(171, 38, 41);
}
.cuadro:hover{
transform:scale(2) rotate(45deg);
}
Monday, January 16, 12

61. Modificar el origen
.cuadro{
transform: rotate(45deg);
transform-origin: rigth top
}
.cuadro:hover{
transform: rotate(45deg);
transform-origin: 100% 100%
}
Monday, January 16, 12

62. Transition
.cuadro{
background-color: #000000
transition-property: background-color;
transition-duration: 1s;
}
.cuadro:hover{
background-color: #000000
}
Monday, January 16, 12

63. Propiedades sujetas de transformacion
Monday, January 16, 12

64. Demos!
Monday, January 16, 12

65. http://www.paulrhayes.com/experiments/cube/
multiCubes.html
Monday, January 16, 12

66. http://ecsspert.com/adobe.php
Monday, January 16, 12

67. http://www.zurb.com/playground/css3-polaroids
Monday, January 16, 12

68. http://development.tobypitman.com/css/menu.html
Monday, January 16, 12

69. http://www.cssplay.co.uk/menu/css3-animation.html
Monday, January 16, 12

70. http://www.zurb.com/playground/osx-dock
Monday, January 16, 12

71. http://anthonycalzadilla.com/css3-ATAT/index.html
Monday, January 16, 12

72. http://silverbackapp.com/index.php?n=2
Monday, January 16, 12

73. El futuro de CSS
Monday, January 16, 12

74. CSS Shaders
http://www.adobe.com/devnet/html5/articles/css-
shaders.html
Monday, January 16, 12