Crear Estilos Smooth Fácilmente Con CSS3

Actualmente podemos prescindir de JavaScript y Flash para realizar transiciones en los efectos, esto gracias las nuevas características que nos brinda CSS3. Los estilos y efectos de animación CSS3 dan más libertad para crear los estilos que deseemos.

Hoy, compartiremos con ustedes diferentes transiciones y efectos que se pueden hacer utilizando sólo CSS3. Te invitamos que visites el siguiente link para que conozcan los efectos que encontraran.

Efecto SHAPE

Te mostraremos cómo se transforman una figura de la imagen de un cuadrado a un círculo (con radio). Añadimos el valor de transición de toda facilidad 1s para animar esto.

Esto significa que mientras se cierne la imagen, se va a transformar la figura en un círculo sin problemas dentro de un 1 segundo. También le daremos un radio para que quede al 50% en el interior de la figura.

Las Etiquetas HTML

Todas nuestras marcas HTML tendrá una envoltura de imágenes con una clase del efecto junto con la clase img. En esta parte, vamos a añadir la metamorfosis de clase (para el efecto morphing), junto con una clase de img para el estilo de nuestras imágenes.

[html]</pre>
<div><img alt="" src="img/image1.jpg" /></div>
<pre>
[/html]

El CSS

Para esta parte de nuestro CSS, daremos A nuestras imágenes una dimensión de 200px x 200px y un borde blanco de un grosor 10px. También vamos a poner un radio de 15px tener bordes lisos.

Esconderemos el desbordamiento para nuestros efectos. Para el estado del ratón por encima, vamos a establecer el puntero del cursor para resaltar que estamos flotando en el elemento.

[css]
.img {
width: 200px;
height: 200px;
border: 10px solid #fff;
-webkit-border-radius: 15px;
border-radius: 15px;
overflow: hidden;
}

.img:hover {
cursor: pointer;
}
[/css]

Ahora, para el efecto de cambio, vamos a utilizar la transición CSS3 para la animación. Para esta clase, vamos a especificar primero las propiedades específicas del navegador (-webkit,-moz,-ms,-o) y establecer el valor de todas facilmente en 1s. Este valor va a hacer el proceso de cambiar el estilo de la imagen del estado normal al estado el ratón por encima de una duración de 1 segundo.

Para que te hagas una idea clara de cómo funcionan las propiedades de transición de estilo CSS, echa un vistazo a la siguiente sintaxis.

[css]
transition: [transition-property] [transition-duration] [transition-timing-function];
[/css]

• [ transition-property ] se utiliza para especificar los estilos específicos o propiedades que desea seleccionar o usar , como el fondo, ancho, etc En nuestro CSS , utilizamos todo para referirse a todas las propiedades. Tanto el fondo y el relleno se cambiarán.
• [ transition-duration ] se refiere a la velocidad de la animación o de transición. En nuestro ejemplo, utilizamos 1s. Esto significa que la animación va a pasar dentro de 1 segundo. Por favor, tenga en cuenta que si la duración no está establecida, la transición no tendrá ningún efecto.
• [ transición – timing-function ] determinará cómo se calculará la velocidad durante una transición . La transición por defecto [ transición – timing-function ] es la facilidad , lo que significa que el efecto de transición comenzará lentamente, luego rápido, luego terminar lentamente. Puedes consultar aquí para obtener más información sobre la [ transición – timing-function ] .

A continuación añadimos los estilos del estado del ratón por encima . Añadimos la linea de borde blanca con tamaño 10px y un radio de linea de 50 % , que nos da una forma de círculo perfecto cuando se produce el estado estacionario. También hemos añadido sombras casilla para añadir un efecto de resplandor.

[css]
.morph {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

.morph:hover {
border: 10px solid #fff;
border-radius: 50%;
-webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
-moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);

}
[/css]

Efecto Displacement

Para el desplazamiento, vamos a hacer un efecto de zoom. Vamos a tirar de la imagen cerca de las fronteras cuando se cernía y ocultar los desbordamientos del contenido de la caja.

Las Etiquetas HTML

Nuestro formato HTML es el mismo que el efecto de cambio, pero esta vez vamos a agregar el zoom de clase (por el efecto de zoom), junto con una clase de IMG para el estilo de nuestras imágenes.

[html]
<div class="zoom img"><img alt="" src="img/image2.jpg" /></div>
[/html]

El CSS

En nuestro efecto de zoom, vamos a especificar un ancho de base y la altura de 200px x 200px. Volveremos a poner en práctica los efectos de transición, pero para esto, vamos a darle una 2 ª generación para poner un poco de drama en su ratón por encima del Estado. Por su estado el ratón por encima, nos limitaremos a añadir 100px en la anchura y altura regular, creando una ilusión de zoom.

Si nos remontamos a nuestra imagen CSS, escondemos el desbordamiento. Esto retendrá la imagen dentro de nuestra frontera. Además, vamos a añadir el estilo de las sombras de la caja para nuestro efecto de brillo.

[css]
.zoom img {
width: 200px;
height: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

.zoom img:hover {
width: 300px;
height: 300px;
-webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
-moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
}
[/css]

Efecto Position

Para este efecto, vamos a inclinar la imagen. Esto variará en los grados y duración en base a su preferencia. Tome en cuenta que cambie la duración al cambiar el valor de 0,3 s (lo que significa 0,3 segundos).

Mientras tanto, también puede declarar cuántos grados usted quisiera la imagen para inclinar bajo el elemento de transformación. Transformar es un efecto que permite una forma de cambio de elemento, el tamaño y la posición. Puede manipular el elemento al cambiar el valor de rotación (10 grados) (que significa 10 grados).

La Etiqueta HTML

Todavía tenemos el mismo formato HTML para el efecto de inclinación, pero esta vez, sólo hay que poner la clase de inclinación lugar junto con nuestra clase img.

[html]<div class="tilt img"><img alt="" src="img/image3.jpg" /></div>[/html]

El CSS

Ahora, para nuestra CSS, vamos a añadir de nuevo nuestros efectos de transición, a partir de las propiedades específicas del navegador. Pero esta vez, no queremos que esto se mueve tan lento así que vamos a darle una duración de 0,3 milisegundos.

Siguiente para el Estado el ratón por encima, vamos a utilizar la propiedad transform. Esta propiedad le permite rotar, escalar, mover, sesgar los elementos.

Después, vamos a añadir un valor de rotación de 10 grados. Así en el estado estacionario, se girará o cambiar su posición de 10 grados desde el estado normal. Y, por último, vamos a añadir los estilos de la caja de sombra para obtener el efecto de resplandor.

[css]
.tilt {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.tilt:hover {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
-moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
}
[/css]

Efecto Color

Para el color, vamos a dejar toda la saturación mediante la creación de un efecto de escala de grises usando el filtro webkit cuando se cause el efecto.

El efecto de filtro web es una operación gráfica que se aplica a un elemento. Es como tener efectos Photoshop, como cuando se puede cambiar el color o el abandono de su color.

A continuación, se establece el valor de la transición a todos en 1s para tener un efecto suave, podemos ver una imagen o elemento de escala de grises.

Etiqueta HTML

[html]
<div><img alt="" src="img/image4.jpg" /></div>
[/html]

El CSS

Otra vez Vamos a repetir el proceso para el efecto de transición. Pondremos a 1 segundo y aplicara suavemente el efecto.

Para el evento del ratón por encima, vamos a utilizar la propiedad webkit-filter y luego usamos la propiedad de escala de grises. Y por último, añadiremos las sombras de la caja para obtener el efecto brillante.

[css]
.color {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.color:hover {
-webkit-filter: grayscale(100%);
-webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
-moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);

}
[/css]

Consejo: También puede usar los efectos de difuminar, sepia, invertir, saturar el color o manipular el brillo de la imagen o elemento cuando se cambia utilizando el efecto borroso o de brillo. Sólo tiene que añadir el valor dentro del paréntesis.

Efecto Difuminado

[css]-webkit-filter: blur(3px);[/css]

Efecto Sepia

[css] -webkit-filter: sepia(100%); [/css]

Efecto Invertido

[css] -webkit-filter: invert(0.2); [/css]

Efecto Saturado

[css] -webkit-filter: saturate(50%); [/css]

Una vez tengas corriendo estos efectos, podrás ver que los efectos son bastantes llamativos para aplicarlos en nuestro sitio web. ¿Te gustaron los efectos? Prueba esta herramienta para crear los efectos que quieras.