CSS3 - ARKAITZ GARRO

CSS 3ARKAITZ GARRO

CAPTULO 1 INTRODUCCIN1.1 Especificacin oficial1.2 Nuevas funcionalidades

CAPTULO 2 MDULOSELECTORS

2.1 Prefijos especficos denavegadores

CAPTULO 3 MDULO BASICUSER INTERFACE

3.1 box-sizing3.2 overflow-x y overflow-y

CAPTULO 4 MDULO COLOR4.1 Propiedad opacity4.2 Funcin rgba()4.3 Funcin hsl()4.4 Funcin hsla()

CAPTULO 5 MDULOBACKGROUNDS ANDBORDERS

5.1 Bordes5.2 Sombras5.3 Fondos

CAPTULO 6 MDULO IMAGEVALUES AND REPLACEDCONTENT

6.1 CSS gradients6.2 Degradados lineales6.3 Degradados radiales6.4 Repeticin de degradados

CAPTULO 7 MDULO TEXT7.1 Sombra en textos7.2 Fuentes web

CAPTULO 8 MDULO MULTI-COLUMN LAYOUT

8.1 Propiedad shorthand8.2 Equilibro de altura8.3 Espacios entre columnas8.4 Trazos entre columnas8.5 Texto sobre columnas

CAPTULO 9 MDULO MEDIAQUERIES

9.1 Sintaxis9.2 Operadores lgicos o logicaloperators

CAPTULO 10 MDULOTRANSFORMS

10.1 Propiedades principales10.2 Funciones de transformacin 2D10.3 Ejemplos10.4 Propiedades 3D

CAPTULO 11 MDULO

TRANSITIONS11.1 Propiedades "animables"11.2 Propiedad transition-property11.3 Propiedad transition-duration11.4 Propiedad transition-timing-function11.5 Propiedad transition-delay11.6 Propiedad transition11.7 Listas de valores11.8 Finalizacin de una transicin11.9 Transiciones y JavaScript

CAPTULO 12 MDULOANIMATIONS

12.1 Configuracin12.2 keyframes12.3 Ejemplos

CAPTULO 13 EJERCICIOS DECSS 3

13.1 Captulo 213.2 Captulo 513.3 Captulo 713.4 Captulo 913.5 Captulo 1013.6 Captulo 1113.7 Captulo 1213.8 Ejercicios finales

SOBRE ESTA EDICINCSS 3

Publication date: 22/02/2014

This book was published with easybook v5.0-DEV, a free and open-source book publishing application developed by Javier Eguiluz usingseveral Symfony components.

LICENCIAEsta obra se publica bajo la licencia Creative Commons Reconocimiento - No Comercial - Compartir Igual 3.0, cuyos detalles puedes consultar

en http://creativecommons.org/licenses/by-nc-sa/3.0/es/.

Puedes copiar, distribuir y comunicar pblicamente la obra, incluso transformndola, siempre que cumplas todas las condiciones siguientes:

Reconocimiento: debes reconocer siempre la autora de la obra original, indicando tanto el nombre del autor (Arkaitz Garro) como elnombre del sitio donde se public originalmente www.arkaitzgarro.com. Este reconocimiento no debe hacerse de una manera que

sugiera que el autor o el sitio apoyan el uso que haces de su obra.

No comercial: no puedes utilizar esta obra con fines comerciales de ningn tipo. Entre otros, no puedes vender esta obra bajo ningnconcepto y tampoco puedes publicar estos contenidos en sitios web que incluyan publicidad de cualquier tipo.

Compartir igual: si alteras o transformas esta obra o si realizas una obra derivada, debes compartir tu trabajo obligatoriamente bajo estamisma licencia.

CSS 3 Anterior Siguiente

CAPTULO 1 INTRODUCCINCon la introduccin de CSS 3, nunca ha sido tan fcil crear aplicaciones y sitios tan atractivos ycompletos en HTML. Hay una gran cantidad de extensiones y tecnologas nuevas para CSS 3,entre las que se incluyen las transformaciones en 2D, las transiciones, las transformaciones en3D y las fuentes web.

El objetivo inicial de CSS, separar el contenido de la forma, se cumpli ya con las primerasespecificaciones del lenguaje. Sin embargo, el objetivo de ofrecer un control total a losdiseadores sobre los elementos de la pgina ha sido ms difcil de cubrir. Las especificacionesanteriores del lenguaje tenan muchas utilidades para aplicar estilos a los sitios web, pero losdesarrolladores aun continan usando trucos diversos para conseguir efectos tan comunes o tandeseados como los bordes redondeados o el sombreado de elementos en la pgina.

CSS 2 ya ofrece un control suficiente para el diseo de los sitios web, pero CSS 3 todava avanzaun poco ms en la direccin, de aportar ms control sobre los elementos de la pgina. As pues, lanovedad ms importante que aporta CSS 3, de cara a los diseadores y desarrolladores, consisteen la incorporacin de nuevos mecanismos para mantener un mayor control sobre el estilo con elque se muestran los elementos de las pginas, sin tener que recurrir a trucos o hacks, que amenudo complicaban el cdigo, tanto HTML como CSS.

1.1 ESPECIFICACIN OFICIALA diferencia de CSS 2, que fue una gran especificacin que defina varias funcionalidades, CSS 3est dividida en varios documentos separados, llamados "mdulos". Cada mdulo aade nuevasfuncionalidades a las definidas en CSS 2, de manera que se preservan las anteriores paramantener la compatibilidad.

Debido a la modularizacin del CSS 3, diferentes mdulos pueden encontrarse en diferentesestados de su desarrollo, existiendo actualmente alrededor de cincuenta mdulos publicados. Elestado actual del desarrollo de CSS 3 puede ser consultado en http://www.w3.org/Style/CSS/current-work.

Mientras CSS 3 se convierte en un estandar, los distintos navegadores pueden incluir o no lasmejoras propuestas, o incluso aadir las suyas propias. La web Can I use... incluye un listadocompleto de funcionalidades soportadas por los ditintos navegadores.

1.2 NUEVAS FUNCIONALIDADESEstas son algunas de las nuevas funcionalidades aadidas en CSS 3:

Mdulo Selectors Level 3

Nuevos selectores por atributosNuevas pseudo-clasesNuevo selector adyacente

Mdulo Basic User Interface

Propiedad box-sizingPropiedades nav-top, nav-right, nav-bottom, nav-left

NDICE DECONTENIDOSIntroduccin1.1 Especificacin oficial1.2 Nuevas funcionalidades

Propiedades overflow-x, overflow-y

Mdulo Color

Colores HSLColores HSLAColores RGBAOpacidad

Mdulo Media Queries

Mdulo Backgrounds and Borders

Propiedad background-originPropiedad background-clipPropiedad background-sizePropiedad backgroundPropiedad border-colorPropiedad border-imagePropiedad border-radiusPropiedad box-shadow

Mdulo Image Values and Replaced Content

Degradados linealesDegradados radialesDegradados lineales de repeticinDegradados radiales de repeticin

Mdulo Multi-column Layout

Mdulo Animations

Mdulo Transforms

Mdulo Transitions

Mdulo Fonts Level 3

Mdulo Text Level 3

Propiedad text-shadowPropiedad text-overflowPropiedad word-wrap


CAPTULO 2 MDULO SELECTORSLa versin actual de CSS 3 incluye todos los selectores de CSS 2.1 y aade otras decenas deselectores, pseudo-clases y pseudo-elementos. La lista provisional de novedades y suexplicacin detallada se puede encontrar en el mdulo de selectores de CSS 3.

En primer lugar, CSS 3 aade tres nuevos selectores de atributos:

elemento[atributo^="valor"] , selecciona todos los elementos que disponen de eseatributo y cuyo valor comienza exactamente por la cadena de texto indicada.elemento[atributo$="valor"] , selecciona todos los elementos que disponen de eseatributo y cuyo valor termina exactamente por la cadena de texto indicada.elemento[atributo*="valor"] , selecciona todos los elementos que disponen de eseatributo y cuyo valor contiene la cadena de texto indicada.

De esta forma, se pueden crear reglas CSS tan avazadas como las siguientes:

/* Selecciona todos los enlaces que apuntan a una direccin de correo electrnico */a[href^="mailto:"] { ... }

/* Selecciona todos los enlaces que apuntan a una pgina HTML */a[href$=".html"] { ... }

/* Selecciona todos los ttulos h1 cuyo atributo title contenga la palabra "captulo" */h1[title*="captulo"] { ... }

Otro de los nuevos selectores de CSS 3 es el "selector general de elementos hermanos", quegeneraliza el selector adyacente de CSS 2.1. Su sintaxis es elemento1 ~ elemento2 y seleccionael elemento2 que es hermano de elemento1 y se encuentra detrs en el cdigo HTML. En elselector adyacente la condicin adicional era que los dos elementos deban estar uno detrs deotro en el cdigo HTML, mientras que ahora la nica condicin es que uno est detrs de otro.

Si se considera el siguiente ejemplo:

h1 + h2 { ... } /* selector adyacente */h1 ~ h2 { ... } /* selector general de hermanos */

.........

...

...

El primer selector (h1 + h2) slo selecciona el primer elemento de la pgina, ya que es elnico que cumple que es hermano de y se encuentra justo detrs en el cdigo HTML. Por su

NDICE DECONTENIDOSMdulo Selectors2.1 Prefijos especficos denavegadores

parte, el segundo selector (h1 ~ h2) selecciona todos los elementos de la pgina salvo elsegundo. Aunque el segundo se encuentra detrs de en el cdigo HTML, no sonelementos hermanos porque no tienen el mismo elemento padre.

Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3, pero cambia su sintaxis y ahora seutilizan :: en vez de : delante del nombre de cada pseudo-elemento:

::first-line , selecciona la primera lnea del texto de un elemento.::first-letter , selecciona la primera letra del texto de un elemento.::before , selecciona la parte anterior al contenido de un elemento para insertar nuevocontenido generado.::after , selecciona la parte posterior al contenido de un elemento para insertar nuevocontenido generado.

CSS 3 aade adems un nuevo pseudo-elemento:

::selection , selecciona el texto que ha seleccionado un usuario con su ratn o teclado.

Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se aaden 12 nuevas,entre las cuales se encuentran:

elemento:nth-child(numero) , selecciona el elemento indicado pero con la condicin deque sea el hijo ensimo de su padre. Este selector es til para seleccionar el segundoprrafo de un elemento, el quinto elemento de una lista, etc.elemento:nth-last-child(numero) , idntico al anterior pero el nmero indicado seempieza a contar desde el ltimo hijo.elemento:empty , selecciona el elemento indicado pero con la condicin de que no tenganingn hijo. La condicin implica que tampoco puede tener ningn contenido de texto.elemento:first-child y elemento:last-child , seleccionan los elementos indicadospero con la condicin de que sean respectivamente los primeros o ltimos hijos de suelemento padre.elemento:nth-of-type(numero) , selecciona el elemento indicado pero con la condicinde que sea el ensimo elemento hermano de ese tipo.elemento:nth-last-of-type(numero) , idntico al anterior pero el nmero indicado seempieza a contar desde el ltimo hijo.

Algunas pseudo-clases como :nth-child(numero) permiten el uso de expresiones complejas pararealizar selecciones avanzadas:

/* selecciona todos los elementos impares de una lista */li:nth-child(2n+1) { ... }/* selecciona todos los elementos pares de una lista */li:nth-child(2n) { ... }

/* Las siguientes reglas alternan cuatro estilos diferentes para los prrafos */p:nth-child(4n+1) { ... }p:nth-child(4n+2) { ... }p:nth-child(4n+3) { ... }p:nth-child(4n+4) { ... }

Empleando la pseudo-clase :nth-of-type(numero) se pueden crear reglas CSS que alternen laposicin de las imgenes en funcin de la posicin de la imagen anterior:

img:nth-of-type(2n+1) { float: right; }img:nth-of-type(2n) { float: left; }

Otro de los nuevos selectores que incluir CSS 3 es :not() , que se puede utilizar paraseleccionar todos los elementos que no cumplen con la condicin de un selector:

/* selecciona todos los elementos de la pgina que no sean prrafos */:not(p) { ... }/* selecciona cualquier elemento cuyo atributo id no sea "especial" */:not(#especial) { ... }

Aunque todava faltan muchos aos hasta que la versin CSS 3 sustituya a la actual versin CSS2.1, la mayora de los navegadores incluyen soporte para varios o casi todos los selectores de CSS3.

Ejercicio 1

Ver enunciado

2.1 PREFIJOS ESPECFICOS DE NAVEGADORESLos prefijos especficos de navegador son una manera que tienen los distintos navegadores deaadir o probar nuevas funcionalidades de CSS. Son utilizados para aadir funcionalidadesespecficas que no forman parte de la especificacin oficial o para aadir futuras funcionalidadesque no han sido implemetadas del todo. Su formato es el siguiente:

selector { -prefix-property: value;}

Los prefijos para los distintos navegadores son los siguientes:

-webkit- : Android, Chrome, iOS, Safari-moz- : Firefox-ms- : Internet Explorer-o- : Opera

Por ejemplo, para aadir una transicin CSS 3 a un elemento, debemos utilizar la propiedadtransition con los siguientes prefijos:

-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-ms-transition: all 4s ease;-o-transition: all 4s ease;transition: all 4s ease;

Estos prefijos pretenden ser temporales hasta que el navegador implemente completamente lafuncionalidad o forme parte del estndar oficialmente. Los navegadores que utilicen prefijos paraciertas propiedades, las tendrn en cuenta e ignorarn el resto, y los que no hagan uso de ellastendrn en cuenta la ltima regla indicada.


CAPTULO 3 MDULO BASIC USER INTERFACELa especificacin oficial y el estado actual de desarrollo del mdulo Basic User Interface en CSS 3puede consultarse en http://www.w3.org/TR/css3-ui/.

3.1 BOX-SIZINGLa propiedad CSS box-sizing se usa para alterar el box model o modelo de caja por defectousado para calcular alturas y anchuras de elementos. Es posible usar esta propiedad para emularel comportamiento de navegadores que no soportan correctamente la especificacin de boxmodel de CSS.

El box model o modelo de caja en CSS funciona de la siguiente manera:

width + padding + border = actual visible/rendered width of box

height + padding + border = actual visible/rendered height of box

La sintaxis de la propiedad box-sizing es la siguiente:

Propiedad box-sizingValores content-box | padding-box | border-boxSe aplica a Todos los elementos que aceptan width o height

Valor inicial content-boxDescripcin Indica el componente del modelo de caja que se toma como referencia para

calcular el alto o ancho de un elemento

NDICE DECONTENIDOSMdulo Basic User Interface3.1 box-sizing3.2 overflow-x y overflow-y

Los valores que puede tomar esta propiedad son los siguientes:

content-box : este es el estilo por defecto especificado en el estndar de CSS. Laspropiedades width y height se miden incluyendo slo el contenido, pero no el borde,margen o relleno.padding-box : las propiedades width y height incluyen el tamao del relleno pero noincluyen el borden ni margen.border-box : las propiedades width y height incluyen el relleno y el borde, pero no elmargen.

/* support Firefox, WebKit, Opera and IE8+ */.example { box-sizing: border-box;

width: 500px;}

3.2 OVERFLOW-X Y OVERFLOW-YLas propiedades overflow son utilizadas para controlar el comportamiento del contenido dentrode un elemento de bloque. Especifican si recortan el contenido, muestran una barra dedesplazamiento o contenido "se sale" de un elemento de bloque cuando se desborda en losbordes izquierdo y derecho (x) o superior e inferior (y).

Propiedad overflow-x , overflow-yValores visible | hidden | scroll | auto | inheritSe aplica a Todos los elementos de bloque e inline-block

Valor inicial autoDescripcin Indica el comportamiento del contenido al superar el tamao de su contenedor


CAPTULO 4 MDULO COLORLa especificacin oficial y el estado actual de desarrollo del mdulo Color en CSS 3 puedeconsultarse en http://www.w3.org/TR/css3-color/.

La propiedad de CSS color denota un color en el espacio de color sRGB. Un color puede serdescrito utilizando una keyword, el sistema de coordenadas cbicas RGB o el sistema decoordenadas cilndricas HSL. Hay que tener en cuenta que la lista de valores de color aceptadosse ha ampliado en la evolucin de la especificacin, que culmina con los colores CSS 3.

Aunque los valores de color CSS estn definidos con precisin, pueden aparecer de maneradistina en diferentes dispositivos. La mayora de ellos no estn calibrados, y algunosnavegadores no soportan los distintos perfiles de color.

4.1 PROPIEDAD OPACITYUna de las caractersticas ms esperadas de CSS 3 ha sido opacity . Gracias a esta propiedad,podemos definir el grado de transparencia de un elemento.

Propiedad opacityValores | inheritSe aplica a Todos los elementos.Valor inicial 1Descripcin Especifica la transparencia de un elemento.

Figura 4.1 Ejemplo de transparencia aplicada a un elemento

4.2 FUNCIN RGBA()Los colores pueden ser definidos gracias al modelo Red-Green-Blue-alpha (RGBa) utilizando lanotacin funcional rgba() . RGBa extiende el modelo de color RGB para incluir el canal alfa, loque permite la especificacin de la transparencia de un color. a significa opacity:0.0=transparent; 1.0=opaque; .

rgba(255,0,0,0.1) /* 10% opaque red */rgba(255,0,0,0.4) /* 40% opaque red */rgba(255,0,0,0.7) /* 70% opaque red */

NDICE DECONTENIDOSMdulo Color4.1 Propiedad opacity4.2 Funcin rgba()4.3 Funcin hsl()4.4 Funcin hsla()

rgba(255,0,0, 1) /* full opaque red */

4.3 FUNCIN HSL()Los colores tambin se puede definir gracias el modelo Hue-Saturation-Lightness (HSL)utilizando la notacin funcional hsl() . La ventaja de HSL sobre RGB es que es ms intuitivo; sepueden "adivinar" los colores que se quieren, y despus ajustarlos. Tambin es ms sencillo paracrear conjuntos de colores combinados (manteniendo el mismo tono y variando laluminosidad/oscuridad y saturacin).

Hue (tono) es representado como un ngulo del crculo de color. Este ngulo viene dado como un sin unidades. Por definicin red=0=360 y los otros colores se extienden alrededor delcrculo, por lo tanto green=120 , blue=240 , etc.

La saturacin y la luminosidad son representados como porcentajes. 100% es saturacincompleta y 0% es escala de grises. 100% en la luminosidad es blanco, 0% es negro y 50% es"normal".

hsl(0, 100%,50%) /* red */hsl(30, 100%,50%)hsl(60, 100%,50%)hsl(90, 100%,50%)hsl(120,100%,50%) /* green */hsl(150,100%,50%)hsl(180,100%,50%)hsl(210,100%,50%)hsl(240,100%,50%) /* blue */hsl(270,100%,50%)hsl(300,100%,50%)hsl(330,100%,50%)hsl(360,100%,50%) /* red */

hsl(120,100%,25%) /* dark green */hsl(120,100%,50%) /* green */hsl(120,100%,75%) /* light green */

hsl(120,100%,50%) /* green */hsl(120, 67%,50%)hsl(120, 33%,50%)hsl(120, 0%,50%)

hsl(120, 60%,70%) /* pastel green */

4.4 FUNCIN HSLA()Los colores pueden definirse tambin utilizando la funcin hsla() . HSLa extiende el modelo decolor HSL visto anteriormente para incluir el canal alfa, lo que permite definir la opacidad delcolor. a significa opacity: 0.0=transparent; 1.0=opaque; .

hsla(240,100%,50%,0.05) /* 5% opaque blue */hsla(240,100%,50%, 0.4) /* 40% opaque blue */hsla(240,100%,50%, 0.7) /* 70% opaque blue */hsla(240,100%,50%, 1) /* full opaque blue */


CAPTULO 5 MDULO BACKGROUNDS ANDBORDERSLa especificacin oficial y el estado actual de desarrollo del mdulo Backgrounds and Borders enCSS 3 puede consultarse en http://www.w3.org/TR/css3-background/.

5.1 BORDES5.1.1 PROPIEDADES BORDER-*-*-RADIUSLa propiedad border-radius permite definir esquinas redondeadas en los elementos de unamanera muy sencilla, sin necesidad de utilizar imgenes o una estructura de div muy compleja.Las esquinas redondeadas pueden ser creadas de manera independiente utilizando las cuatropropiedades individuales border-*-radius (border-bottom-left-radius , border-bottom-right-radius , border-top-left-radius y border-top-right-radius). La curva o radio decada esquina se define usando uno o dos radios que definen su forma. Si nicamente definimosun radio, tenemos un crculo, si definimos dos radios tenemos una elipse.

border-*-*-radius: [ | ] [ | ]?

border-top-left-radius: 10px 5px;border-bottom-right-radius: 10% 5%;border-top-right-radius: 10px;

Las siguientes imgenes muestran un ejemplo de cmo pueden definirse los diferentes radios deun borde:

Figura 5.1 Diferentes radios de borde

5.1.2 PROPIEDAD BORDER-RADIUSEsta propiedad es una forma abreviada (shorthand) de establecer las cuatro propiedadesborder-top-left-radius , border-top-right-radius , border-bottom-right-radius yborder-bottom-left-radius .

Propiedad border-radiusValores [ | ]{1,4} [ / [ | ]{1,4} ]?Se aplica a Todos los elementos, pero los navegadores no estn obligados a aplicarlo a los

elementos table y inline-table cuando border-collapse es collapse . Elcomportamiento de los elementos internos de una tabla no est definido por el

NDICE DECONTENIDOSMdulo Backgrounds andBorders5.1 Bordes5.2 Sombras5.3 Fondos

Propiedad border-radiusmomento.

Valor inicial border-bottom-left-radius: 0 , border-bottom-right-radius: 0 ,border-top-left-radius: 0 , border-top-right-radius: 0

Descripcin Define el radio de las esquinas

Si se define el primer conjunto de valores, ste indica el radio horizontal de las esquinas. Elsegundo conjunto de valores, hace referencia al radio vertical. Si nicamente se define el primerconjunto de valores, hacer referencia al radio horizontal y vertical. El valor del radio puede ser:

: se puede expresar en cualquier unidad permitida por los tipos de datos del en CSS. Los valores negativos no son vlidos.

: los porcentajes para el eje horizontal se refieren a la anchura de la caja ylos porcentajes para el eje vertical se refieren a la altura. Los valores negativos no sonvlidos.

Valores Grficamente Descripcinradius Es un o que indica un radio

a utilizar para el borde en cada esquina del elemento.top-left-and-bottom-right

Es un o que indica un radioa utilizar para el borde en las esquinas superior-izquierda e inferior-derecha del elemento.

top-right-and-bottom-left

Es un o que indica un radioa utilizar para el borde en las esquinas superior-derecha e inferior-izquierda del elemento.

top-left Es un o que indica un radioa utilizar para el borde en la esquina superior-izquierda del elemento.

top-right Es un o que indica un radioa utilizar para el borde en la esquina superior-derecha del elemento.

bottom-right Es un o que indica un radioa utilizar para el borde en la esquina inferior-derechadel elemento.

bottom-left Es un o que indica un radioa utilizar para el borde en la esquina inferior-izquierda del elemento.

inherit Es una palabra clave que indica que los cuatrovalores se heredan del valor calculado del elementopadre.

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;border-radius: 5px;border-radius: 5px 10px / 10px;

Ejercicio 2

Ver enunciado

5.2 SOMBRASLa propiedad box-shadow es otra de las caractersticas ms esperadas de CSS 3. Permite aplicarde una manera muy sencilla sombras a los elementos (internas o externas), especificando elcolor, la separacin y la definicin.

La propiedad box-shadow acepta lista de valores de sombras separados por comas, cada una deellas con una longitud de 2 a 4 valores (es posible especificar la separacin horizontal, vertical, ladefinicin de la sombra y la distancia de la misma con respecto al borde), un color opcional y definir si la sombra es interna o externa.

Propiedad box-shadowValores none | [ , ]*Se aplica a Todos los elementos.Valor inicial noneDescripcin Define el radio de las esquinas

Donde :

= inset? && [ {2,4} && ? ]

Los posibles valores de son:

El primer valor indica la separacin horizontal de la sombra. Un valor positivo desplaza lasombra hacia la derecha de la caja, mientras que un valor negativo la desplazar hacia laizquierda.El segundo valor indica la separacin vertical de la sombra. Un valor positivo desplaza lasombra debajo de la caja, mientras que un valor negativo la desplazar hacia arriba.El tercer valor es el radio del desenfoque. Si el valor es 0 (no se aceptan valores negativos)la sombra ser muy ntida. Para valores mayores que 0 , la sombra se va difuminando.El cuarto valor es la distancia de propagacin. Un valor positivo hace que la sombra seexpanda en todas las direcciones segn el valor. Valores negativos causan que la sombra secontraiga.

box-shadow: 10px 10px;box-shadow: 10px 10px 5px #888;box-shadow: inset 2px 2px 2px 2px black;box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

El siguiente diagrama muestra un ejemplo del efecto de aplicar los efectos de desenfoque ypropagacin de la sombra:

Figura 5.2 Ejemplo de aplicar desenfoque y propagacin

Los efectos de sombra son aplicados de arriba hacia debajo, es decir, la primera sombra de lalista est sobre las dems. Las sombras no influyen en la estructura del del documento y puedensolaparse entre ellas. En terminos de pila y orden de pintado, las sombras externas son pintadasdebajo del fondo del elemento, y las sombras internas son pintadas encima del fondo delelemento.

Ejercicio 3

Ver enunciado

5.3 FONDOSCSS 3 aade nuevas posibilidades a la hora de trabajar con imgenes de fondo. Ahora podemosdefinir varias imgenes de fondo y especificar su tamao.

5.3.1 FONDOS MLTIPLESCon CSS3 se pueden aplicar fondos mltiples a los elementos. Estos se colocan en capas unaencima de la otra con el primer fondo en la parte superior y el ltimo en la parte posterior.Slamente el ltimo fondo puede incluir un color de fondo.

Un ejemplo muy sencillo:

Esta caja tiene dos imgenes de fondo, la primera es una oveja y la segunda es la hierba con elcielo de fondo.

#background {width: 500px;height: 250px;background-image: url(sheep.png), url(betweengrassandsky.png);background-position: center bottom, left top;background-repeat: no-repeat;

}

Las mltiples imgenes de fondo pueden especificarse indicando todas las imgenes de fondoseparadas por comas, en la propiedad background-image , donde cada una de las imgenes creauna nueva capa.

Propiedad background-imageValores [ , ]*

Propiedad background-imageSe aplica a Todos los elementos.Valor inicial NingunoDescripcin Especifica los fondos de un elemento.

5.3.2 POSICIONAR LOS FONDOSPodemos definir la posicin de cada uno de los fondo a travs de la propiedad background-position , utilizando las mismas palabras clave definidas en CSS 2.1.

Propiedad background-positionValores [ , ]*Se aplica a Todos los elementos.Valor inicial 0% 0%Descripcin Especifica la posicin de las imgenes de fondo definidas.

Cada uno de los valores separados por comas hacer referencia a las imgenes de fondo definidasen la propiedad background-image . Si se definen ms valores que imgenes de fondo, losvalores sobrantes son ignorados. Por ejemplo, si definimos tres imgenes de fondo, y cincoposiciones, las dos ltimas sern igonoradas.

De igual manera, si se especifican menos posiciones que imgenes de fondo, la lista de valores serepite desde el primer elemento, tantas veces como sea necesario.

5.3.3 ESCALAR IMGENES DE FONDOOtra de las propiedades introducidas en CSS 3 ha sido background-size . Esta propiedad permiteajustar el tamao de las imgenes de fondo, en lugar del comportamiento predeterminado demosaico, utilizando medidas estndar, porcentajes o las palabras reservadas contain y cover .

Un ejemplo muy sencillo:

background-size: auto;background-size: 275px 125px;#background1 { background-size: auto;}

#background2 { background-size: 275px 125px;}

Como en otras muchas propiedades de background , es posible especificar los distintos valoresseparados por comas.

Propiedad background-sizeValores [, ]*Se aplica a Todos los elementos.

Propiedad background-sizeValor inicial Ver propiedades individualesDescripcin Especifica los tamaos de fondos de un elemento.

Donde:

= [ | | auto ]{1,2} | cover | contain

Ejemplo:

background-size: 200px;background-size: 200px 100px;background-size: 200px 100px, 400px 200px;background-size: auto 200px;background-size: 50% 25%;background-size: contain;background-size: cover;

Al especificar los valores de o , su comportamiento es el esperado y esel que conocemos por ejemplo con las imgenes. Si especificamos un valor, este hace referenciaal ancho (manteniendo el alto proporcional) y si especificamos dos valores, estos hacenreferencia al ancho y alto respectivamente.

5.3.3.1 VALORES ESPECIALES CONTAIN Y COVERAdems de los valores y que se comportan de la manera queconocemos hasta ahora, la propiedad background-size admite dos valores especiales:contain y cover .

contain : en este caso, la imagen es redimensionada manteniendo sus proporcionesoriginales, de tal manera que cada lado sea tan grande como sea posible mientras que noexceda la longitud del lado correspondiente del contenedor. La imagen nunca excede eltamao de su contenedor, por lo que si no coincide con el tamao de su contenedor, puedenexistir zonas del fondo que no queden cubiertas por la imagen.

cover : en este otro caso, la imagen es redimensionada manteniendo sus proporcionesoriginales, de tal manera que el rea completa del fondo es siempre cubierta por la imagende fondo. En este caso, el tamao de la imagen siempre es igual o superior al rea del fondoa cubrir, pudiendo existir zonas de la imagen que no sean visibles.

5.3.4 PROPIEDAD SHORTHANDEs posible utilizar la propiedad shorthand background para especificar los distintos fondos y suspropiedades en una misma sentencia, indicando los distintos fondos separados por comas. Si sedesea especificar un color de fondo, ste nicamente puede ser definido en el ltimo valor de lapropiedad.

Propiedad backgroundValores [ , ]* Se aplica a Todos los elementos.Valor inicial Ver propiedades individuales

Propiedad backgroundDescripcin Especifica los fondos de un elemento.

Donde:

= || [ / ]? || || || {1,2}

= || [ / ]? || || || {1,2} ||

Ejemplo:

background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;

Ejercicio 4

Ver enunciado


CAPTULO 6 MDULO IMAGE VALUES ANDREPLACED CONTENTLa especificacin oficial y el estado actual de desarrollo del mdulo Image Values and ReplacedContent en CSS 3 puede consultarse en http://www.w3.org/TR/css3-images/.

6.1 CSS GRADIENTSLos degradados CSS son los nuevos tipo de aadidos en el mdulo de imagen de CSS3.Utilizar los degradados de CSS permite mostrar transiciones suaves entre dos o ms colores;esto permite a su vez evistar el uso de imgenes para lograr estos efectos, lo que reduce muchoel tiempo de descarga y el uso de ancho de banda. Adems, debido a que el degradado esgenerado por el navegador, los objetos con degradados se ven mejor cuando se acercan, y sepuede ajustar el diseo de una manera mucho ms flexible.

Los navegadores soportan dos tipos de degradados: lineal, que se define con la funcin linear-gradient y radial, definido con radial-gradient .

6.2 DEGRADADOS LINEALESPara crear un degradado lineal, se establece un punto de partida y una direccin (especificadocomo un ngulo) a lo largo del cual se aplica dicho degradado.

6.2.1 DEGRADADOS LINEALES SIMPLESScreen Shot Live Demo

/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */background: -prefix-linear-gradient(top, blue, white);

/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */background: linear-gradient(to bottom, blue, white);

Cambiando el mismo degradado para que se represente de izquierda a derecha:

Screen Shot Live Demo

/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based a

NDICE DECONTENIDOSMdulo Image Values andReplaced Content6.1 CSS gradients6.2 Degradados lineales6.3 Degradados radiales6.4 Repeticin de degradados

nd old browsers */background: -prefix-linear-gradient(left, blue, white);

/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */background: linear-gradient(to right, blue, white);

Y en diagonal:


/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */background: -prefix-linear-gradient(left top, blue, white);

/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */background: linear-gradient(to bottom right, blue, white);

6.2.2 NGULOSSi no se especifica ningn ngulo, se determina uno de manera automtica en funcin de ladireccin dada. Si se desea ms control sobre la direccin del degradado, se puede establecerespecficamente dicho ngulo.

Por ejemplo, aqu tenemos dos degradados, el primero con una direccin hacia la derecha, y elsegundo con un ngulo de 70 grados.

El de la derecha utiliza CSS de esta manera:

background: linear-gradient(70deg, black, white);

El ngulo se especifica como un angulo entre una lnea horizontal y la lnea de degradado, yendohacia la izquierda. En otras palabras, 0deg crea un degradado vertical desde la parte inferior a laparte superior, y 90deg genera un degradado horizontal de izquierda a derecha.

background: linear-gradient(, red, white);

6.2.3 COLOR STOPSLos color stops son los puntos de la lnea de degradado que tendrn un color especfico en dicholugar. La ubicacin se puede especificar con un porcentaje de la longitud de la lnea o como unalongitud absoluta. Se puede especificar tantas paradas de color como se quiera con el fin deconseguir el efecto deseado.

0% representara el punto de partida y 100% el punto final. Sin embargo, se pueden utilizar losvalores fuera de ese rango si es necesario para obtener el efecto deseado.

Ejemplo de tres paradas de color:


/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */background: -prefix-linear-gradient(top, blue, white 80%, orange);

/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */background: linear-gradient(to bottom, blue, white 80%, orange);

Ejemplo de variedad de colores:


/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);

/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */background: linear-gradient(to right, red, orange, yellow, green, blue);

6.2.4 TRANSPARENCIALos degradados admiten transparencia. Se puede utilizar, por ejemplo, con mltiples fondos opara crear efectos en imgenes de fondo. Por ejemplo:

/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://foo.com/image.jpg);

/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

6.3 DEGRADADOS RADIALESLos degradados radiales se especifican usando la funcin radial-gradient . La sintaxis essimilar a los degradados lineales, excepto en que se puede especificar la forma final deldegradado (circular o elptico) as como el tamao. Por defecto, la forma final es una elipse conlas mismas proporciones que la caja contenedora.

6.3.1 COLOR STOPSUn ejemplo sera:


background: radial-gradient(red, yellow, rgb(30, 144, 255));

Y un segundo ejemplo con localizaciones especficas:


background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

6.3.2 TAMAOsta es una de las reas en las que los degradados radiales se diferencias de los lineales. Sepuede proporcionar un valor de tamao que especifica el punto que define el tamao del crculo oelipse.

Ejemplos para elipses

Ejemplo con closest-side (el tamao es establecido por la distancia entre el punto de partida ocentro y el lugar ms prximo a la caja contenedora):


background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);

Ejemplo similar con farthest-corner :


background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF50%, white);

Ejemplos para crculos

Ejemplo con closest-side :


background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);

6.4 REPETICIN DE DEGRADADOSLas propiedades linear-gradient y radial-gradient no admiten automticamente larepeticin de los color stops. Sin embargo, las propiedades repeating-linear-gradient yrepeating-radial-gradient s ofrecen esta funcionalidad.

6.4.1 EJEMPLOSEste ejemplo utiliza repeating-linear-gradient :


background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white10px);

Otro ejemplo con esta misma propiedad:

background-color: #000;background-image: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127,0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77,63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77,63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);

Y un ejemplo de repeticin de un degradado radial:


background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);


CAPTULO 7 MDULO TEXTLa especificacin oficial y el estado actual de desarrollo del mdulo Text en CSS 3 puedeconsultarse en http://www.w3.org/TR/css3-text/.

CSS 3 ha aadido nuevas funcionalidades relacionadas con el texto, realizando un importanteavance en este sentido y facilitando la creacin de efecto de texto, sin necesidad de recurrir acomplejas soluciones.

7.1 SOMBRA EN TEXTOSFinalmente se ha aadido la posibilidad de crear sombras en los textos del documentos,eliminando la necesidad de crear estos textos en una herramienta externa (como Photoshop oGimp), he incluyendolos posteriormente como una imagen en el documento, lo que perjudicabadirectamente el contenido.

Propiedad text-shadowValores none | [ {2,3} && ? ]#Se aplica a Todos los elementos.Valor inicial noneDescripcin Especifica una sombra para el texto.

Esta propiedad acepta una lista de valores separados por comas que sern aplicados al texto.Las diferentes sombras son aplicadas de arriba hacia debajo, es decir, la primera sombra de lalista est sobre las dems.

Los valores de la sombra son interpretados de la siguiente manera:

El primer valor indica la separacin horizontal de la sombra. Un valor positivo desplaza lasombra hacia la derecha de la caja, mientras que un valor negativo la desplazar hacia laizquierda.El segundo valor indica la separacin vertical de la sombra. Un valor positivo desplaza lasombra debajo de la caja, mientras que un valor negativo la desplazar hacia arriba.El tercer valor es la difusin de la sombra. Si el valor es 0 (no se aceptan valores negativos)la sombra ser muy ntida. Para valores mayores que 0 , la sombra se va difuminando.

Algunos ejemplos:

EJEMPLO DE TEXTO SIN SOMBRAEJEMPLO DE TEXTO CON SOMBRAh3 {color: white; text-shadow: 0.1em 0.1em 0.2em black; }

I WISH WISH WISHh3 {text-shadow: 0.2em 0.5em 0.1em #600,

-0.3em 0.1em 0.1em #060,

NDICE DECONTENIDOSMdulo Text7.1 Sombra en textos7.2 Fuentes web

0.4em -0.3em 0.1em #006}

I, AUGUSTUS (YOU KNOW WHO)THAT'S EXTRA, OF COURSEh3 {text-shadow: -1px -1px white, 1px 1px #333}h3 {text-shadow: 1px 1px white, -1px -1px #444}

7.2 FUENTES WEBHasta la introduccin de esta nueva caracterstica en CSS 3, a la hora de escoger una fuente paraser utilizada en un documento HTML, nos encontrbamos con la limitacin de que el usuariotuviera ese tipo de letra instalada en su ordenador, porque de no ser as, los textos se mostrarancon otras tipografas, distintas a las que habamos elegido (las definidas como fallback o lafuente por defecto del navegador). Es por ello que el abanico de fuentes que podamos utilizar,estaba reducido a las tpicas Arial, Verdana, Times New Roman o Sans.

La regla @font-face permite enlazar fuentes en lnea que van a ser utilizadas en pginas web.La descripcin de la fuente, define la localizacin fsica de la fuente (local o externa), as como lascaractersticas de dicha fuente. Es posible declarar tantas reglas @font-face como fuentes seannecesarias utilizar.

Su sintaxis es la siguiente:

@font-face {[font-family: ;]?[src: [ [format(#)]? | ]#;]?[unicode-range: #;]?[font-variant: ;]?[font-feature-settings: normal|#;]?[font-stretch: ;]?[font-weight: ];[font-style: ];

}

Donde:

: especifica el nombre de la fuente que se utilizar. : URL para de la ubicacin remota de la fuente, o nombre de la fuente en el ordenadordel autor ("FontName") : variante de una fuente anterior. : especifica la anchura de la fuente. : especifica el peso de la fuente (light , normal , bold ...) : especifica el estilo de la fuente (normal , italic o oblique)

Un ejemplo sencillo:

Los usuarios que accedan con un navegador que cumpla con el estndar, vern este texto con lafuente Delicious, y esta parte con Delicious Bold.

Dependiendo del tipo de navegador con el que se acceda a nuestra web, ste acepta un tipoconcreto de fuente. Los tipos existentes son los siquientes:

String Formato de fuente Extensin"woff" WOFF (Web Open Font Format) .woff"truetype" TrueType .ttf"opentype" OpenType .ttf, .otf"embedded-opentype" Embedded OpenType .eot"svg" SVG Font .svg

Un ejemplo de utilizacin de varios orgenes de fuentes es el siguiente:

@font-face {font-family: 'ITCAvantGardeStd-Bk';

src: url('fonts/ITCAvantGardeStd-Bold.eot') format('eot'),url('fonts/ITCAvantGardeStd-Bold.woff') format('woff'),url('fonts/ITCAvantGardeStd-Bold.ttf') format('truetype'),url('fonts/ITCAvantGardeStd-Bold.svg') format('svg');

font-weight: bold;font-style: normal;

}

Ejercicio 5

Ver enunciado


CAPTULO 8 MDULO MULTI-COLUMN LAYOUTLa especificacin oficial y el estado actual de desarrollo del mdulo Multi-column Layout en CSS3 puede consultarse en http://www.w3.org/TR/css3-multicol/.

La propiedad multi-column permite crear estructuras multicolumna con nuestros textos de dosmaneras diferentes: definiendo el nmero de columnas (con la propiedad column-count), odefiniendo un ancho para dichas columnas (con la propiedad column-width). Es posibleespecificar el espacio entre columnas con la propiedad column-gap .

Un ejemplo de estructura multicolumna utilizando la propiedad column-count :

div { column-count:2; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum

Un ejemplo de estructura multicolumna utilizando la propiedad column-width :

div { column-width:10em; }


8.1 PROPIEDAD SHORTHANDComo los valores de las propiedades anteriores no se superponen, a menudo es convenienteutilizar la propiedad shorthand columns .

Propiedad columnsValores || Se aplica a Todos los elementos de bloque (excepto tablas), celdas de tabla y elementos

inline-block.Valor inicial noneDescripcin Especifica el nmero de columnas y/o ancho de las mismas.

8.2 EQUILIBRO DE ALTURALa especificacin de CSS3 requiere que la alturas de las columnas sea equilibrada. Esto es, elnavegador automticamente establece el mximo de altura de la columna de manera que lasalturas de los contenidos de las columnas sean aproximadamente iguales.

NDICE DECONTENIDOSMdulo Multi-column Layout8.1 Propiedad shorthand8.2 Equilibro de altura8.3 Espacios entre columnas8.4 Trazos entre columnas8.5 Texto sobre columnas

Sin embargo, en algunas situaciones, es util establecer explcitamente el mximo de altura. Si laaltura est limmitada mediante las propiedades CSS height o max-height en un bloque multi-columna, cada columna puede "crecer" hasta la mxima altura y no ms all antes de aadir unanueva columna.

8.3 ESPACIOS ENTRE COLUMNASSiempre existe un espacio entre columnas. El espacio recomendado es 1em . Este tamao puedeser cambiado aplicando la propiedad column-gap .

Propiedad column-gapValores | normalSe aplica a Elementos multi-columnaValor inicial normalDescripcin Especifica el espacio entre columnas

8.4 TRAZOS ENTRE COLUMNASEn el espacio que existe entre las columnas, es posible dibujar un trazo, como si de un borde setratara.

Propiedad column-ruleValores || || [ |

transparent ]Se aplica a Elementos multi-columnaValor inicial transparentDescripcin Especifica el trazo a dibujar en el espacio entre columnas.


8.5 TEXTO SOBRE COLUMNASEs posible mostrar un elemento, inicialmente incluido en el texto formateado en columnas, paraque ocupe el ancho completo de las columnas, utilizando la propiedad column-span .

Propiedad column-spanValores none | all ]Se aplica a Elementos de bloque, excepto los flotantes y los definidos con posicin absoluta.Valor inicial noneDescripcin Especifica cuantas columnas ocupa el elemento.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut

labore et dolore magna aliqua. Ut enim ad minim veniam,

LOREN IPSUMquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim idest laborum


CAPTULO 9 MDULO MEDIA QUERIESLa especificacin oficial y el estado actual de desarrollo del mdulo Media Queries en CSS 3puede consultarse en http://www.w3.org/TR/css3-mediaqueries/.

Un Media Query consiste en realizar una consulta sobre un tipo de medio y al menos unaexpresin que limita el alcance de las hojas de estilo en funcin a caractersticas del dispositivo,como pueden ser el ancho, alto o color. Aadidos a CSS 3, los Media Queries permiten que lapresentacin del contenido se adapte a un rango especfico de dispositivos sin tener que cambiarel contenido en s.

9.1 SINTAXISLos Media Queries pueden contener una o ms expresiones, expresadas como funcionesmultimedia, que devuelven true o false. El resultado del query o consulta devuelve true si elmedia type especificado en el Media Query coincide con el tipo de dispositivo en que eldocumento est siendo mostrado y todas las expresiones en el Media Query devuelven true.

Cuando un Media Query devuelve true, la correspondiente hoja de estilo es aplicada, siguiendo lasreglas habituales de CSS. Las hojas de estilo con Media Queries adjuntos a los tags sedescargan siempre, incluso si sus Media Queries resultan false (sin embargo, en este caso, no seaplicarn).

9.2 OPERADORES LGICOS O LOGICAL OPERATORSSe pueden crear Media Queries complejos utilizando operadores lgicos, incluyendo not , and yonly . El operador and es usado para combinar mltiples caractersticas en un slo Media Query,requiriendo que cada funcin devuelva true para que el Query tambin lo sea. El operador not seutiliza para negar un Media Query completo y el operador only se usa para aplicar un estilo slosi el Query completo es correcto.

Adems, se pueden combinar mltiples Media Queries separados por comas en una lista; sialguno de los Queries devuelve true, toda la consulta devolver *true. Esto es equivalente a unoperador or .

9.2.1 ANDEl keyword and se usa para combinar mltiples caractersticas, as como combinar stos contipos de medios. Un Media Query bsico sera:

@media (min-width: 700px) { ... }

Sin embargo, si quisiramos que esto slo se aplicara si la pantalla est en modo apaisado, seusara el operador and :

@media (min-width: 700px) and (orientation: landscape) { ... }

Si adems, slo quisiramos que esto se aplicara si el dispositivo fuera un media type TV:

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

NDICE DECONTENIDOSMdulo Media Queries9.1 Sintaxis9.2 Operadores lgicos o logicaloperators

9.2.2 COMMA-SEPARATED LISTSCuando se utilizan las listas separadas por comas en los Media Queries, si algunas de las MediaQueries devuelven true, los estilos se aplican al documento. Cada Media Query separado porcomas en la lista se trata como un Query individual, y cualquier operador aplicado a un MediaQuery no afecta a los dems. Esto significa que los Media Queries separados por comas puededirigirse a diferentes media features, types o states.

Por ejemplo, si quisiramos aplicar un conjunto de estilos si el dispositivo de visualizacin tieneun mnimo de 700px o est en modo apaisado:

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

9.2.3 NOTLa keyword not se aplica al Media Query en su totalidad y devuelve true si el Media Querydevuelve false (como monochrome en una pantalla a color). Este keyword no se puede utilizarpara negar una caracterstica en concreto, sino la consulta completa. Por ejemplo:

@media not all and (monochrome) { ... }

Esto significa que el Query es evaluado de esta manera:

@media not (all and (monochrome)) { ... }

en vez de as:

@media (not all) and (monochrome) { ... }

Por ejemplo, este otro Media Query:

@media not screen and (color), print and (color)

Se evala as:

@media (not (screen and (color))), print and (color)

9.2.4 ONLYEl keyword only previene a los navegadores que no soportan Media Queries:

Ejercicio 6

Ver enunciado


CAPTULO 10 MDULO TRANSFORMSLa especificacin oficial y el estado actual de desarrollo del mdulo Transforms en CSS 3 puedeconsultarse en http://www.w3.org/TR/css3-transforms/.

Al modificar el espacio de coordenadas, las transformaciones CSS permiten cambiar la posicindel contenido afectado sin interrumpir el flujo normal del resto de cajas. Se llevan a cabomediante un conjunto de propiedades CSS que permiten aplicar transformaciones lineales afinesa los elementos HTML. Estas transformaciones incluyen la rotacin, inclinacin, escala ytraslacin tanto en el plano como en un espacio tridimensional.

10.1 PROPIEDADES PRINCIPALESSe utilizan dos propiedades principales para definir las transformaciones CSS: transform ytransform-origin .

transform-origin : especifica la posicin de origen de la transformacin. Por defecto seencuentra en el centro del elemento (como si definisemos el punto en 50% 50%), pero sepuede definir cualquier otro punto. Es utilizado por varias transformaciones, como rotacin,escala o inclinacin, que necesitan un punto inicial como parmetro.transform : especifica las transformaciones a aplicar al elemento. Se trata de una lista defunciones de transformacin separadas por espacios, que se aplican una detrs de otra.

Las siguientes propiedades adicionales, aaden control adicional a las transformaciones,permitiendo incluso realizar transformaciones 3D:

perspective : permite cambiar la perspectiva de los elementos y transmitir la sensacin deencontrarse en un entorno en tres dimensiones.perspective-origin : especifica la posicin de origen de la perspectiva.transform-style : permite a los elementos transformados en 3D y a sus descendientestambin transformados en 3D, compartir un espacio 3D comn.

10.2 FUNCIONES DE TRANSFORMACIN 2DA continuacin, se muestra el listado completo de funciones de transformacin 2D disponibles enCSS 3:

translate([, ]) : aplica una traslacin 2Despecificada por el vector [tx, ty] . Si no se indica el valor ty , su valor es 0.

translateX() : aplica una traslacin 2D en el eje x .translateY() : aplica una traslacin 2D en el eje y .

scale([, ]) : aplica una operacin de escalado del elementosespecificada por el vector [sx, sy] . Si no se indica el valor sy , su valor es igual a sx .

scaleX() : aplica una operacin de escalado utilizando el vector deescalado [sx, 1] .scaleY() : aplica una operacin de escalado utilizando el vector de

NDICE DECONTENIDOSMdulo Transforms10.1 Propiedades principales10.2 Funciones detransformacin 2D10.3 Ejemplos10.4 Propiedades 3D

escalado [1, sy] .

rotate() : aplica una operacin de rotacin especificada por los ngulos delparmetro, y tomando como origen de la roptacin el punto definido por transform-origin .skew([, ]) : aplica una operacin de inclinacin especificada por elvector [ax, ay] . Si no se indica el valor de ay , su valor es 0.

skewX() : aplica una operacin de inclinacin en el eje x .skewY() : aplica una operacin de inclinacin en el eje y .

10.3 EJEMPLOS10.3.1 ROTACINEn este ejemplo se crea un iframe que permite utilizar la pgina principal de Google, rotada 90grados desde su esquina inferior izquierda.

div { transform: rotate(90deg); transform-origin: bottom left;}

10.3.2 INCLINACIN Y TRASLACINEn este ejemplo se crea un iframe que permite utiliza la pgina principal de Google, inclinada 10grados y trasladada 150 pixels en el eje X.

div { transform: skewx(10deg) translatex(150px); transform-origin: bottom left;}

10.4 PROPIEDADES 3DLa realizacin de transformaciones CSS en el espacio es algo ms complejo. Hay que empezarconfigurando el espacio 3D, dndole un punto de vista. Despus, hay que configurar cmo secomportarn los elementos 2D en ese espacio tridimensional.

10.4.1 LA CREACIN DE UN PUNTO DE VISTA (O PERSPECTIVA)El primer elemento a configurar es la perspectiva. La perspectiva es lo que da la impresin detres dimensiones. Cunto ms lejos del espectador se encuentran los elementos, ms pequeosse nos muestran.

Cun rpido estos elementos reducen su tamao es definido por la propiedad perspective .

Cuanto ms pequeo es su valor, ms profunda es la perspectiva.

Figura 10.1 Profundidad de la perspectiva

El segundo elemento a configurar es la posicin del espectador, con la propiedad perspective-origin . Por defecto, la perspectiva se centra en el espectador, lo cual no siempre es lo adecuado.

Figura 10.2 Posicin del espectador

Una vez realizado esto, se puede trabajar sobre el elemento en el espacio 3D.

Ejercicio 7

Ver enunciado


CAPTULO 11 MDULO TRANSITIONSLa especificacin oficial y el estado actual de desarrollo del mdulo Transitions en CSS 3 puedeconsultarse en http://www.w3.org/TR/css3-transitions/.

Las transiciones CSS, que forman parte del conjunto de especificaciones de CSS3, proporcionanuna forma de controlar la velocidad de la animacin al cambiar las propiedades CSS. Los cambiosen las propiedades no tienen efecto inmediato, sino que se puede establecer un periodo detiempo para que stos se ejecuten. Por ejemplo, al cambiar el color de un elemento de blanco anegro, este cambio normalmente se ejecuta de manera inmediata. Sin embargo, con lastransiciones CSS, los cambios se producen con intervalos de tiempo que siguen una curva deaceleracin, y pueden ser personalizados.

Las animaciones que implican transicin entre dos estados se llaman a menudo transicionesimplcitas, ya que los estados intermedios entre el inicial y el final son implcitamente definidospor el navegador.

Las transiciones CSS permiten decidir qu propiedades animar (mediante su inclusin explcita),cundo comenzar esta animacin (estableciendo un retraso o delay), cunto durar(estableciendo una duracin), y cmo se ejecutar (definiendo una funcin de tiempo).

11.1 PROPIEDADES "ANIMABLES"Se puede definir qu propiedad debe ser animada y en qu manera. Esto permite la creacin detransiciones complejas. Como la animacin de algunas propiedades no tiene sentido, la lista depropiedades "animables" se limita a un conjunto finito.

Tambin el valor auto es un caso complejo. La especificacin nos dice que no debemos animardesde y hacia dicho valor. Algunos agentes de usuario, como los basados en Gecko o WebKit,implementan este requisito, que al usar animaciones con auto nos puede dar lugar a resultadosimpredecibles, dependiendo del navegador y su versin; por lo que debemos evitarlo.

Tambin se debera tener cuidado al utilizar una transicin inmediatamente despus de aadir elelemento al DOM utilizando .appendChild() o borrando su propiedad display: none; . Estose nos muestra como si el estado inicial nunca hubiese existido y el elemento estuviese siempreen su estado final. La manera ms sencilla de superar esta limitacin es aplicar unwindow.setTimeout() de algunos milisegundos antes de cambiar la propiedad CSS a la que sepretende aplicar la transicin.

11.2 PROPIEDAD TRANSITION-PROPERTYEl primer paso al crear una transicin, es especificar la propiedad o propiedades sobre las que se

NDICE DECONTENIDOSMdulo Transitions11.1 Propiedades "animables"11.2 Propiedad transition-property11.3 Propiedad transition-duration11.4 Propiedad transition-timing-function11.5 Propiedad transition-delay11.6 Propiedad transition11.7 Listas de valores11.8 Finalizacin de unatransicin11.9 Transiciones y JavaScript

va a aplicar los efectos de la transicin. Podemos decidir que sean todas las propiedades,ninguna o un listado de ellas.

transition-property: none | all | [ ] [, ]*

transition-property: all;transition-property: none;transition-property: background-color;transition-property: background-color, height, width;

Si se indica la palabra reservada all , todas las propiedades que sean capaces de ser animadas ypara las que se ha definido un cambio, sern animadas. Si se especifica none , ninguna propiedadser animada.

11.3 PROPIEDAD TRANSITION-DURATIONLa propiedad transition-duration acepta una lista separada por comas de tiempos,especificadas en segundos o milisegundos, que determinan cunto tiempo tarda cada propiedad,en completar la transicin.

transition-duration: [, ]*

transition-duration: 2s;transition-duration: 4000ms;transition-duration: 4000ms, 8000ms;

11.4 PROPIEDAD TRANSITION-TIMING-FUNCTIONLa propiedad transition-timing-function es utilizada para especificar el ritmo en el que seproducen los cambios durante la transicin. Esto puede realizarse de dos maneras: indicando elnombre de una funcin de tiempo (ease , linear , ease-in , ease-out o ease-in-out) odefiniendo una funcin de tiempo personalizada (especificando cuatro coordenadas para definiruna curva bezier).

transition-timing-function: [, ]*

transition-timing-function: ease;transition-timing-function: ease, linear;transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);

Vemos lo primero de todo las funciones predefinidas. Este ejemplo muestra cmo se comportacada una de las funciones. Cada caja se expandir de 150px a 300px , con una duracin de latransicin de 3 segundos.

easelinearease-inease-outease-in-out

Adems de estas funciones de tiempo predefinidas, tenemos la posibilidad de declarar nuestrapropia funcin de tiempo, utilizando una funcin cubic-bezier .

Figura 11.1 Puntos de control en una curva bezier

Si no se especifica ninguna funcin de tiempo, por defecto se aplica ease .

11.5 PROPIEDAD TRANSITION-DELAYEl ltimo paso para crear una transicin, es especificar un retraso (opcional) en el inicio de latransicin. Aqu tambin podemos especificar una lista de tiempos, en segundos o milisegundos,que determinan el inicio de la transicin desde que esta se lanza. El valor por defecto es 0 , estoes, se inicia de inmediato.

En este caso los valores negativos s son aceptados. En este caso, la transicin se iniciar tanpronto sea posible, pero dar la impresin que ya lleva tiempo ejecutndose.

transition-delay: [, ]*

transition-delay: 5s;transition-delay: 4000ms, 8000ms;transition-delay: -5s;

-2s delayno delay1s delay2s delay3s delay5s delay

11.6 PROPIEDAD TRANSITIONComo de costumbre, disponemos de la propiedad shorthand que nos permite definir todas laspropiedades de una sola vez.

transition: [, ]*

=

transition: background-color 3s linear 1s;transition: 4s ease-in-out;

transition: 5s;

El nico valor requerido en esta propiedad es transition-duration .

11.7 LISTAS DE VALORESSi la lista de valores de cualquier propiedad es ms corta que otras, sus valores son repetidoshasta hacer que coincidan. Por ejemplo:

div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s;}

Esto es tratado como si fuese:

div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s, 3s, 5s;}

De manera similar, si la lista de valores de cualquier propiedad es ms larga que la detransition-property , es acortado, por lo que si tienes este cdigo CSS:

div { transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s;}

Se interpreta como:

div { transition-property: opacity, left; transition-duration: 3s, 5s;}

11.8 FINALIZACIN DE UNA TRANSICINExiste un slo evento que se dispara cuando las transiciones se completan. En todos losnavegadores que cumplen el estndar, el evento es transitionend , en WebKit eswebkitTransitionEnd . El evento transitionend ofrece dos propiedades:

propertyName : string que indica el nombre de la propiedad CSS cuya transicin estcompletada.

elapsedTime : un float que indica el nmero de segundos que la transicin ha estadoejecutndose en el momento en el que se dispara el evento. Este valor no est afectado porel valor de transition-delay .

Como de costumbre, se puede utilizar el mtodo element.addEventListener() para supervisareste evento:

el.addEventListener("transitionend", updateTransition, true);

11.9 TRANSICIONES Y JAVASCRIPTLas transiciones con una buena herramienta para crear una apariencia mucho ms equilibradasin tener que modificar la funcionalidad JavaScript. Por ejemplo:

Click anywhere to move the ball

Utilizando JavaScript:

var f = document.getElementById('foo');document.addEventListener('click', function(ev){ f.style.left = (ev.clientX-25)+'px'; f.style.top = (ev.clientY-25)+'px';},false);

Con CSS simplemente es necesario aadir una transicin al elemento:

p {padding-left: 60px;

#foo { border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: all 1s;}

Ejercicio 8

Ver enunciado


CAPTULO 12 MDULO ANIMATIONSLa especificacin oficial y el estado actual de desarrollo del mdulo Animations en CSS 3 puedeconsultarse en http://www.w3.org/TR/css3-animations/.

Las animaciones CSS 3 hacen posible animar transiciones de una configuracin de estilo de CSS aotra. Las animaciones constan de dos componentes: un estilo que describe la animacin CSS y unconjunto de fotogramas que indican el comienzo y final de la animacin, as como los posiblespuntos de ruta intermedios durante la animacin.

Hay tres ventajas clave en las animaciones CSS sobre las tcnicas de animacin tradicionalesejecutadas a travs de scripts:

Son fciles de usar para las animaciones simples; puedes crearlas sin tener la necesidad deconocer el funcionamiento de JavaScript.

Las animaciones funcionan bien, incluso bajo carga de sistema medio. Las animacionessimples pueden, a menudo, ejecutarse de manera pobre en JavaScript (a menos que estnbien hechas). El motor de renderizado puede no reproducir ciertos fotogramas y utilizarotras tcnicas para mantener el reproduccin lo ms suave posible.

Dejar al navegador controlar la secuencia de animacin permite a ste optimizar elrendimiento y la eficiencia a travs de, por ejemplo, la reduccin de la frecuencia deactualizacin de las animaciones en ejecucin en pestaas que no estn visibles en esemomento.

12.1 CONFIGURACINPara crear una secuencia de animacin CSS, se requiere dar estilo al elemento que se quiereanimar con la propiedad de animacin o sus sub-propiedades. Esto permite configurar lostiempos y duracin de la animacin, as como otros detalles de cmo la secuencia de animacindebe progresar. Esto, sin embargo, no configura la apariencia real de la animacin, que seestablece utilizando los keyframes explicados en el apartado siguiente.

Las sub-propiedades de la propiedad animacin son:

animation-delay : configura el retraso entre lo que tarda el elemento en cargarse y elcomienzo de la secuencia de animacin.animation-direction : configura si la animacin debe alternar direccin en cadareproduccin a travs de la secuencia o volver al punto de inicio y repetirse.animation-duration : configura el tiempo que tarda la animacin en completar un ciclo.animation-iteration-count : configura el nmero de veces que la animacin deberepetirse, puede establecerse el valor infinite para repetir la animacin de formaindefinida.animation-name : especifica el nombre de los keyframes que describen los fotogramas dela animacin.animation-play-state : permite pausar y reanudar la secuencia de animacin.animation-timing-function : configura los tiempos de la animacin; esto es, cmo la

NDICE DECONTENIDOSMdulo Animations12.1 Configuracin12.2 keyframes12.3 Ejemplos

animacin transiciona a travs de los fotogramas mediante el establecimiento de curvas deaceleracin.animation-fill-mode : configura qu valores son aplicados por la animacin antes ydespus de que sta es ejecutada.

12.2 KEYFRAMESUna vez que se han configurado los tiempos de la animacin, es necesario definir la apariencia desta. Esto se realiza mediante el establecimiento de dos o ms fotogramas, definidos por loskeyframes . Cada fotograma describe cmo el elemento animado debe ejecutarse en unmomento dado durante la secuencia de animacin.

Dado que los tiempos de la animacin son definidos en el estilo CSS que configura la animacin,keyframes utiliza un porcentaje para indicar el momento de la secuencia de animacin en el quetienen lugar. 0% indica el primer momento de la secuencia de animacin, mientras que 100%indica el estado final de sta. Debido a que estos dos momentos son tan importantes, tienen dosalias especiales: from y to . Ambos son opcionales. Si from/0% o to/100% no son especificados,el navegador inicia o finaliza la animacin utilizando los valores calculados de todos losatributos.

Se pueden incluir opcionalmente fotogramas adicionales que describen los pasos intermediosdesde el punto de partida hasta el punto final de la animacin.

La sintaxis de la regla keyframe es la siguiente:

@keyframes {[ [ from | to | ] [, from | to | ]* block ]*

}

12.3 EJEMPLOS12.3.1 CREACIN DE TEXTOS EN MOVIMIENTOEste sencillo ejemplo da estilo al elemento para que el texto se dezlice desde el bordederecho de la ventana del navegador.

h1 { animation-duration: 3s; animation-name: slidein;}

@keyframes slidein { from {

margin-left: 100%;width: 300%

}

to {margin-left: 0%;width: 100%;

}}

El estilo dado al elemento , en este caso, especifica que la animacin debe esperar 3

segundos para ejecutarse de principio a fin, utilizando la propiedad animation-duration , y queel valor de los keyframes que definen los fotogramas para la secuencia de animacin esslidein .

Si quisisemos dar un estilo personalizado al elemento para que apareciera ennavegadores que no soportan animaciones CSS, deberamos incluirlo aqu tambin. Sin embargo,en este caso, no queremos ningn estilo personalizado adems del efecto de animacin.

Los fotogramas son definidos utilizando los keyframes . En este caso, slamente tenemos dosfotogramas. El primero se ejecuta en el 0% (utilizando el alias from). Adems, aqu configuramosque el margen izquierdo del elemento se ejecute al 100% (esto es, en el extremos derecho delelemento contenedor), y que la anchura del elemento sea 300% (o tres veces la anchura delelemento contenedor). Esto provoca que el primer fotograma de la animacin tenga elencabezado fijado en el borde derecho de la ventana del navegador.

El segundo (y final) fotograma se ejecuta al 100% (utilizando el alias to). El margen izquierdo seestablece en 0% y el ancho del elemento en 100%. Esto hace que el encabezado finalice suanimacin a ras del borde izquierdo del rea de contenido.

12.3.1.1 AADIR OTRO FOTOGRAMAAadamos ahora otro fotograma al ejemplo de animacin anterior. Digamos que queremos que lafuente del encabezado aumente a medida que se mueve de derecha a izquierda por un tiempo, ydespus disminuya de nuevo hasta su tamao original. Es tan sencillo como aadir estefotograma:

75% {font-size: 300%;margin-left: 25%;width: 150%;

}

Esto indica al navegador que al 75% del "camino" de la secuencia de animacin, la cabecera debetener su margen izquierdo al 25% y la anchura al 150%.

12.3.1.2 HACER QUE SE REPITAPara hacer que la animacin se repita por s sola, simplemente hay que utilizar la propiedadanimation-iteration-count para indicar cuntas veces tiene sta que repetirse. En este caso,utilizaremos infinite para que la animacin se repita de forma indefinida:

h1 { animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite;}

12.3.1.3 HACER QUE SE MUEVA HACIA ATRS Y ADELANTEEl ejemplo anterior haca que la animacin se repitiera, pero el hecho de que la animacin salte denuevo al comienzo es algo que resulta extrao. Lo que realmente queremos es que se muevehacia atrs y adelante de la pantalla. Esto se logra fcilmente estableciendo la propiedadanimation-direction con el valor alternate :

h1 {

animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate;}

12.3.1.4 UTILIZAR EVENTOS DE ANIMACINSe puede obtener un control adicional sobre las animaciones - as como informacin til sobrestas -, mediante el uso de eventos de animacin. Estos eventos, representados por el objetoAnimationEvent , pueden ser utilizados para detectar cundo comienzan las animaciones,terminan o inician una nueva iteracin. Cada evento incluye el momento en el que se produjo, ascomo el nombre de la animacin que desencaden el evento.

Nosotros modificaremos el texto desizante del ejemplo anterior para emitir informacin sobrecada evento de animacin cuando se produce y as poder echar un vistazo a cmo funcionan.12.3.1.4.1 AADIR LOS DETECTORES DE EVENTOS DE ANIMACIN

Usaremos cdigo JavaScript para "escuchar" los tres posibles eventos de animacin. La funcinsetup() configura los detectores de eventos:

function setup() {var e = document.getElementById("watchme");

e.addEventListener("animationstart", listener, false); e.addEventListener("animationend", listener, false); e.addEventListener("animationiteration", listener, false);

var e = document.getElementById("watchme"); e.className = "slidein";}

Este es un cdigo bastante estndar; se puede obtener ms informacin sobre cmo funciona enla documentacin de element.addEventListener() . Lo ltimo que la funcin setup() realizaaqu es establecer la class sobre el elemento que estamos animando a slidein ; hacemos estopara iniciar la animacin.

Por qu? Porque el evento animationstart se ejecuta en cuanto la animacin se inicia, y ennuestro caso, esto sucede antes de ejecutar el cdigo. As que iniciaremos la animacin nosotrosmismos.12.3.1.4.2 RECEPCIN DE LOS EVENTOS

Los eventos se "entregan" con la funcin listener() , que se muestra a continuacin:

function listener(e) {var l = document.createElement("li");switch(e.type) {

case "animationstart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime;

break;case "animationend":

l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;break;

case "animationiteration": l.innerHTML = "New loop started at time " + e.elapsedTime;

break;}

document.getElementById("output").appendChild(l);}

Este cdigo tambin es muy sencillo. Simplemente "mira" al event.type para determinar qutipo de evento de animacin se produce, y a continuacin aade una nota apropiada al (listano ordenada) que estamos usando para registrar estos eventos.

La salida, cuando todo est dicho y hecho, se vera algo as:

Iniciado: el tiempo transcurrido es 0Nuevo ciclo comenz en el momento 3.01200008392334Nuevo ciclo comenz en el momento 6.00600004196167Finalizado: tiempo transcurrido es 9.234000205993652

Hay que tener en cuenta que los tiempos estn muy cerca entre s, y que no se muestranexactamente igual que los establecidos cuando la animacin fue configurada. Tambin hay quesaber que despus de la iteracin final de la animacin, el evento animationiteration no seenva; en su lugar se enva el evento animationend .

Ejercicio 9

Ver enunciado


CAPTULO 13 EJERCICIOS DE CSS 313.1 CAPTULO 213.1.1 EJERCICIO 1Dado el siguiente cdigo HTML, y utilizando las pseudo-clases first-child , first-of-type ,nth-of-type , nth-last-of-type , last-of-type y last-child conseguir el siguienteresultado:

Ejercicio de pseudo-clases

PrimeroSegundoTerceroCuartoQuinto

Figura 13.1 Aspecto tras aplicar los estilos utilizando las pseudo-clases

13.2 CAPTULO 513.2.1 EJERCICIO 2Dados el siguiente cdigo HTML y CSS base, aplicar las reglas CSS necesarias para conseguir elsiguiente aspecto:

NDICE DECONTENIDOSEjercicios de CSS 313.1 Captulo 213.2 Captulo 513.3 Captulo 713.4 Captulo 913.5 Captulo 1013.6 Captulo 1113.7 Captulo 1213.8 Ejercicios finales

Figura 13.2 Estado final tras aplicar los estilos de borde

Descargar los ficheros fuente

13.2.2 EJERCICIO 3Dados el siguiente cdigo HTML y CSS base, aplicar las reglas CSS necesarias para conseguir elsiguiente aspecto:

Figura 13.3 Estado final tras aplicar los estilos de sombra


13.2.3 EJERCICIO 4Dados el siguiente cdigo HTML y CSS base, aplicar las reglas CSS necesarias para conseguir elsiguiente aspecto:

Figura 13.4 Estado final tras definir fondos mltiples


13.3 CAPTULO 713.3.1 EJERCICIO 5Dados el siguiente cdigo HTML y CSS base, aplicar las reglas CSS necesarias para conseguir elsiguiente aspecto:

Figura 13.5 Estado final tras aplicar efectos de fuentes


13.4 CAPTULO 913.4.1 EJERCICIO 6

Dados el siguiente cdigo HTML y CSS base, aplicar los Media Query necesarios para obtener elcomportamiento mostrado en las imgenes.

Figura 13.6 Aspecto de la web a pantalla completa

Figura 13.7 Aspecto de la web en una pantalla de 1000px

Figura 13.8 Aspecto de la web en una pantalla de 480px


13.5 CAPTULO 1013.5.1 EJERCICIO 7Dados el siguiente cdigo HTML y CSS base, crear y aplicar las siguientes transformaciones.Utilizar nicamente selectores especficos de CSS 3:

Desplazar la primera caja 100px hacia la derecha, y 50px hacia debajo desde su posicinoriginal.Incrementar el tamao de la segunda caja, hacindola el doble de grande.Rotar la tercera caja en 45, tanto desde su centro de coordenadas como desde la esquinasuperior izquierda.Crear un paralelogramo con la cuarta caja, cuyo ngulo de inclinacin sea de 25.


13.6 CAPTULO 1113.6.1 EJERCICIO 8Dados el siguiente cdigo HTML y CSS base, crear las transiciones necesarias para pasar delestado inicial al final, aplicando las siguientes transformaciones:

Rotar los elementos 270.Intercambiar las posiciones de las cajas 1 y 2, 3 y 4.Cambiar el tamao de 100px a 50px .Cambiar el color de fondo de azul a rojo.

Cambiar el color del texto de negro a amarillo.Cambiar el tamao de letra de 20px a 18px .

Utilizar en cada caso, una duracin y funcin de tiempo diferentes.

Figura 13.9 Estado inicial antes de la transicin

Figura 13.10 Estado final tras la transicin


13.7 CAPTULO 1213.7.1 EJERCICIO 9Dados el siguiente cdigo HTML y CSS base, crear las animaciones necesarias para simular unefecto de nieve. Utilizad al menos dos animaciones:

La primera para simular la caida de los copos de nieve.La segunda para hacer desaparecer los copos segn van llegando al suelo, utilizando lapropiedad opacity .

La animacin debe ejecutarse de manera infinita.

Figura 13.11 Copos de nieve en movimiento


13.8 EJERCICIOS FINALES13.8.1 EJERCICIO FINAL 1Dados el siguiente cdigo HTML y CSS base, aplicar las animaciones y transformacionesnecesarias para conseguir el siguiente efecto:

Al cargarse la pgina, nicamente se mostrarn los recuadros con las imgenes, ocultandoel ttulo, texto, enlace a "Leer ms" y el fondo naranja.Al pasar con el ratn sobre la imagen, debe ocurrir lo siguiente:

La imagen de fondo aumentar su tamao, dando la impresin de que se acerca.Se mostrar el fondo naranja, de manera progresiva.El ttulo aparecer por la parte superior de la imagen, hasta colocarse en su lugar.El prrafo aparecer por la parte inferior de la imagen, hasta colocarse en su lugar.Se mostrar el enlace "Leer ms", de manera proresiva.

Figura 13.12 Estado final tras realizar las aminaciones y transformaciones


13.8.2 EJERCICIO FINAL 2Dados el siguiente cdigo HTML y CSS base, simular el comportamiento de un reloj de aguja:

Figura 13.13 Reloj marcando las horas, minutos y segundos


CSS3 - ARKAITZ GARRO

Documents

Transcript of CSS3 - ARKAITZ GARRO

Manual Css3

Europar elkartea arkaitz

Elena Garro - Ines

practicum II, Musika Hezkuntza, Arkaitz Sagasti

Elena Garro Tlaxcaltecas

CSS - CSS3

Oscar garro

Libro.máximo Sabino Garro

Manual de CSS3

PRÁCTICAS CSS3

Estilo & CSS3

Arrazolako bidaia - Arkaitz Bengoa

Arkaitz Miner Aristizabal Imanol Miner Aristizabal

Elena Garro

INTRODUCCION CSS3

07. Usando CSS3

Elena Garro Perfecto_luna

Manual css3 DesarrolloWeb

Sara Garro

Curso css3