• Author / Uploaded
• guitero11

• Categories
• Hojas de estilo en cascada
• Desarrollo web
• Diseño web
• Estándares web
• Ingeniería de software

Citation preview

---

1º DAW - IES Julio Verne

1º DAW - IES Julio Verne

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

1 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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................................... 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 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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 Jose Manuel Guisado Hormigo

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 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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 Jose Manuel Guisado Hormigo

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 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

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:]; } Con esto definimos el tipo de letra y su ubicación en nuestro servidor. Si queremos usar este tipo de fuente tan solo tenemos que llamarla con Font-family como lo hacíamos antiguamente. Ejemplo @font-face{ Font-family: Vivaldi; Font-style: normal; Font-weight: normal; Src: url(VIVALDI.eot); } #caja1 { Font-family: Vivaldi; }

Resultado

16 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

13. Sombras en texto (text-shadow) El atributo text-shadow sirve para dar sombras a un texto, pero usado con imaginación nos puede dar soporte para otros efectos muy interesantes. Este atributo tiene la posibilidad de añadirle varios valores para definir el desplazamiento horizontal, el desplazamiento vertical, el degradado de la sombra y el color, por ese orden. Además, tenemos la posibilidad de añadirle varias sombras al mismo texto separando cada sombra por comas y aquí viene la parte más creativa e interesante de este atributo. Veamos un ejemplo muy completo para que nos quede más claro. Ejemplo #caja1 h1{ font-family: 'Cuprum', serif; color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; }

En este ejemplo, a la letra le ponemos color blanco. Como primera sombra le damos desplazamiento horizontal 0px, vertical 1px, difuminado 0px y color #999. La segunda sombra tendrá un desplazamiento horizontal de 0px, vertical de 2px, difuminado de 0px y color #777. Así sucesivamente. Con esta sombra conseguiremos un efecto de texto en 3D. Resultado

Para conseguir más efecto del mismo tipo tenemos una herramienta en internet muy fácil y que genera un código que podremos usar en nuestra web. http://www.wordpressthemeshock.com/css-text-shadow/

17 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

14. Animaciones 14.1 Introducción Una de las características más impresionantes de CSS3 es la posibilidad de crear animaciones de los elementos de página. Todo esto nos abre infinitas posibilidades que antes solo estaban disponibles para programadores javascript o diseñadores con flash. Algunas de las opciones de las animaciones pueden ser las rotaciones de los elementos, ampliaciones y reducciones de tamaño, desplazamiento, etc. Pero no esto no queda ahí, también han implementado una serie de interacciones con el usuario que solo se pueden hacer con CSS3. Además, todo ello sin tener que programar, lo que resulta mucho más agradable y al alcance de desarrolladores menos técnicos. Ojo!: A día de hoy (mayo de 2012), los navegadores no aceptan como deberían las animaciones así que a todos los atributos y claves hay que añadirles el prefijo para el navegador en concreto (-moz-, -webkit-, -o-). Para este manual los pondremos según indica la especificación, pero tendremos que tener eso en cuenta a la hora de usarlos.

14.2 Conceptos básico para las animaciones Fotograma clave Son los valores iniciales y finales que tiene que tener una animación CSS. Su sintaxis sería algo así:

@keyframes 'nombre_fotograma_clave' { 0% { left: 100px; } 40% { left: 150px; } 60% { left: 75px; } 100% { left: 100px; } } Esta animación estaría compuesta de 4 fotogramas clave. El porcentaje es en el momento en el que va a producirse ese fotograma y los px son la longitud donde se colocaría el fotograma dentro del DIV en el que se encaje. También podemos definir un fotograma clave indicándole, en vez de los tantos por ciento, from para indicarle donde empieza la animación y to para indicarle donde termina.

18 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

14.3 Desplazamiento de un elemento Para la animación de un elemento, usaremos un contenedor DIV con un texto y le aplicaremos los mismos fotogramas clave que usamos en la sección anterior. El código para el contendor sería el siguiente.

#caja1 { animation-name: 'nombre-fotograma-clave'; animation-duration: 45s; animation-iteration-count: 10; } El contenedor al que le aplicamos la animación se moverá primero a la izquierda 100px, después 50px más hasta los 150px, después se moverá a la izquierda hasta los 75px y por último otra vez a la derecha hasta los 100px. Esta animación lo hará en 45 segundos y la repetirá 10 veces. Los atributos de estilo para esta capa son los siguientes:   

Animation-name: nombre del fotograma clave. Animation-duration: la duración de la animación Animatioin-iteration-count: las veces que se repite. Se le puede poner también el valor infinite para indicarle que la duración será infinita.

Además de las propiedades que hemos usado, en el ejemplo anterior tenemos otra serie de atributos que se pueden aplicar a la animación y que se colocan en el DIV. Estas propiedades serían las siguientes: 



 

animation-timing-function: se aplica entre los fotogramas clave, no sobre toda la animación y describe como progresa la animación a lo largo de un ciclo. animation-direction: esta propiedad define el sentido de la animación. Si especificamos “alternate” y los ciclos de interacción son impares, la animación irá en la dirección normal, si no, se realizará en la dirección inversa animation-delay: propiedad que nos indica el momento en el que comenzará la animación. Si el valor es 0 se ejecuta en cuanta se carga la página. animation: esta propiedad combina las anteriores de una forma resumida.

19 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

14.4 Transformación de un elemento Existe otro atributo que permite hacer animaciones y efectos muy interesantes a los elementos de nuestra web. Este atributo es el atributo transition. A diferencia del atributo animation, este nos permite crear efectos de aumento o reducción de la caja, nos cambia el color, nos permite rotarla, etc. Al igual que al atributo animation, a este también hay que ponerle los prefijos para los distintos navegadores ya que aun no se han adaptado a los estándares de la W3C. No está reñido con el atributo visto anteriormente, es decir, los dos se pueden usar por igual en una caja dándonos infinitas posibilidades. Además, cuando usamos el transition con el selector ::hover nos dará un efecto de realidad que nunca antes habríamos conseguido con CSS. Cuenta con varias propiedades: 

  

Transition-property: Especifica a que propiedad CSS se le aplica. Hay dos valores comodines, all que indica que se aplicarán todas las propiedades susceptibles de cambiar y none, que no aplicará ninguna propiedad. Para conocer todos los valores posibles para este atributo podemos revisar el punto 7.1 del documento de transiciones CSS3 de la W3C http://www.w3.org/TR/css3-transitions/#animatable-css Transition-duration: Tiempo empleado en el desarrollo de la transición. Es la única propiedad obligatoria Transition-timing-function: Cómo se desarrolla la transición en el tiempo. Transition-delay: Tiempo que transcurre desde que la acción que desencadena la transición y la misma ocurren, es decir, el ratraso con el que empieza la transición.

Las transiciones también se pueden resumir en una sola propiedad que tendría la siguiente sintaxis:

transition: property duration timing-function delay; Si deseamos utilizar la forma corta y declarar varias propiedades a cambiar con igual o distintos parámetros cada una de ellas, separaremos los conjuntos de propiedades con comas. Veamos un ejemplo para que esté más claro

transition: color 3s linear 0s, width 1s ease 1s; Donde una transformación será color 3s linear 0s y después se hará la transformación width 1s ease 1s; Veamos un ejemplo más completo a continuación. Evidentemente solo puedo poner el código, ya que no puedo poner una animación en el documento. Si queremos ver algunos posibles efectos podemos entrar en la web http://ksesocss.blogspot.com/2012/03/transitions-css3-guia-de-aproximacion-y.html

20 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

Ejemplo #caja1 { transition:box-shadow, transform 2s; -webkit-transition:-webkit-box-shadow, -webkit-transform 2s, background 2s; -moz-transition:-moz-box-shadow, -moz-transform 2s, background 2s; transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); } #caja1:hover { transition:transform 3s, box-shadow 3s; -webkit-transition:-webkit-transform 3s, background 3s, -webkit-box-shadow 3s; -moz-transition:-moz-transform 3s, background 3s, -moz-box-shadow 3s; box-shadow: 10px 10px 10px #555; transform: scale(1.3,1.3); -webkit-transform: scale(1.3,1.3); -moz-transform: scale(1.3,1.3); z-index:9999; }

Este ejemplo nos mostrará la #caja1 a escala 1,1 (su tamaño normal) y cuando pongamos el ratón encima aumentará su tamaño un 30% y le aparecerá una sombra que se desplazará 10px a la derecha y 10px hacia abajo. Esto nos dará el efecto de que la caja se aproxima a nosotros.

21 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne

15. Selectores La nueva versión de CSS3 incluye todos los selectores de CSS2 y añade otra decena de selectores, pseudo-clases y pseudo-elementos que podremos encontrar ampliadas en la recomendación de la W3C http://www.w3.org/TR/2011/REC-css3-selectors20110929/ Selectores de atributos En primer lugar añade tres nuevos selectores de atributos: 





Elemento[atributo ^= ”valor”] => selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada. Por ejemplo: a[href^=”mailto”] { … } (todos los elementos que apuntan a una dirección de correo electrónico) Elemento[atributo $= “valor”] => Selecciona todos los elementos que disponen de este atributo y cuyo valor termina exactamente por la cadena indicada. Por ejemplo: a[href$=”.html”] { … }(Todos los elementos que apuntan a una página HTML) Elemento[atributo *= “valor”] => Selecciona todos los elementos que disponen de este atributo y cuyo valor contiene la cadena de texto indicada. Por ejemplo: h1[title*=”capítulo”] { … }(todos los h1 cuyo atributo title contenga la palabra “capítulo”)

Selector de hermanos Otro elemento nuevo de CSS3 es el selector general de hermanos que generaliza el selector adyacente de CSS2.1. Su sintaxis es elemento1 ~ elemento2 que seleccionaría el elemento2 que es hermano de elemento1 independientemente de si se encuentra inmediatamente después en el código o no. Veamos un ejemplo más claro. Ejemplo h1 + h2 { ... } /* selector adyacente */ h1 ~ h2 { ... } /* selector general de hermanos */ ... ...

...

...

...

El primer selector (h1 + h2) sólo selecciona el primer elemento h2, mientras que el segundo selector (h1 ~ h2) seleccionará todos los h2 menos el segundo, ya que no es hermano.

22 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne Pseudo-elementos Los pseudo-elemento de CSS2.1 se mantienen en CSS3 pero cambia su sintaxis y ahora se utiliza :: delante del nombre en vez de : como se hacía antes. Es decir, el uso de los pseudo-elementos ahora sería (::first-line, ::first-letter, ::before, ::after,…). Nuevo pseudo-elemento CSS3 añade un nuevo pseudo-elemento que selecciona el texto seleccionado por el usuario con un ratón. Este pseudo-elemento sería ::selecction Pseudo-clases Una de las mayores modificaciones de CSS3 se produce en las pseudo-clases, ya que añaden 12 nuevas. Entre las que se encuentran: 



 

 

Elemento:nth-child(numero) => Selecciona el hijo del elemento siempre y cuando esté en la posición enésima. Muy útil por ejemplo para seleccionar el quinto párrafo, el séptimo título, etc. Elemento:nth-last-child(numero) => Idéntico al anterior, pero empieza a contar desde atrás. Por si queremos seleccionar el penúltimo o el antepenúltimo hijo de un elemento. Elemento:empty => Selecciona el elemento indicado con la condición de que no tenga ningún hijo ni contenido de texto. Útil para imágenes, etc. Elemento:first-child y elemento:last-child => Selecciona los hijos indicados con la condición de que sean el primero o el último hijo de su padre respectivamente. Elemento:nth-of-type(numero) => Selecciona el elemento que sea el enésimo hermano de este tipo. Elemento:nth-last-of-type(numero) => Selecciona lo mismo que el anterior, pero este empieza a contar desde el último hermano.

Algunas pseudo-clases como :nth-child(numero) permiten el uso de pseudo-clases complejas para realizar selecciones avanzadas. Por ejemplo:

Li:nth-child(2n+1) { … } (Selecciona todos los elementos impares de la lista) Li:nth-child(2n) { … } (Selecciona todos los elementos pares de la lista) Veamos ahora un ejemplo más completo y que nos puede resultar muy útil. Ejemplo /* Las siguientes reglas alternan cuatro estilos diferentes para los párrafos */ p:nth-child(4n+1) { ... } p:nth-child(4n+2) { ... } p:nth-child(4n+3) { ... } p:nth-child(4n+4) { ... }

23 Jose Manuel Guisado Hormigo

1º DAW - IES Julio Verne Pseudo-elemento :not Otro pseudo-elemento nuevo en CSS3 es el pseudo-elemento :not. Lo pongo a parte porque me resulta el más interesante de los nuevos pseudo-elementos. Este pseudo-elemento nos permitirá seleccionar todos los elementos que NO cumplen con la condición del selector. Por ejemplo

:not(p) { … } (selecciona todos los elementos de la página que no sean párrafos)

:not(#especial) { … }

(selecciona cualquier elemento cuyo atributo id no sea

"especial") Mas pseudo-elementos y test del navegador Si queremos conocer todos los pseudo-elementos nuevos y además de ello saber si nuestro navegador es compatible con ellos tendremos que entrar en la dirección http://www.css3.info/selectors-test/

16. Documentación Este manual se ha basado principalmente en la información recogida en:   

Manual de CSS3 de DesarrolloWeb.com http://www.desarrolloweb.com/manuales/css3.html Selectores CSS3 de LibrosWeb.es http://www.librosweb.es/css_avanzado/capitulo3/selectores_de_css_3.html Especificación oficial de la W3C (aun en construcción)

Podemos ver el estado actual de la especificación en http://www.w3.org/Style/CSS/current-work además de pinchar sobre los enlaces de las especificaciones que ya están terminadas y conocerlas al completo.

24 Jose Manuel Guisado Hormigo