Algo asi:
Hay varios tipos, tu me tienes que decir cual quieres...
O por ejemplo, un buen tutorial, si es lo que necesitas:Hojas de estilo utilizando CSS3Poco a poco CSS3 se irá imponiendo en el diseño de las aplicaciones, para darle más vistosidad a los desarrollos. Vamos a ver algunos ejemplos de propiedades que nos proporcionará esta nueva versión de CSS.
Transiciones con CSSUna nueva opción que nos proporcionará esta nueva versión son las transiciones de una propiedad como son el color, fondo … En el ejemplo que vamos a ver, tendremos un enlace y cuando pasemos por encima de él, el cambio de color no se hará de golpe, sino que se hará poco a poco, según el tiempo que indiquemos en la transacción.
Lo primero que hacemos es indicar los colores que tendrá el enlace y el que tendrá cuando el ratón pase por el enlace.
1 a { color: #e83119; }
2 a:hover { color:#0a99ae; }Ahora lo que haremos será indicarles las propiedades correspondientes a la transición. Serán tres las propiedades que tendremos que utilizar.
* Indicaremos sobre que propiedad actuaremos, en nuestro caso el color.
* Indicaremos el tiempo que durará la transición.
* Indicaremos que hacer si el cambio termina antes de tiempo.
El código quedará de la siguiente forma.
1 a {
2 -webkit-transition-property: color;
3 -webkit-transition-duration:.4s;
4 -webkit-transition-timing:ease-out;
5 }
También podemos combinar las propiedades en una sola, de la siguiente forma.
1 a { -webkit-transition: color .4s ease-out; }Le estamos indicando que la transición dura 0,4 sg. El resultado final será un enlace que cuando se pase por encima, se vaya cambiando poco a poco a un color azul.
Vamos a ver otro ejemplo ahora con un menú horizontal, que al pasar el ratón por encima, le daremos un efecto que haga que despliegue un borde relleno que dure 0,3 sg.
Primero creamos los enlaces, cada uno con un border-bottom de 3 px y cuando se pase por encima, el border será de 50 px.
1 border-nav a { border-bottom: 3px solid #e83119 }
2 border-nav a:hover { border-bottom: 50px solid #e83119 }Las propiedades de la transición serán.
1 border-nav a { -webkit-transition: border .3s ease-out; }Background ClipCuando se conecta a propiedades como text-shadow y @ font-face, la propiedad background-clip hace todas las cosas posibles con el tipo. Para mantener las cosas simples, vamos a empezar con la toma de una imagen sombreada y enmascararlo sobre algún texto. El código de aquí es bastante simple, un div con algo de texto.
Ahora con CSS le pondremos una imagen de fondo al texto y le indicaremos que el color de fondo sea transparente. El código es el siguiente:
1 .bg-clip {
2 background: url(../img/clipped_image.png) repeat;
3 -webkit-background-clip: text;
4 -webkit-text-fill-color: transparent;
5 }Y el resultado es el que os mostramos a continuación.
Ahora podemos hacer mas cosas con esto que hemos creado, por ejemplo girarlo un poco. Si queremos hacer esto, las propiedades a utilizar serían las siguientes:
1 -webkit-transform: rotate(-5deg);
2 -moz-transform: rotate(-5deg);
3 -o-transform: rotate (-5deg);
Animación CSS3Vamos a crear una animación con CSS3 con una imagen que se irá moviendo por la pantalla. Para ello, lo primero es crear la imagen dentro de un div.
Luego creamos la propiedades de la imagen que vamos a mover, indicándole el nombre de la animación.
1 .circle_motion {
2 -webkit-animation-name: track;
3 -webkit-animation-duration: 8s;
4 -webkit-animation-iteration-count: infinite;
5 }
Ahora lo que nos queda es declarar las propiedades para cada fotograma. En nuestro caso para hacerlo de forma simplificada, durará 8 sg divididos en cuatro partes.
01 @-webkit-keyframes track {
02 0% {
03 margin-top:0px;
04 }
05 25% {
06 margin-top:150px;
07 }
08 50% {
09 margin-top:150px;
10 margin-left: 300px;
11 }
12 75% {
13 margin-top:0px;
14 margin-left: 300px;
15 }
16 100% {
17 margin-left:0px;
18 }
19 }Pueden ver el ejemplo
aquí.Fuente: Programacion.com
