Este documento presenta las nuevas características de CSS3, incluyendo bordes redondeados, fondos con imágenes, opacidad, sombras de texto, recorte de texto, fuentes web, transiciones, diseño multicolumna y más. Explica los prefijos de los navegadores necesarios para probar estas características y proporciona ejemplos interactivos para ilustrar su uso.

1. Tecnologías Web de Cliente
CSS3
Departamento de Ingeniería de Sistemas Telemáticos
http://moodle.dit.upm.es

2. Índice
●
Introducción
●
Bordes
●
Fondos
●
Opacidad
●
Texto
●
Fuentes
●
Columnas
●
Transiciones
CSS3 2

3. La evolución de CSS
CSS3 3

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. 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. 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. Bordes
●
Bordes redondeados: border-radius
●
Bordes con sombra: box-shadow
●
Bordes con imagen: border-image
CSS3 7

8. Bordes redondeados
●
Propiedad: border-radius
Probar: http://jsfiddle.net/cif2cif/wrez7/9/
CSS3 8

9. Bordes con sombra
●
Propiedad box-shadow
Probar en http://jsfiddle.net/cif2cif/zp7Ta/10/
CSS3 9

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. Ej. Bordes con imagen
http://jsfiddle.net/cif2cif/8qTVm/1/
http://jsfiddle.net/cif2cif/8qTVm/1/
CSS3 11

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%
height
http://www.css3.info/preview/background-size/
CSS3 12

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. Background-size: contain
CSS3 14

15. background-size: contain
Redimensiono la
pantalla y se ajusta al
contenido
CSS3 15

16. cover
CSS3 16

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. Ejemplo background-origin /
background-clip
background-origin
background-clip: border-box
background-clip: padding-box
CSS3 18

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. Varios fondos...
CSS3 20

21. Ejemplo varios fondos
http://jsfiddle.net/cif2cif/CrNng/
CSS3 21

22. Opacidad
●
CSS3 ya incluye opacity [0-1]; 0 =
transparente; 1 = opaco
CSS3 22

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. Varias sombras
CSS3 24

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. Ejemplo text-overflow
CSS3 26

27. resize
●
Permite dejar redimensionar una caja
●
Valores: none, both, horizontal, vertical
CSS3 27

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. 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. 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. Transiciones CSS
●
Tipo hover pero 'con efecto retardado'
1. Indicar qué propiedad cambiará –
●
transition-property
●
2. Duración de la transición:
transition-duration
3. Efecto: transition-timing-function
●
http://www.css3.info/preview/css3-transitions/
CSS3 31

32. Ej. transición
http://www.css3.info/preview/css3-transitions/
CSS3 32

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. Ej. multicolumna
CSS3 34

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. 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