Tecnologías Web de Cliente

Departamento de Ingeniería de Sistemas Telemáticoshttp://moodle.dit.upm.es

CSS3

CSS3 2

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

CSS3 3

La evolución de CSS

CSS3 4

¿Qué trae de nuevo CSS3?● Más etiquetas!!● Para poder personalizar mejor:

– Bordes

– Fondos

– Colores

– Texto (y Fuentes!!)

– Interfaz

– Columnas

– Animación

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

Prefijos de vendedores (II)

● Ejemplo

div { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;d}

Cada navegador lee la sintaxis que entiende e ignora

el resto

Poner la última propiedad sin

prefijo

Podemos generar las 'variantes' en webs:

http://www.css3generator.com

CSS3 7

Bordes

● Bordes redondeados: border-radius● Bordes con sombra: box-shadow● Bordes con imagen: border-image

CSS3 8

Bordes redondeados

● Propiedad: border-radius

Probar: http://jsfiddle.net/cif2cif/wrez7/9/

CSS3 9

Bordes con sombra

● Propiedad box-shadow

Probar en http://jsfiddle.net/cif2cif/zp7Ta/10/

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

Ej. Bordes con imagen

http://jsfiddle.net/cif2cif/8qTVm/1/

http://jsfiddle.net/cif2cif/8qTVm/1/

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

http://www.css3.info/preview/background-size/

25% height

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

Background-size: contain

CSS3 15

background-size: contain

Redimensiono la pantalla y se ajusta al

contenido

CSS3 16

cover

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

Ejemplo background-origin / background-clip

background-origin

background-clip: border-box

background-clip: padding-box

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

Varios fondos...

CSS3 21

Ejemplo varios fondoshttp://jsfiddle.net/cif2cif/CrNng/

CSS3 22

Opacidad

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

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

Varias sombras

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

Ejemplo text-overflow

CSS3 27

resize

● Permite dejar redimensionar una caja● Valores: none, both, horizontal, vertical

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

Web fonts

@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 */}

@font-face { font-family: "Custom Font Name"; src: url('font.ttf');

}

body {font-family: "Custom Font Name";

}

CSS3 30

Recursos web fonts

● Google– https://developers.google.com/webfonts/docs/

● Font Squirrel– http://www.fontsquirrel.com/– http://www.fontsquirrel.com/fontface/generator

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

Ej. transición

http://www.css3.info/preview/css3-transitions/

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

Ej. multicolumna

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