css3

1.  ¿Qué es CSS?

•  CSS es un lenguaje que trabaja junto con HTML para proporcionar propiedades visuales a los elementos del documento HTML, como tamaño, color, fondo, bordes, etc. Es el responsable del diseño y presentación del documento. HTML5 incorpora la versión 3 de CSS, CSS3, que es la que estudiaremos en esta presentación.

•  Como ya he comentado, la gran mayoría de navegadores interpretan por defecto los elementos alojados en el documento HTML como “elementos block”, es decir, los apila uno debajo de otro (Modelo de Caja Tradicional). Los elementos de un documento HTML también pueden definirse como “elementos inline” y son adosados por el navegador uno al lado del otro en la misma horizontal hasta que no hay más espacio.

•  Aunque existen varias técnicas para dar estilo al documento HTML, actualmente los estilos provistos por los

diseñadores son archivos externos al documento HTML. Un archivo de estilos se puede generar con un editor de texto y guardándolo con la extensión .css

CSS3 Francesc Pérez Fdez

2. Métodos de referencia

•  Los métodos de referencia detallan los procedimientos existentes para referenciar las propiedades de un elemento HTML5 en la hoja de estilos. Existen varios métodos: Ø  Palabra clave (etiqueta): es muy poco selectivo, afecta a todas las etiquetas <p> del documento.

Ø  Atributo id: se suele utilizar para dar estilo a elementos estructurales. Utilizado para definir el estilo de un único elemento, es más selectivo que el anterior método. En el ejemplo sólo la etiqueta <p> con atributo id igual a texto1 se verá sujeto a las reglas de estilo definidas en el archivo .css


Micodigo.html

Misestilos.css

Micodigo.html

Misestilos.css


Ø  Atributo class: se suele utilizar para dar estilo a elementos estructurales. Utilizado para definir el estilo de un grupo de elementos.


Micodigo.html

Misestilos.css

Misestilos.css

Micodigo.html


Ø  Con cualquier atributo: permite referenciar un elemento que contenga un atributo determinado. Se pueden utilizar selectores (^, *, $,) para ser más preciso en la referencia. Nuevo en la versión CSS3.

palabraclave[atributo] { estilo }

Ø  Con pseudo clases: permite referenciar elementos sin necesidad de conocer sus atributos. Nuevo en CSS3.


Micodigo.html

Misestilos.css Misestilos.css

Misestilos.css

Micodigo.html

3. Modelo de Caja Tradicional

•  Todo elemento estructural es considerado por el navegador como una caja y la estructura completa es representada como un conjunto de cajas agrupadas (<div>) que recibe el nombre de Modelo de Caja Tradicional (MCT). Con CSS podemos posicionar estas cajas, modificar su tamaño, color o borde entre otras características. MCT es un estándar de diseño web.

•  Aplicando el MCT a la plantilla configurada en el primer capítulo (1Plantilla.html): archivo externo “estilo.css”, la web queda así:

•  Algunas propiedades CSS son experimentales y necesitan ir acompañadas de un prefijo para especificar qué navegador debe aplicarla. Está relacionado con el motor con el que se renderiza el navegador.


Extensión Motor Navegador

-ms- Trident IE

-moz- Mozilla Firefox

-webkit- WebKit Safari, Chrome

-o- Presto Opera

4. Nuevas propiedades CSS3

•  CSS3 no sólo cubre el diseño y estilos web sino también forma y movimiento. Estas últimas características anteriormente se hacían con código Javascript. Este nivel de cambio convierte a CSS3 en una tecnología prácticamente inédita comparada con versiones anteriores.

•  Estudiaremos algunas de las nuevas propiedades de CSS3 más utilizadas sobre el mismo documento HTML5 y la misma hoja de estilo CSS3:


Observe que en la cabecera del documento se referencia el archivo externo de estilos “nuevocss3.css”.

micodigo.html

nuevocss3.css


•  Bordes de la caja: Ø  border-radius: produce el efecto de esquinas redondeadas sobre cada una de las cuatro esquinas de la

caja: esquina superior izquierda, esquina superior derecha, esquina inferior derecha y esquina inferior izquierda.

Ø  box-shadow: produce el efecto sombra sobre la caja del elemento. El color de la sombra se consigue con la función rgb() y el desplazamiento en el eje de las abscisas y ordenadas respecto a la posición inicial (0,0), que es la esquina superior izquierda, con el resto de parámetros introducidos.


nuevocss3.css: #principal

5 px 5 px


El cuarto y quinto parámetro especifican la distancia o degradado del difuminado y cambiar la sombra externa por una interna “inset”.


•  Bordes de la caja: Ø  border-image: crea un borde con una imagen personalizada. Necesita tres parámetros de entrada como

son el nombre del archivo de la imagen, el tamaño de las piezas que queremos obtener del patrón y declarar cómo será distribuido el patrón alrededor del objeto. Necesita que el borde sea declarado previamente con las propiedades border o border-width. En el ejemplo, definimos un borde de 29px para la caja de la cabecera y luego cargamos la imagen para construir el borde. El valor 29 en la propiedad border-image declara el tamaño de las piezas y strech es uno de los métodos disponibles para distribuir estas piezas alrededor de las cajas. También podríamos definir el tamaño del borde con la propiedad boder-width.

Ø  outline: propiedad usada para mostrar un segundo borde de la caja alejado del borde principal. Esta propiedad fue mejorada con la incorporación de otra propiedad llamada outline-offset


nuevocss3.css: #principal Imagen original (87x87)



•  Texto de la caja:

Ø  text-shadow: produce el efecto de sombra sobre el texto del elemento. Las sombras no expanden el tamaño de la caja del elemento. Los valores de los parámetros tienen el mismo significado que en la propiedad box-shadow.

Ø  @font-face: los navegadores web de los usuarios tienen por lo general un número limitado de tipos de letras. Esta propiedad permite proveer un archivo conteniendo una fuente específica (*.ttf). El archivo conteniendo la fuente debe encontrarse en el mismo carpeta que el archivo *.html.

Ø  color: la función rgba y hsla son como la rgb y hsl respectivamente pero con un último parámetro que determina la opacidad del elemento. La función rgba necesita cuatro parámetros rojo, verde, azul y opacidad; mientras que la función hsla necesita tono, saturación, luminosidad y opacidad.


nuevocss3.css: #titulo

nuevocss3.css: #titulo, @font-face

nuevocss3.css: #titulo


•  Background de la caja:

Ø  linear-gradient: la función contiene tres atributos (posición comienzo, color inicial y final). La posición puede estar declarada en píxeles, grados o usando palabras clave como top, bottom, left, right.

Ø  radial-gradient: la función contiene cuatro atributos (posición comienzo, forma, color inicial y final). La forma puede ser circular o elíptica.





•  Transformaciones:

Ø  rotate: el elemento rota en el sentido de las agujas del reloj.

Ø  Escalado: aumenta el tamaño de la escala en el eje especificado.

Ø  translate: esta función considera la pantalla como una grilla de píxeles, con la posición original del elemento usada como un punto de referencia. La esquina superior izquierda es la posición (0,0).

Ø  skew: cambia la simetría del elemento en grados y en ambas dimensiones.



Todos los elementos de la cabecera doblan su tamaño. nuevocss3.css: #principal




•  Transiciones:

Ø  Con actividad de usuario: pseudoclase :hover:


Cuando posicionamos el ratón sobre la cabecera, esta se inclina instantáneamente.

nuevocss3.css

Cuando posicionamos el ratón sobre la cabecera, ésta empieza a inclinarse después de medio segundo progresivamente y lo hace durante un segundo

Education

css3