Pseudo-elementos

Influir sobre la primera letra: P:first-letter { fuente-size: 35px } Cuando tenga el foco cambia de color: input:selection { background-color:#eaeaea } RGBA p { color: rgba(0,0,0,0.5) } Opacity (opacidad) Esquinas redondeadas (border-radius) Permite redondear las esquinas de una caja (div, span...) Ej1: #example1 { -moz-border-radius: 15px; border-radius: 15px; } Ej2: border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px; border-radius: 5px; border-radius: 5px / 10px; Sombras (box-shadow, text-shadow) La propiedad box-shadow admite una lista de 5 elementos, que definen, en orden, desplazamiento horizontal, desplazamiento vertical, desenfocado, extensin y color de la sombra. Opcionalmente, se puede aadir la palabra clave inset, que nos permitir hacer una sombra interna en lugar de una externa: #Example_F { -moz-box-shadow: 0 0 5px 5px #888; -webkit-box-shadow: 0 0 5px 5px#888; box-shadow: 0 0 5px 5px #888; } La propiedad text-shadow se comporta de igual modo, y nos permite generar sombras en los textos.

Por otro lado, cabe decir que podemos tener ms de una sombra por elemento, es decir, que las podemos superponer como efecto de papel cebolla. Para hacerlo: box-shadow: 0 0 10px 5px black, -20px 0px 50px blue; Mltiples imgenes de fondo: #example1 { width: 500px; height: 250px; background-image: url(fons1.png), url(fons2.png); background-position: center bottom, left top; background-repeat: no-repeat; } Columnas de texto Otra de las novedades es la posibilidad de trabajar con columnas de texto. Realmente, con el ancho actual de las pantallas ha sido necesario hacerlo, puesto que un ancho demasiado grande en los prrafos de texto afecta a su legibilidad. As, desde la especificacin 3, podemos utilizar diseos con columnas. Las propiedades que hemos de emplear son: -moz-column-count: 3; -webkit-column-count: 3; -moz-column-width: 200px; -webkit-column-width:200px; -moz-column-gap: 20px; -webkit-column-gap: 20px;

Ejemplo de girar objeto: body {font-family: georgia, serif;background: #c00;} h1 {color: #fff; text-shadow: #666 1px 1px 2px;} h1 a {color: #ccc; font-size: 18px;} @-webkit-keyframes girando { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(-360deg); } } @-moz-keyframes girando { from { -moz-transform: rotateY(0deg); } to { -moz-transform: rotateY(-360deg); } } #container { margin: 50px auto; -webkit-perspective: 300px; -moz-perspective: 300px; perspective: 300px; } #girando { margin: 20px auto; width: 400px; padding: 10px; height: 40px; background-color: rgba(0,0,0,0.5); border: 1px solid #666; color: #fff; -webkit-animation-name: girando; -moz-animation-name: girando; animation-name: girando; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 3s; -moz-animation-duration: 3s; animation-duration: 3s;

-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } Animaciones CSS3 Avanzadas #girandogracias a @-webkit-keyframes;

Otro ejemplo interesante: Animaciones CSS3 Avanzadas body {font-family: georgia, serif; background: #ccc;} h1 {color: #666; text-shadow: #fff 1px 1px 2px;} h1 a {color: #c00; font-size: 18px;} @-webkit-keyframes girando { from,20% { -webkit-transform: rotateY(0deg); } 30%,40% { -webkit-transform: rotateY(90deg); } 50%,60% { -webkit-transform: rotateY(180deg); } 70%,80% { -webkit-transform: rotateY(270deg); } 90%,to { -webkit-transform: rotateY(360deg); } } @-moz-keyframes girando { from,20% { -moz-transform: rotateY(0deg); } 30%,40% { -moz-transform: rotateY(90deg); } 50%,60% { -moz-transform: rotateY(180deg); } 70%,80% { -moz-transform: rotateY(270deg); } 90%,to { -moz-transform: rotateY(360deg); } } #container { margin: 30px auto; -webkit-perspective: 600px; -moz-perspective: 600px; perspective: 600px; } #girando { margin: 20px auto; width: 200px; padding: 30px; -webkit-animation-name: girando; -moz-animation-name: girando; animation-name: girando; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 5s; -moz-animation-duration: 5s; animation-duration: 5s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } #girando:hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused; } #girando span { position: absolute; width: 180px; height: 180px; border: 2px solid #fff; background: rgba(0,0,0,0.2); font-weight: bold; font-size: 120px; text-align: center; text-shadow: #fff 2px 2px 1px; } #uno { -webkit-transform: rotateY(0deg) translateZ(90px); -moz-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); } #dos { -webkit-transform: rotateY(-90deg) translateZ(90px); -moz-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); } #tres { -webkit-transform: rotateY(-180deg) translateZ(90px); -moz-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }

#cuatro { -webkit-transform: rotateY(-270deg) translateZ(90px); -moz-transform: rotateY(-270deg) translateZ(90px); transform: rotateY(-270deg) translateZ(90px); } Animaciones CSS3 Avanzadas 1 2 3 4

M e d i a Q u e r i e s Desde la versin 2.1 de los CSS, existe la posibilidad de definir estilos en funcin del uso de la hoja: una para la pantalla (screen ), otra para la impresin( print ), otra para los lectores de voz (voice). A partir de la especificacin 3 esto va un paso ms all, y nos permite definir estilos especficos para diferentes tamaos de pantalla. Fijmonos en esta definicin: Esto es una prueba Y prueba.css es: /*Esta consulta de medios de comunicacin (Media Queries) expresa que hoja de estilo se va a aplicar en dispositivos con ventana (la parte de la pantalla / papel donde se procesa el documento) con anchuras entre 400 y 700 pxeles y con las reglas CSS siguientes:*/

@media screen and (min-width: 400px) and (max-width: 700px) {

body{

background-color:#ff0000;

font-family: Times New Roman;

}

h3{

text-align:center;

}

}

height

El valor es de longitud (length) y se aplica a tipos de medios visuales y tctiles.

Acepta los prefijos min / max.

Con height media feature (funcin de medios) especificamos el alto de la zona de visualizacin dirigido del dispositivo de salida.

Algunos ejemplos:

/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-width : 320px)

and (max-width : 480px) {

/* Styles */

}

/* Smartphones (landscape) ----------- */

@media only screen

and (min-width : 321px) {

/* Styles */

}

/* Smartphones (portrait) ----------- */

@media only screen

and (max-width : 320px) {

/* Styles */

}

/* iPads (portrait and landscape) ----------- */

@media only screen

and (min-width : 768px)

and (max-width : 1024px) {

/* Styles */

}

/* iPads (landscape) ----------- */

@media only screen

and (min-width : 768px)

and (max-width : 1024px)

and (orientation : landscape) {

/* Styles */

}

/* iPads (portrait) ----------- */

@media only screen

and (min-width : 768px)

and (max-width : 1024px)

and (orientation : portrait) {

/* Styles */

}

/* Desktops and laptops ----------- */

@media only screen

and (min-width : 1224px) {

/* Styles */

}

/* Large screens ----------- */

@media only screen

and (min-width : 1824px) {

/* Styles */

}

/* iPhone 4 ----------- */

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

/* Styles */

}