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