1. Estilos y estructura

CSS: Cascading Style Sheets (Hoja de Estilos en Cascada) es un lenguaje que trabaja junto HTML para proveer estilos visuales a los elementos del documento, como tamao, color, fondo, bordes, etc.

Oficialmente CSS nada tiene que ver con HTML5. CSS no es parte de la especificacin y nunca lo fue. Este lenguaje es, de hecho, un complemento desarrollado para superar las limitaciones y reducir la complejidad de HTML. Al comienzo, atributos dentro de las etiquetas HTML provean estilos esenciales para cada elemento, pero a medida que el lenguaje evolucion, la estructura de cdigos se volvi ms compleja y HTML por si mismo no pudo ms que satisfacer las demandas de los diseadores. En consecuencia, CSS fue adoptado como la forma de separar la estructura de la presentacin. Desde entonces, CSS ha crecido y ganado importancia, pero siempre desarrollado en paralelo, enfocado en las necesidades de los diseadores y apartado del proceso de evolucin de HTML.

1.1 Elementos Block

Con respecto a la estructura, bsicamente cada navegador ordena los elementos por defecto de acuerdo a su tipo: block (bloque) o inline (en lnea). Esta clasificacin est asociada con la forma en que los elementos son mostrados en pantalla.

Elementos block son posicionados uno sobre otro hacia abajo en la pgina.

Elementos inline son posicionados lado a lado, uno al lado del otro en la misma lnea a menos que ya no halla mas espacio horizontal para ubicarlos.

Esto significa que cada elemento HTML que representa una parte de la organizacin

1.2 Modelos de Caja

Para aprender cmo podemos crear nuestra propia organizacin de los elementos en pantalla, debemos primero entender cmo los navegadores procesan el cdigo HTML. Los navegadores consideran cada elemento HTML como una caja. Una pagina web es en realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son establecidas por estilos provistos por los navegadores o por los diseadores usando CSS.

CSS tiene un set predeterminado de propiedades destinados a sobre escribir los estilos provistos por navegadores y obtener la organizacin deseada. Estas propiedades no son especificas, tienen que ser combinadas para formar reglas que luego sern usadas para agrupar cajas y obtener la correcta disposicin de pantalla. La combinacin de estas reglas es normalmente llamada modelo o sistema de disposicin. Todas estas reglas aplicadas juntas constituyen lo que se llama modelo de caja.

Existe solo un modelo de caja que es considerado estndar estos das, y muchos otros que an se encuentran en estado experimental. El modelo vlido y ampliamente adoptado, en paginas web, es el llamado Modelo de caja tradicional, el cual ha sido usado desde la primera versin de CSS.

2. Conceptos bsicos sobre estilos 2.1 Estilos en lnea

Una de las tcnicas ms simples para incorporar estilos CSS a un documento HTML es la de asignar los estilos dentro de las etiquetas por medio del atributo style.

El siguiente cdigo muestra un documento HTML simple que contiene el elemento modificado por el atributo style con el valor font-size: 20px. Este estilo cambia el tamao por defecto del texto dentro del elemento a un nuevo tamao de 20 pixeles.

Usar la tcnica demostrada anteriormente es una buena manera de probar estilos y obtener una vista rpida de sus efectos, pero no es recomendable para aplicar estilos a todo el documento. La razn es simple: cuando usamos esta tcnica, debemos escribir y repetir cada estilo en cada uno de los elementos que queremos modificar, incrementando el tamao del documento a proporciones inaceptables y hacindolo imposible de mantener y actualizar.

Ejemplo estiloenlinea.html

2.2 Estilos embebidos

Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar referencias para afectar los elementos HTML correspondientes.

El elemento (en el siguiente cdigo) permite a los desarrolladores agrupar estilos CSS dentro del documento. En HTML5 los estilos por defecto son CSS, por lo tanto no necesitamos agregar ningn atributo en la etiqueta de apertura .

Ejemplo estiloembebido.html

2.3 Archivos Externos

Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al cdigo ms consistente y actualizable, pero nos requiere hacer una copia de cada grupo de estilos en todos los documentos de nuestro sitio web. La solucin es mover todos los estilos a un archivo externo y luego utilizar la etiqueta para insertar este archivo dentro de cada documento que los necesite.

Este mtodo nos permite cambiar los estilos por completo simplemente incluyendo un archivo diferente.

Ejemplo estilosenarchivo.html

Archivo CSS misestilos.css

Con la etiqueta se insertan los archivos CSS al documento HTML y sus atributos rel y href le decimos al navegador que cargue el archivo misestilos.css por que contiene todos los estilos necesitados para presentar el documento en pantalla. La etiqueta referenciando el archivo CSS, ser insertada en cada uno de los documentos que requieren estos estilos.

Existen varios mtodos para seleccionar cules elementos HTML sern afectados por la regla CSS:

Referenciando con palabra clave: Al declarar las reglas CSS utilizando la palabra clave del elemento, afectamos cada elemento de la misma clase en el documento.

p { font-size: 20}

span { font-size: 20}

Referenciado con el atributo id: El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo no puede ser duplicado. Este nombre debe ser nico en todo el documento. Para referenciar un elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarada con el smbolo # al frente del valor que usamos para identificar el elemento.

#texto1 { font-size: 20 px]

El ejemplo anterio ser aplicado al elemento HTML identificado con el atributo id=texto1. Ahora nuestro cdigo HTML lucir de esta manera:

Ejemplo estiloenarchivoatribid.html

Referenciado con el atributo class: La mayora del tiempo, en lugar de utilizar el atributo id para propsitos de estilos es mejor utilizar class. Este atributo es ms flexible y puede ser asignado a cada elemento HTML en el documento que comparte un diseo similar.

.texto1 {Font-size: 20px}

Para trabajar con el atributo class, debemos declarar la regla CSS con un punto antes del nombre. La ventaja de este mtodo es que insertar el atributo class con el valor texto1 ser suficiente para asignar estos estilos a cualquier elemento que queramos:

Ejemplo estiloenarchivoatribclass.html

Ejemplo misestilos.css modificado

La razn por la que debemos utilizar un punto delante del nombre de la regla es que es posible construir referencias ms complejas. Por ejemplo, se puede utilizar el mismo valor pra el atributo class en diferentes elementos pero asignar diferentes estilos para cada tipo:

P.texto1{ font-: 20}

En el cdigo anterior se creo una regla que referencia la clase llmada texto1 pero solo para los elemento de tipo .

3. Modelo de caja tradicional

El primer modelo de caja de la web, fueron las tablas. Las cajas eran creadas expandiendo las celdas y combinando filas de celdas, columnas de celdas y tablas enteras, unas sobre otras o incluso anidadas. Cuando los sitios webs crecieron y se volvieron ms y ms complejos esta prctica comenz a presentar serios problemas relacionados con el tamao y el mantenimiento del cdigo, necesarios para crearlos.

Estos problemas iniciales hicieron necesario lo que ahora vemos como una prctica natural: la divisin entre estructura y presentacin. Usando las etiquetas y estilos CSS fue posible reemplazar la funcin de tablas y efectivamente separar la estructura HTML de la presentacin. Con estos elementos podemos crear cajas en la pantalla, posicionar estas cajas a un lado o al otro y darles un tamao, color o borde especifico entre otras caractersticas.

3.1 Plantilla

El cdigo que a continuacin se presenta, recibir los estilos CSS paso a paso, ya sea mediante el atributo id o directamente por el tipo de etiqueta a usar. El estilo ser insertado mediante un archivo externo de estilos (.css) y vinculado a nuestra planilla por medio de la etiqueta .

Ejemplo plantilla1.css

3.2 Selector Universal

Normalmente, para la mayora de los elementos, necesitamos personalizar los mrgenes o simplemente mantenerlos al mnimo. Algunos elementos por defecto tienen mrgenes que son diferentes de cero y en la mayora de los casos demasiado amplios. A medida que avanzamos en la creacin de nuestro diseo encontraremos que la mayora de los elementos utilizados deben tener un margen de 0 pixeles. Para evitar el tener que repetir los estilos constantemente, podemos utilizar el selector universal.

La primera regla de nuestro archivo CSS (misestilos.css), nos asegura que todo elemento tendr un margen interno y externo de 0 pixeles. De ahora en adelante solo necesitaremos modificar los mrgenes de los elementos que queremos que sean mayores que cero.

El margen (margin) es en realidad el espacio alrededor del elemento, el que se encuentra por fuera del borde de esa caja (el estilo, padding), es el espacio alrededor del contenido del elemento pero dentro de sus bordes, como el espacio entre el ttulo y el borde de la caja virtual formada por el elemento que contiene ese ttulo.

3.3 Nueva jerarqua para cabeceras

En nuestra plantilla usamos elementos y para declarar ttulos y subttulos de diferentes secciones del documento. Los estilos por defecto de estos elementos se encuentran siempre muy lejos de lo que queremos y adems en HTML 5 podemos reconstruir la jerarqua H varias veces en cada seccin. El elemento , por ejemplo, ser usado varias veces en el documento, no solo para el ttulo principal de la pgina web como pasaba anteriormente sino tambin para secciones internas, por lo que tenemos que otorgarle los estilos apropiados:

La propiedad font, asignada a los elementos y en el cdigo anterior, permite declarar todos los estilos para el texto en una sola lnea. Las propiedades que pueden ser declaradas usando font son: font-style, font-varian, font-weight, font-size/line-height, y font-family en este orden. Con estas reglas estamos cambiando el grosor, tamao y tipo de letra del texto dentro de los elementos y a los valores que deseamos.

3.4 Nuevos elementos HTML5

Otra regla bsica que debemos declarar desde el comienzo es la definicin por defecto de elementos estructurales de HTML5. Algunos navegadores an no reconocen estos elementos o los tratan como elementos in line (en lnea). Necesitamos declarar los nuevos elementos HTML5 como elementos block para asegurarnos de que sern tratados como regularmente hace con elementos y de este modo construir nuestro modelo de caja:

A partir de ahora, los elementos afectados por la regla anterior sern posicionados una sobre otra a menos que especifiquemos algo diferente ms adelante.

3.5 Centrado del cuerpo

El primer modelo que es parte del modelo de caja es siempre . Normalmente, por diferentes razones de diseo, el contenido de este elemento debe ser posicionado horizontalmente. Siempre deberemos especificar el tamao del contenido, o un tamao mximo, para obtener un diseo consistente a travs de diferentes configuraciones de pantalla.

Por defecto, la etiqueta tiene un valor de ancho establecido en 100%. Esto significa que el cuerpo ocupar el ancho completo de la ventana del navegador. Por lo tanto, para centrar la pgina en la pantalla necesitamos centrar el contenido dentro del cuerpo. Con la regla anterior, todo lo que se encuentra dentro de ser centrado en la ventana, centrando de este modo tola la pagina web.

3.6 Caja principal

Siguiendo con el diseo de nuestra pagina, debemos especificar un tamao o tamao mximo para el contenido del cuerpo. Como seguramente recuerda agregamos el elemento a la plantilla para agrupar todas las cajas dentro del cuerpo. Este ser considerado la caja principal para la construccin de nuestro modelo de caja (este es el propsito por el que lo agregamos). De este modo, modificando el tamao de este elemento lo hacemos al mismo tiempo para todos los dems:

La regla anterior est referenciando por primera vez a un elemento a travs del valor de su atributo id. El carcter # le est diciendo al navegador que el elemento afectado por este conjunto de estilos tiene el atributo id con el valor agrupar.

Esta regla provee tres estilos para la caja principal. El primer estilo establece un valor fijo de 960 pixeles. Esta caja tendr siempre un ancho de 960 pixeles, lo que representa un valor comn para un sitio web estos das (los valore se encuentran entre 960 y 980 pixeles de ancho), sin embargo estos parmetros cambian constantemente.

La propiedad margin usada para este propsito puede tener 4 valores: superior, derecho, inferior, en ese orden. Esto significa que el primer valor declarado en el estilo representa el margen de la parte superior del elemento, el segundo es el margen de la derecha, y as sucesivamente. Sin embargo, si solo escribimos los primeros dos parmetros, el resto tomar los mismos valores.

La propiedad text-aling enva el texto a la izquierda con excepcin de

3.7 Cabecera

Siguiendo la etiqueta de apertura del principal se encuentra el primer elemento estructural de HTML5: . Este elemento contiene el ttulo principal de nuestra pagina web y estar ubicado en la parte superior de la pantalla. En nuestra plantilla, fue identificado con el atributo id y el valor cabecera.

Cada elemento block, as como el cuerpo, por defecto tienen un valor de ancho del 100%. Esto significa que el elemento ocupar todo el espacio horizontal disponible. En el caso del cuerpo, ese espacio es el ancho total de la pantalla visible, pero en el resto de los elementos el espacio mximo disponible estar determinado por el ancho de su elemento padre.

En el cdigo mostrado anteriormente, se le otorga a un fondo amarillo, un borde slido de 1 pixel y un margen interior de 20 pixeles usando la propiedad padding.

3.8 Barra de Navegacin

Siguiendo el elemento se encuentra el elemento , el cual tiene el propsito de proporcionar ayuda para la navegacin. Los enlaces agrupados dentro de este elemento representarn el men de nuestro sitio web. Este men ser una simple barra ubicada debajo de la cabecera.

es un elemento block por lo que ser ubicado debajo del elemento previo, su ancho por defecto ser 100% por lo que ser ubicado debajo del elemento previo, su ancho por defecto ser 100% por lo que ser ubicado debajo del elemento previo, su ancho por defecto ser 100% por lo que ser tan ancho como su padre (el principal), y tambin por defecto ser tal alto como su contenido y los mrgenes predeterminados.

En el cdigo anterior, la primera regla referencia al elemento por su atributo id, cambia su color de fondo y agrega mrgenes internos de 5px y 15px con la propiedad padding.

Dentro de la barra de navegacin hay una lista creada conlas etiquetas y . Por defecto los tems de una lista son posicionados unos sobre otros. Para cambiar este comportamiento y colocar cada opcin del men una al lado de la otra, referenciamos los elementos dentro de este elemento en particular usando el selector #menu li, y luego asugnamos a todos ellos el estilo display: inline-block para convertirlos en lo que se llama cajas inline.

3.9 section y aside

Los siguientes elementos estructurales en nuestro cdigo son dos cajas ordenadas horizontalmente. El Modelo de Caja Tradicional es construido sobre estilos CSS que nos permiten especificar la posicin de cada caja. Usando la propiedad float podemos posicionar estas cajas del lado izquierdo o derecho de acuerdo a nuestras necesidades. Los elementos que utilizamos en nuestra plantilla HTML para crear estas cajas son y , cada uno identificado con el atributo id y los valores seccin y columna respectivamente.

La propiedad de CSS float es una de las propiedades ms ampliamente utilizadas para aplicar el Modelo de Caja Tradicional. Hace que el elemento flote hacia un lado o al otro en el espacio disponible. Los elementos afectados por float actan como elementos block.

La propiedad float mueve la caja al espacio disponible del lado especificado por su valor, width asigna un tamao horizontal y margin, por supuesto, declara el margen del elemento.

Afectado por estos valores, el contenido del elemento estar situado a la izquierda de la pantalla con un tamao de 660 pixeles, ms 40 pixeles de margen, ocupando un espacio total de 700 pixeles de ancho.

La propiedad float del elemento tambin tiene el valor left. Esto significa que la caja generada ser movida la espacio disponible a su izquierda.

3.10 Footer

Para finalizar la aplicacin del Modelo de Caja Tradicional, otra propiedad CSS tiene que ser aplicada al elemento . Esta propiedad devuelve al documento su flujo normal y nos permite posicionar debajo del ultimo elemento en lugar de a su lado.

El cdigo anterior declara un borde de 2 pixeles en la parte superior de , un margen interno (padding) de 20 pixeles, y centra el texto dentro del elemento. A si mismo, restaura el normal flujo del documento con la propiedad clear. Esta propiedad simplemente restaura las condiciones normales del rea ocupada por el elemento, no permitindoles posicionarse adyacente a una caja flotante.

La propiedad clear tambin empuja los elementos verticalmente, haciendo que las cajas flotantes ocupen un rea real en la pantalla.

La primera regla del cdigo anterior referencia a todos los elementos y les otorga algunos estilos bsicos. Cada elemento cuenta tambin con un elemento que muestra el nmero de comentarios recibidos. Para referenciar un elemento dentro de un elemento , usamos el selector article footer que significa cada dentro de un ser afectado por los siguientes estilos. Esta tcnica de referencia fue aplicada aqu para alinear a la derecha el texto dentro de los elementos.

Al final del cdigo se cambia el color de cada elemento y diferenciamos la descripcin de la imagen (insertada con el elemento ) del resto del texto usando un tipo de letra diferente.

4. Propiedades de CSS3

CSS fue siempre sobre estilo, pero ya no ms. En un intento por reducir el uso de cdigo Javascript y para estandarizar funciones populares, CSS3 no solo cubre diseo y estilos web sino tambin forma y movimiento. La especificacin de CSS3 es presentada en mdulos que permiten a la tecnologa proveer una especificacin estndar por cada aspecto involucrado en la presentacin visual del documento. Desde esquinas redondeadas y sombras, hasta transformaciones y reposicionamiento de los elementos ya presentados en pantalla. Este nivel de cambio convierte a CSS3 en una tecnologa prcticamente indita comparada con versiones anteriores.

4.1 Plantilla

Las nuevas propiedades CSS3 son extremadamente poderosas y deben ser estudiadas una por una, pero para facilitar su aprendizaje vamos a aplicar todas ellas sobre la misma plantilla. Por este motivo comenzaremos por crear un documento HTML sencillo (plantilla.html) con algunos estilos bsicos.

Debido a que se encuentra en desuso en HTML5, los elementos usados para mostrar texto son normalmente para lneas cortas y para prrafos, entre otros. Por esta razn el texto en nuestra plantilla fue insertado usando las etiquetas .

Los siguientes son estilos bsicos requeridos (nuevocss3.css) por nuestro documento HTML:

4.2 Border-radius

Anteriormente hacer esquinas redondeadas era algo muy complejo, pero ahora con HTML5 y CSS3 es muy sencillo. Esta es la rozn por la que, entre todas las nuevas posibilidades e increbles propiedades incorporadas en CSS3, la que exploraremos en primera instancia es border-radius.

Las propiedades border-radius en este momento es experimental por lo que debemos usar los prefijos -moz- y -webkit- para que funcionen en navegadores basados en motores Gecko y Webkit, como Firefox, Safari y Google Chrome. Si todas las esquinas tienen la misma curvatura podemos utilizar un solo valor. Sin embargo, como ocurre con las propiedades margin y padding, podemos tambin declarar un valor diferente para cada una:

-moz-border-radius: 20px 10px 30px 50px; -webkit-border-radius: 20px 10px 30px 50px; border-radius: 20px 10px 30px 50px;

En el cdigo anterior, los cuatro valores asignados a la propiedad border-radius representan diferentes ubicaciones. Recorriendo la caja en direccin de las agujas del reloj, iniciando en la esquina superior izquierda.

Al igual que con margin o padding, border-radius puede tambin trabajar solo con dos valores. El primer valor ser asignado a la primera y tercera esquina (superior izquierda, inferior derecha), y el segundo valor a la segunda y cuarta esquina (superior derecha, inferior izquierda).

Tambin podemos dar forma a las esquinas declarando un segundo grupo de valores separados por una barra. Los valores de la izquierda de la barra representarn el radio horizontal, mientras que los valores a la derecha representan el radio vertical. La combinacin de estos valores genera una elipsis.

4.3 Box-shadow

Por aos diseadores han combinado imgenes, elementos y algunas propiedades CSS para generar sombras. Gracias a CSS3 y a la nueva propiedad box-shadow podremos aplicar sombras a nuestras cajas con solo una simples lneas de cdigo.

La propiedad box-shadow necesita al menos tres valores. El primero, que puede ver en el cdigo anterior es el color. Este valor fue construido aqu utilizando la funcin rgb() y nmeros decimales, pero podemos escribirlo en nmeros hexadecimales tambin.

Los siguientes dos valores, expresados en pixeles, establecen el desplazamiento de la sombra. Este desplazamiento puede ser positivo o negativo. Los valores indican, respectivamente, la distancia horizontal y vertical desde la sombra al elemento. Valores negativos posicionarn la sobra a la izquierda y arriba del elemento, mientras que los valores positivos crearn la sobra a la derecha y debajo del elemento. Valores de 0 o nulos posicionaran la sombra exactamente detrs del elemento, permitiendo la posibilidad de crear un efecto difuminado a todo su alrededor.

Existen algunos parmetros ms y cambios que podemos implementar para mejorar la apariencia de la sombra.

Un cuarto valor que se puede agregar a la propiedad ya estudiada, es la distancia de difuminacin. Con este efecto ahora la sombra lucir real.

Agregando otro valor ms en pixeles al final de la propiedad desparramar la sombra.

El ultimo valor posible para box-shadow no es un numero sino ms bien una palabra clave: inset. Esta palabra convierte a la sombra externa en una sombra interna.

box-shadow: rgb(150,150,150) 5px 5px 10px;

box-shadow: rgb(150,150,150) 5px 5px 10px 10px;

box-shadow: rgb(150,150,150) 5px 5px 10px 10px inset;

4.4 Text-shadow

La propiedad box-shadow fue diseada especialmente para ser aplicada en cajas. Si intenta aplicar este efecto a un elemento , por ejemplo, la caja invisible ocupada por este elemento en la pantalla, tendr una sombra, pero no el contenido del elemento.

Para crear sombras para figuras irregulares como texto, existe una propiedad espacial llamada text-shadow.

Los valores para text-shadow son similares a los usados para box-shadow. Podemos declarar el color de la sombra, la distancia horizontal y vertical de la sombra con respecto al objeto y el radio de difuminacin.

4.5 @font-face

La propiedad @font-face permite a los diseadores proveer un archivo conteniendo una fuente especifica para mostrar sus textos en la pgina. Ahora podemos incluir cualquier fuente que necesitamos con solo proveer el archivo adecuado.

http://www.minkbooks.com/es/links.php

http://www.moorstation.org/typoasis/designers/steffmann/

La propiedad @font-face necesita al menos dos estilos para declarar la fuente y cargar el archivo. El estilo construido con la propiedad font-family especifica el nombre que queremos otorgar a esta fuente en particular, y la propiedad src indica la URL del archivo con el cdigo correspondiente a esa fuente. En el cdigo anterior, se especifico que el ttulo ser mostrado con la nueva fuente o las alternativas verdana y sans-serif en caso de que la fuente incorporada no sea cargada apropiadamente.

4.6 Gradiente Lineal

Los gradientes son uno de los efectos ms atractivos entre aquellos incorporados en CSS3. Una propiedad background con algunos pocos parmetros es suficiente para convertir su documento en una pagina web con aspecto profesional:

Los gradientes son configurados como fondos, por lo que podemos usar laspropiedades background o background-image para declararlos. La sintaxis para los valores declarados en estas propiedades es linear-gradient (posicin de inicio, color inicial, color final). El primer valor puede ser especificado en pixeles, porcentaje o usando las palabras clave top, bottom, left y right.

El punto de comienzo puede ser reemplazado por un ngulo para declarar una direccin especfica del gradiente.

background -webkit- linear-gradient(30deg, #FFFFFF, #006699);

background:-moz- linear-gradient(30deg, #FFFFFF, #006699);

Los gradientes son configurados como fondos, por lo que podemos usar las propiedades background o background-image para declararlos. La sintaxis para los valores declarados en estas propiedades es linear-gradient (posicin de inicio, color inicial, color final). El primer valor puede ser especificado en pixeles, porcentaje o usando las palabras clave top, bottom, left y right.

El punto de comienzo puede ser reemplazado por un ngulo para declarar una direccin especfica del gradiente.

background: -webkit- linear-gradient(30deg, #FFFFFF, #006699);

Tambin podemos declarar los puntos de terminacin para cada color:

background: -webkit- linear-gradient(top, #FFFFFF 50%, #006699 90%);

4.7 Gradiente Radial

La sintaxis estndar para los gradientes radiales solo difieren en unos pocos aspectos con respecto al anterior. Debemos usar la funcin radial-gradient() y un nuevo atributo para la forma:

background: -webkit- radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);

background: -moz-radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);

La posicin de comienzo es el origen y puede ser declarada en pixeles, porcentaje o una combinacin de las palabras claves center, top, bottom, left y right. Existen dos posibles valores para la forma (circle y ellipse) y la terminacin para el color indica el color y la posicin donde las transiciones comienzan.

4.8 RGBA

CSS3 ha agregado una nueva funcin llamada rgba() que simplifica la asignacin de colores y transparentes.

La funcin rgba() tiene cuatro atributos. Los primeros 3 simplemente declaran los valores para colores rojo, verde y azul en nmeros decimales del 0 al 255. El ultimo valor corresponde a una nueva capacidad de opacidad. Este valor se debe encontrar dentro de un rango que va de 0 a 1, con 0 como totalmente transparente y 1 como totalmente opaco.

4.9 HSLA

La funcin hsla() es simplemente una funcin diferente para generar colores, pero es ms intuitiva que rgba(). Algunos diseadores encontraran ms fcil generar un set de colores personalizado utilizando hsla(). La sintaxis de la funcin es: hsla (tono, saturacin, luminosidad, opacidad).

El tono representa el color extrado de una rueda imaginaria y es expresado en grados desde 0 a 360. Cerca de 0 y 360 estn los colores rojos, cerca de 120 los verdes y cerca de 240 los azules. El valor de la saturacin es representado en porcentaje, desde 0% (escala de grises) a 100% (todo color o completamente saturado). La luminosidad es tambin un valor en porcentaje desde 0% (completamente oscuro) a 100% (completamente iluminado). El ultimo valor, as como rgba(), representa la opacidad.

4.10 Outline Esta propiedad era usada para crear un segundo

borde, y ahora ese borde puede ser mostrado alejado del borde real del elemento.

4.11 Border-image

La nueva propiedad border-image fue incorporada para superar estas limitaciones y dejar en manos del diseador la calidad y variedad de bordes disponibles ofreciendo la alternativa de utilizar imgenes propias.

Para hacer esto, necesitamos especificar tres atributos: el nombre del archivo de la imagen, el tamaos de las piezas que queremos obtener del patrn y algunas palaras clave para declarar cmo las piezas sern distribuidas alrededor del objeto.

El valor 29 declara el tamao de las piezas y stretch es uno de los mtodos disponibles para distribuir estas piezas alrededor de la caja. Existen tres valores; la palabra clave repeat repetir las piezas tomadas de la imagen todas las veces que sea necesario para cubrir el lado del elemento. La palabra clave round considerar qu tan largo es el lado a ser cubierto y ajustar el tamao de las piezas para asegurarse que cubren todo el lado y ninguna pieza es cortada y finalmente stretch estira solo una pieza para cubrir el lado completo.

4.12 Transform y transition

Los elementos HTML, cuando son creados, son bloques solidos e inamovibles. Pueden ser movidos usando cdigo Javascript o aprovechando libreras populares como jQuery, pero no exista un procedimiento estndar para este propsito hasta que CSS3 present las propiedades transform y transition.

La propiedad transform puede operar cuatro transformaciones bsicas en un elemento: scale (escalar), rotate (rotar), skew (inclinar) y traslate (trasladar o mover).

4.12.1 Transform: scale

La funcin scale recibe dos parmetros: el valor x para escala horizontal y el valor y para escala vertical. Si solo un valor es provisto el mismo valor es aplicado a ambos parmetros.

Nmeros enteros y decimales pueden ser declarados para la escala. Los valores entre 0 y 1 reducirn el elemento, un valor de 1 mantendr las proporciones originales y valores mayores que 1 aumentarn las dimensiones del elemento de manera incremental.

En el cdigo anterior, el primer valor , 1, mantiene la proporcin original para la dimensin horizontal de la caja. El segundo valor tambin mantiene la proporcin original, pero invierte el elemento verticalmente para producir el efecto de espejo.

4.12.2 Transform: rotate La funcin rotate rota el elemento en la direccin de

las agujas del reloj. El valor debe ser especificado en grados usando la unidad deg:

Si un valor negativo es declarado, solo cambiar la direccin en la cual el elemento es rotado.

4.12.3 Transform: skew Esta funcin cambia la simetra del elemento en grados

y en ambas dimensiones.

La funcin skew usa dos para metros, pero a diferencia de otras funciones, cada parmetro de esta funcin solo afecta una dimensin (los parmetros actan de forma independiente).

En el cdigo anterior se realiz la operacin transform a la caja de la cabecera para inclinarla. Solo se declar el primer parmetro, por lo que solo la dimensin horizontal de la caja ser modificada. Si se usar los dos parmetros, podramos alterar ambas dimensiones del objeto. Como alternativa podemos utilizar funciones diferentes para cada una de ellas: skewX y skewY.

4.12.4 Transform: translate

Similar a las viejas propiedades top y left, la funcin translate mueve o desplaza el elemento en la pantalla a una nueva posicin.

Los valores negativos movern al objeto hacia la izquierda y viceversa. Si queremos mover el elemento horizontal y verticalmente, podemos usar funciones independientes llamadas translateX y translateY

4.12.5: Transformaciones dinmicas

Se puede aprovechar la combinacin de transformaciones y pseudo clases para convertir nuestra pgina en una aplicacin dinmica.

En el cdigo anterior la caja de la cabecera queda intacta, pero una nueva regla fue agregada para aplicar efectos de transformacin usando la psuedoclase: hover. El resultado obtenido es que cada vez que el puntero del ratn pasa sobre esta caja, la propiedad transform rota la caja 5 grados, y cuando el puntero se aleja la caja vuel a su posicin normal.

4.12.6 Transiciones La propiedad transicin fue incluida para suavizar los

cambios.

La propiedad puede tomar hasta cuatro parmetros. El primer valor es la propiedad que ser considerada para hacer la transicin (en nuestro ejemplo elegimos transform). El segundo parmetro especifica el tiempo que la transicin se tomar para ir de la posicin inicial a la final. El tercer parmetro puede ser cualquiera de las siguientes palabras clave: ease, linear, ease-in-out. Estas palabras clave determinan cmo se realizar el proceso de transicin. El ltimo parmetro para la propiedad transition es el retardo en segundos o el tiempo en que tarda en iniciar.

UNIDAD 3CSS31. Estilos y estructura1.1 Elementos BlockNmero de diapositiva 41.2 Modelos de Caja Nmero de diapositiva 62. Conceptos bsicos sobre estilos2.1 Estilos en lneaNmero de diapositiva 8Ejemplo estiloenlinea.html2.2 Estilos embebidosEjemplo estiloembebido.html2.3 Archivos ExternosEjemplo estilosenarchivo.htmlArchivo CSS misestilos.cssNmero de diapositiva 15Nmero de diapositiva 16Ejemplo estiloenarchivoatribid.htmlNmero de diapositiva 18Ejemplo estiloenarchivoatribclass.htmlEjemplo misestilos.css modificadoNmero de diapositiva 213. Modelo de caja tradicional3.1 PlantillaEjemplo plantilla1.cssNmero de diapositiva 25Nmero de diapositiva 263.2 Selector UniversalNmero de diapositiva 283.3 Nueva jerarqua para cabecerasNmero de diapositiva 303.4 Nuevos elementos HTML5Nmero de diapositiva 323.5 Centrado del cuerpoNmero de diapositiva 343.6 Caja principalNmero de diapositiva 36Nmero de diapositiva 373.7 CabeceraNmero de diapositiva 393.8 Barra de NavegacinNmero de diapositiva 41Nmero de diapositiva 423.9 section y asideNmero de diapositiva 44Nmero de diapositiva 453.10 FooterNmero de diapositiva 47Nmero de diapositiva 48Nmero de diapositiva 49Nmero de diapositiva 504. Propiedades de CSS34.1 PlantillaNmero de diapositiva 53Nmero de diapositiva 544.2 Border-radiusNmero de diapositiva 56Nmero de diapositiva 57Nmero de diapositiva 58Nmero de diapositiva 594.3 Box-shadowNmero de diapositiva 61Nmero de diapositiva 62Nmero de diapositiva 634.4 Text-shadowNmero de diapositiva 654.5 @font-faceNmero de diapositiva 67Nmero de diapositiva 684.6 Gradiente LinealNmero de diapositiva 70Nmero de diapositiva 71Nmero de diapositiva 724.7 Gradiente RadialNmero de diapositiva 744.8 RGBA4.9 HSLANmero de diapositiva 774.10 Outline4.11 Border-imageNmero de diapositiva 804.12 Transform y transition4.12.1 Transform: scaleNmero de diapositiva 834.12.2 Transform: rotate4.12.3 Transform: skewNmero de diapositiva 864.12.4 Transform: translate4.12.5: Transformaciones dinmicasNmero de diapositiva 894.12.6 TransicionesNmero de diapositiva 91