CSS3

965 views

Published on

Transparencias de TEWC sobre CSS3

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
965
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS3

  1. 1. Tecnologías Web de Cliente CSS3 Departamento de Ingeniería de Sistemas Telemáticos http://moodle.dit.upm.es
  2. 2. Índice● Introducción● Bordes● Fondos● Opacidad● Texto● Fuentes● Columnas● Transiciones CSS3 2
  3. 3. La evolución de CSS CSS3 3
  4. 4. ¿Qué trae de nuevo CSS3?● Más etiquetas!!● Para poder personalizar mejor: – Bordes – Fondos – Colores – Texto (y Fuentes!!) – Interfaz – Columnas – Animación CSS3 4
  5. 5. Prefijos de vendedores (I)● Como la especificación es leeeenta, hay prefijos para asegurar que un navegador la soporta aunque cambie la propiedad en la especificación final: – -webkit- (Webkit / Safari / Chrome) – -moz- (Firefox) – -ms- (MS Explorer) – -o- (Opera) CSS3 5
  6. 6. Prefijos de vendedores (II)● Ejemplo div { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;d } Cada navegador Poner la última Podemos generar las lee la sintaxis que propiedad sin variantes en webs: entiende e ignora prefijo http://www.css3generator.com el resto CSS3 6
  7. 7. Bordes● Bordes redondeados: border-radius● Bordes con sombra: box-shadow● Bordes con imagen: border-image CSS3 7
  8. 8. Bordes redondeados● Propiedad: border-radius Probar: http://jsfiddle.net/cif2cif/wrez7/9/ CSS3 8
  9. 9. Bordes con sombra● Propiedad box-shadow Probar en http://jsfiddle.net/cif2cif/zp7Ta/10/ CSS3 9
  10. 10. Bordes con imagen● Formato: border-image: source slice width outset repeat● Ej. border-image: url(b1.gif) 5% 5% 5% 5% 10px stretch stretch● Valor por defecto: none 100% 1 0 stretch● border-image-source: url(imagen)● border-image-slice: espacio de la imagen que será visible como borde en los cuatro lados (top, right, bottom, left)● border-image-width: ancho del borde● border-image-outset: lo que la imagen se extiende más allá del borde. Puede ser una longitud o un número (el número de veces del ancho). Podemos poner 4 valores (top, …) o uno y se toman el resto como iguales (experimental)● border-image-repeat: cómo escalar los lados izdo/decho y los topes (superior/inferior). Tiene tres valores posibles: – strech (estirar) – la imagen se estira para rellenar el árapor defecto – repeat (repetir) – la imagen se repite para rellenar el área – round (redondear) – la image se repite. Si no puede rellenarse con un número entero de piezas, se reesca la imagen para rellenarla. http://www.emenia.es/utilizando-css3-hoy-4-border-image/ CSS3 10
  11. 11. Ej. Bordes con imagen http://jsfiddle.net/cif2cif/8qTVm/1/ http://jsfiddle.net/cif2cif/8qTVm/1/ CSS3 11
  12. 12. background-size● Tamaño de la imagen original: – background-size: auto auto /* ancho alto */● Puedo poner tamaños fijos o relativos (120px o 10%)Ej. background-size: auto 25%● 25% heighthttp://www.css3.info/preview/background-size/ CSS3 12
  13. 13. background-size● Valor contain: la figura cabe como fondo, y no rellena la parte que no cabe (ancho o alto)● Valor cover: la figura se recorta para cubrir todo el fondo CSS3 13
  14. 14. Background-size: contain CSS3 14
  15. 15. background-size: contain Redimensiono lapantalla y se ajusta al contenido CSS3 15
  16. 16. cover CSS3 16
  17. 17. background-origin y backgroud-clip● background-origin: si la posicion del background es: border-box (por defecto), padding-box o content-box● background-clip: si el background se mete en el borde (border-box, por defecto), padding-box o content-box CSS3 17
  18. 18. Ejemplo background-origin / background-clip background-origin background-clip: border-box background-clip: padding-box CSS3 18
  19. 19. Múltiples fondos● Podemos definir varias capas como fondo● Definimos los fondos con comas, y damos valores a cada capa con comas● Recuerda al z-index CSS3 19
  20. 20. Varios fondos... CSS3 20
  21. 21. Ejemplo varios fondos http://jsfiddle.net/cif2cif/CrNng/ CSS3 21
  22. 22. Opacidad● CSS3 ya incluye opacity [0-1]; 0 = transparente; 1 = opaco CSS3 22
  23. 23. Efectos de texto: text-shadow● text-shadow h-shadow v-shadow blur color – h-shadow: offset horizontal de sombra – v-shadow: offset vertical de sombra – blur: radio de la sombra – color de la sombra (opcional) CSS3 23
  24. 24. Varias sombras CSS3 24
  25. 25. text-overflow● text-overflow: permite recortar párrafos. Dos valores posibles: clip (recorta) o ellipsis (recorta y pone puntos suspensivos)● El elemento debe – Tener overflow a valores hidden (si se desborda se oculta), scroll (mete barras y oculta si se desborda) o auto (mete barras si hace falta y oculta si se desborda) – Tener white-space a valor nowrap (elimina espacios en blanco y finales de línea y lo muestra en una línea) Nuevo valor string para personalizar “...” CSS3 25
  26. 26. Ejemplo text-overflow CSS3 26
  27. 27. resize● Permite dejar redimensionar una caja● Valores: none, both, horizontal, vertical CSS3 27
  28. 28. Web fonts● Nos descargamos las fonts● Formatos: – TTF/OTF – TrueType y OpenType Fonts – no tienen p – EOT – Embedded OpenType – definido por MS en los 90s, soportado por IE – SVG – Scalable Vector Graphics – WOFF – Web Open Font Format● IE soporta EOT● Firefox soporta EOT, TTF, WOFF● Safari soporta OTF, TTF y SVG● Chrome TTF, OTF CSS3 28
  29. 29. Web fonts @font-face { font-family: "Custom Font Name"; src: url(font.ttf); } body { font-family: "Custom Font Name"; }@font-face { font-family: MyWebFont; src: url(webfont.eot); /* IE9 Compat Modes */ src: url(webfont.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */ url(webfont.woff) format(woff), /* Modern Browsers */ url(webfont.ttf) format(truetype), /* Safari, Android, iOS */ url(webfont.svg#svgFontName) format(svg); /* Legacy iOS */ } CSS3 29
  30. 30. Recursos web fonts● Google – https://developers.google.com/webfonts/docs/● Font Squirrel – http://www.fontsquirrel.com/ – http://www.fontsquirrel.com/fontface/generator CSS3 30
  31. 31. Transiciones CSS● Tipo hover pero con efecto retardado1. Indicar qué propiedad cambiará –● transition-property● 2. Duración de la transición: transition-duration3. Efecto: transition-timing-function● http://www.css3.info/preview/css3-transitions/ CSS3 31
  32. 32. Ej. transición http://www.css3.info/preview/css3-transitions/ CSS3 32
  33. 33. Multicolumna● column-width: ancho de columna● column-count: número de columnas● column-gap: separación entre columnas● column-rule: línea de separación http://www.w3.org/TR/css3-multicol/ CSS3 33
  34. 34. Ej. multicolumna CSS3 34
  35. 35. Conclusiones● CSS3 empieza a popularizarse y podemos empezar a probarlo● Aún está en fase de normalización, y tenemos que tener cuidado con su soporte por los navegadores CSS3 35
  36. 36. Referencias● Novedades css3 http://www.css3.info/preview/● HTML5 and CSS3: Visual QuickStart Guide, Seventh Edition, Elizabeth Castro; Bruce Hyslop, Peachpit Press,2011 http://proquest.safaribooksonline.com/book/web-development/html/9780131382022 CSS3 36

×