Manual CSS3

1º DAW - IES Julio Verne


IES Julio Verne Fundamentos básicos del CSS3 Jose Manuel Guisado Hormigo

Jose Manuel Guisado Hormigo

1


1. ¿Qué hay de nuevo en CSS3? ................................. 3 2. Atributo gradiente de colores en borde en firefox ....... 4 3. Bordes redondeados ........................................... 6 4. Múltiples imágenes de fondo................................. 7 5. Colores RGBA ................................................... 8 6. Ruptura de palabras (Word-wrap)........................... 9 7. Textos multicolumna ......................................... 10 8. Sombras (box-shadow) ....................................... 11 9. Resplandor interior ........................................... 13 10. Propiedad background origin ............................... 14 11. Atributos overflow-x y overflow-y ......................... 15 12. Introducción a @font-face................................... @fon t-face................................... 16 13. Sombras en texto (text-shadow) ........................... 17 14. Animaciones ................................................... 18 14.1. Introducción a las animaciones ......................... 18 14.2. Conceptos básicos para las animaciones .............. 18 14.3. Desplazamiento de un elemento ....................... 19 14.4. Transformación de un elemento ....................... 20 15. Selectores ...................................................... 22 16. Documentación ............................................... ........ ....................................... 24


2


1. ¿Qué hay de nuevo en CSS3? Introducción CSS3 es la tercera versión y la más actual de las hojas de estilo. Es una modificación de la versión anterior CSS2.1, así que sería conveniente que la persona que quiera seguir este manual conozca previamente la versión 2 de CSS. Más control sobre la forma El principal objetivo de CSS es separa el contenido del formato y ya se consiguió en la versiones anteriores a CSS3, pero en el mundo de la web avanza, las nuevas tendencias con ella y la necesidad de recursos lleva a los diseñadores a ingeniárselas de otras formas. CSS3 ha intentado dar solución a muchos de esos detalles que algunas veces se volvían tan complejos como poner los bordes redondeados a una caja y una simple sombra. Nuevas propiedades En la siguiente tabla se muestra un resumen de las nuevas propiedades que existen en CSS3 y que más adelante veremos en profundidad. Bordes Border-color Border-image Border-radius Box-shadow

Interfaz Box-sizing Resize Outline Nav-top Nav-right Nav-left Nav-bottom

Fondos Background-origin Background-clip Background-size Múltiples imágenes

Selectores Cambio de sintaxis. Not() ::selection


Color Color HSL Color HSLA Color RGBA Opacidad

Cajas Overflow-x Overflow-y

Texto Text-shadow Text-overflow Ruptura de palabras

Otros Media queries Múltiples columnas Web Fonts

3


2. Atributo gradiente de colores en borde en firefox El atributo de gradiente de colores es un atributo que por desgracia tan solo se puede ver en el navegador firefox, pero lo incluyo porque me parece un atributo muy interesante y con unos resultados muy buenos. Esta propiedad no aparece en el nuevo estándar de la W3C, por lo tanto no se puede considerar una propiedad de CSS3, sino un atributo de CSS3 creado por mozilla. En la web de Mozilla podemos encontrar más información a cerca de este atributo. Los atributos de gradiente de colores en borde son: -moz-border-top-colors -moz-border-right-colors -moz-border-bottom-colors -moz-border-left-colors

En cada uno de los atributos se define un color, pudiendo especificar una lista de colores separado por espacios que se aplicará a cada una de las partes del borde de dentro a fuera. Para definir más de un color, el borde tiene que tener un grosor en píxeles como mínimo equivalente al número de colores, es decir, si quieres dos colores tendremos un borde de dos píxeles, si queremos 3, de tres píxeles y así sucesivamente. Lo mejor será ver un ejemplo para saber cómo funciona y cuál es el resultado. Ejemplo #caja1{ width: 300px; height: 200px; border-style: solid; border-width: 10px; -moz-border-top-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-right-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-bottom-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-left-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411#ff3300; }


4

1º DAW - IES Julio Verne Resultado

Tendremos que tener en cuenta que el ejemplo solo se verá correctamente en Firefox y tendremos que incluir –moz- delante de los atributos para especificar el navegador.


5


3. Bordes redondeados En CSS3 tenemos la propiedad border-radius, que nos permite definir bordes redondeados en las esquinas especificando las medidas del radio que se deben dar a la curva de las esquinas. Su uso más básico sería: border-radius: 5px;

Con lo que le daríamos 5 píxeles de radio a la curva de todas las esquinas del elemento en cuestión. Con este atributo nos ahorramos los enrevesados recursos que teníamos que usar en CSS2 para poner bordes redondeados a las cajas usando imágenes y que en la mayoría de los casos no daba un resultado del todo elegante. El atributo border-radius tiene la posibilidad también de definir las cuatro esquinas de la caja con valores distintos para el radio. Los valores irán separados por un espacio y el primer valor será el de la esquina superior izquierda de la caja, rotando en sentido horario. border-radius: 5px 7px 50px 15px;

Ejemplo #caja1{ width: 300px; height: 200px; border-style: solid; border-width: 10px; border-radius: 5px 70px 20px 60px; background: #A775A3; }

Resultado


6


4. Múltiples imágenes de fondo En las anteriores versiones de CSS conseguíamos poner varias imágenes de fondo anidando varias cajas y poniendo una imagen distinta de fondo a cada una de ellas. Con CSS3 han solventado ese problema modificando la etiqueta background y dándole la posibilidad de añadir varias imágenes y posicionarlas en distintos lugares de la caja Las distintas imágenes de fondo se tienen que escribir separadas por comas. Las imágenes van colocadas de modo que la primera aparece sobre las siguientes. A las imágenes colocadas en de fondo se le pueden añadir los atributos ya conocidos de las versiones anteriores de CSS tales como posición (center, bottom, top, left y right), como los de repetición.

Ejemplo #caja1{ width: 500px; height: 500px; border-style: solid; border-width: 10px; background: url(css3.png) center no-repeat, url(html5.png) bottom right no-repeat, url(jquery.png) top left no-repeat; }

Resultado


7


5. Colores RGBA Como conocemos, tanto en HTML como en las versiones anteriores de CSS los colores se expresan en valores RGB. CSS3, además de los tres colores primarios Rojo, Verde y Azul, ha añadido cuarto parámetro que es el Canal Álfa para darle transparencia al elemento coloreado. El canal Alfa es un valor entre 0 y 1, siendo 0 totalmente transparente y 1 totalmente opaco. Los números decimales se separarán con un punto. Con esto conseguimos lo que antes teníamos que hacer recurriendo a imágenes PNG con transparencia. Para definir RGBA debemos especificar cuatro valores de la siguiente manera: rgba(250, 125, 0, 0.5);

Los tres primero número son los valores en sistema decimal de los colores Rojo, Verde y Azul. El cuarto valor le asigna una opacidad al elemento del 50%. Ejemplo #caja2{ width: 200px; height: 250px; position: relative; top: 100px; left: 100px; border-style: solid; border-width: 10px; border-color: RGBA(255, 200, 0, 0.8); background-color: RGBA(0, 250, 52, 0.5); }

Resultado

Se le puede aplicar color RGBA a todo lo que se pueda colorear con CSS3, así que puede ser un muy buen recurso para sombras, texto, etc.


8


6. Ruptura de palabras (Word-Wrap) Hasta ahora, si nos encontrábamos con el caso de que una palabra era demasiado grande y sobresalía de la caja o la caja modificaba su tamaño para adaptarse a dicha palabra, lo teníamos que solucionar a mano y de forma muy cutre añadiendo nosotros mismo un guión y un salto de línea. El atributo word-wrap nos permite hacer esto de forma automática Este atributo tiene dos posibles valores: normal o break-word word-wrap: normal;

El valor normal hace que las palabras no se corten siendo este el valor por defecto word-wrap: break-word;

El valor break-word hace que la palabra se corte para que quepa en el ancho del contenedor que hayamos definido Ejemplo #caja1{ width: 100px; height: 200px; border-style: solid; border-width: 1px; background: #CCC; word-wrap: break-word; }

Resultado


9


7. Texto multicolumna En algunos medios encontramos el texto dividido en columnas para facilitar su lectura, muy especialmente en periódicos. La nueva versión de CSS también incorpora esta opción. Para crear esta estructura multicolumna utilizaremos varios atributos.    

Column-width: Para definir el ancho de las distintas columnas. Column-gap: Nos permitirá definir el espacio en blanco entre columnas. Column-rule: Servirá para crear una línea divisoria entre columnas. Column-count: Será el número de columnas que queremos.

Estas etiquetas, a día de hoy (mayo de 2012), no la soporta tal cual ningún navegador, aunque aparecen en la especificación de la W3C. Sin embargo Safari, Google Chrome y Firefox ya la implementa con la condición de que usemos el prefijo –webkit- para Chome y Safari o el prefijo –moz- para Firefox. Así que si queremos poner un texto en columnas, de momento lo tendremos que hacer como veremos en el ejemplo y teniendo en cuenta en los usuarios de Internet Explorer no podrán verlo igual. Ejemplo #caja1 .texto{ -webkit-column-count: 4; -webkit-column-width: 10em; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #888; -moz-column-count: 4; -moz-column-width: 10em; -moz-column-gap: 20px; -moz-column-rule: 1px solid #888; text-align: justify; }

Resultado

Para más información: http://www.w3.org/TR/css3-multicol/


10


8. Sombras (box-shadow) Hasta ahora, para conseguir poner una sombra a un elemento web teníamos que recurrir a elementos externos tales como imágenes, javascript, etc. Con el atributo box-shadow, además de facilitarnos la taréa de poner sombra a los elementos, agiliza la carga de nuestras webs, ya que no tenemos que recurrir a imágenes que tardan más en cargar. El atributo box-shadow necesita que le especifiquemos algunos valores separados por espacios tales como el difuminado, separación de la sombra o color (pudiendo usar un color RGBA). box-shadow: 5px -9px 3px #555;

Por orden de aparición, los valores especificados son: Desplazamiento horizontal: En el ejemplo anterior, la sombra se colocará 5px a la derecha del elemento, simulando que la luz le viene desde la izquierda. Si queremos colocar la sombra a la izquierda usaremos valores negativos. Cuanto más alejada esté la sombra del elemento, más lejos parecerá que está el elemento del lienzo de la página. Desplazamiento vertical: Este valor es similar al desplazamiento horizontal. Los valores positivos indicarán que la sombra se sitúa por debajo del elemento y los negativos, por encima. En el caso anterior, la sombra estará 9px por encima del elemento. Difuminado: El tercer valor indica cuanto queremos que esté de difuminado el borde de la sombra. Si el valor fuera 0, la sombra aparecería totalmente definida. En el ejemplo anterior, la sombra tendrá 3px de difuminado. Color de la sombra: El último atributo que se indica es el color. Generalmente en el mundo real, las sombras tiene un color grisáceo o negro, pero en CSS3 podremos definirlas del color que queramos, incluso usando colores RGBA En el siguiente ejemplo hemos usado un color RGBA, que a mi parecer, da un mejor efecto a las sombras Ejemplo #caja1 { width: 200px; height: 200px; border: solid 3px #000; box-shadow: 5px -9px 3px RGBA(85, 85, 85, 0.8); }


11

1º DAW - IES Julio Verne Resultado

Una utilidad muy buena de las sombras es el crear el efecto de movilidad. Es decir, que las cosas “salgan” de la pantalla en determinados caso, por ejemplo, al pasar el ratón por encima. Este efecto lo podemos conseguir con el evento :hover. Para ello pondremos la sombra a más distancia del elemento, tanto en horizontal como en vertical y le añadiremos el difuminado. A continuación podemos ver un ejemplo práctico. Ejemplo #caja1 { width: 200px; height: 200px; border: solid 3px #000; background-color: #DDD; box-shadow: 3px 3px 3px RGBA(85, 85, 85, 0.8); } #caja1:hover{ box-shadow: 10px 10px 10px RGBA(85, 85, 85, 0.8); }

Resultado

Normal


:Hover

12


9. Resplandor interior Existe una propiedad de las sombras que no la he nombrado antes pero no porque se me haya escapado, sino porque a mi parecer no es una sombra sino algo así como un resplandor interior (o al menos así se llama el efecto en photoshop que hace esto mismo). Esto consiste en un difuminado en el interior de la caja pegado al borde, similar a la sombra, pero por dentro. El código que utilizaremos es similar al de la sombra, con su posición horizontal, su posición vertical, su difuminado y su color, pero además le añadiremos el valor inset justo antes de todos los valores especificados en la sombra. Para dar efecto de resplandor, le tendremos que dar colores claros y a ser posible un fondo oscuro. Veamos un ejemplo para que resulte más claro. Ejemplo #caja1 { width: 200px; height: 200px; border: solid 3px #000; background-color: #333; box-shadow: inset 10px 10px 15px RGBA(200, 200, 200, 0.8); }

Resultado


13


10. Propiedad background-origin En las versiones anteriores de CSS teníamos varias propiedades para el atributo background tales como background-repeta, background- position, etc… En CSS3, además han añadido la opción de definir el origen de las coordenadas sobre el que se va a colocar la imagen de fondo para que sea el borde del elemento, su padding o su contenido. Los posibles valores son: Border-box; Significa que el origen de las coordenadas de las imágenes será el borde del elemento. Padding-box; Es el utilizado por defecto en CSS3. Significa que queremos colocar el origen de coordenadas en el contenido del elemento incluyendo su padding, de forma que el origen de las coordenadas empieza donde termina el borde(si lo hubiera). Content-box; Sirve para que el origen de las coordenadas sea el lugar donde empieza el contenido del elemento, es decir, sin incluir sus posibles bordes y padding. Resultado


14


11. Atributos overflow-x y overflow-y Estos conceptos, a pesar de ser nuevos en CSS3, no son familiares en las versiones anteriores del lenguaje de estilos. Su utilidad es la de facilitar la lectura de documentos, los cuales son mayores que la caja que los contiene. La propiedad overflow, desde CSS2 nos permite añadir barras de desplazamiento en el lado derecho y en la parte de debajo de la caja cuando el documento tiene una extensión superior a la misma y así evitar el problema de la redimensión que se generaría. Overflow-x y overflow-y tiene la misma función, con la diferencia que permiten especificar los comportamiento del navegador cuando el contenido de la caja rebosa de forma horizontal o vertical. Las propiedades que puede aceptar estos atributos son las mismas que las del atributo overflow, es decir, Visible, Hidden, Scroll, Auto, No-display (aunque este comportamiento no esté implementado a día de hoy en los navegadores) y Nocontent. También habría que comentar que el comportamiento predeterminado del atributo overflow-x y overflow-y es visible, sin embargo, si especificamos alguno de ellos, el otro ya no tendría visible como valor predeterminado, sino auto. Resultado

Overflow-x


Overflow-y

15


12. Introducción al @font-face Hasta ahora, para escoger una fuente para nuestra página web, teníamos que tener en cuenta la posibilidad de que el usuario que la fuese a ver no la tuviese instalada en su ordenador. De forma que el abanico de fuentes que podías utilizar era reducido. La W3C ha querido subsanar ese problema con regla @font-face, que nos permite definir en nuestra hoja de estilo cualquier fuente independientemente de si el usuario la tiene instalada o no. Lo único que nos tiene que preocupar es saber si la fuente está o no en nuestro servidor. La sintaxis de @font-face es: @font-face{ font-family:; src: [,]*; [font-weight:]; [font-style:

Manual CSS3

Recommend Documents