7 efectos mas usados en CSS3

Posteado por jlgarduza en noviembre 22, 2014

La estandarización de CSS3 es un paso fundamental para que sus características logren un mayor grado de adopción en la Web actual. Lo que algunos diseñadores no saben es que varias de sus características ya han completado su ruta y son recomendación oficial del W3C. Prueba de esto es que ya existen documentos que hacen referencia a la próxima versión: CSS4.

También hay que destacar que los navegadores modernos están ofreciendo una buena compatibilidad para las características básicas de CSS3, como el caso de sombras, bordes redondeados y fuentes, entre otras.

En esta entrega les mostraremos los efectos mas usados.

1. Border Radius = border-radius

Podemos redondear las esquinas de los elementos HTML que cuenten con un borde o  un background

HTML

1 2 3

</pre> <div class="radius"></div> <pre>

CSS

1 2 3 4 5 6

.radius{  border-radius: 20px;  background-color: blue;  width: 150px;  height: 150px; }

Resultado

2. Box Shadow – box-shadow

Podemos crear sombras a los elementos HTML solo tenemos que aplicar los valores, horizontal, vertical el desenfoque y el color.

HTML

</pre>
<div class="box-shadow"></div>
<pre>

CSS

.box-shadow{
 box-shadow: 10px 10px 5px 000;
 background-color: green;
 width: 150px;
 height: 150px;
}

Resultado

3. Gradiente = linear-gradient

Nos da la opción de crear degradados a los elementos de HTML, solo asignamos un punto de partida ya sea vertical u horizontal, un color para comenzar y otro para terminar y un punto medio para que se cree el degradado.

Nota: Usar el prefijo en el css para cada navegador -webkit-  -moz-  -o-

HTML

1 2 3

</pre> <div class="gradient"></div> <pre>

CSS

1 2 3 4 5 6

.gradient{  background-image: -webkit-linear-gradient(top, #cccccc, #000000 40.0%);  background-image: -moz-linear-gradient(top, #cccccc, #000000 40.0%);  width: 150px;  height: 150px; }

4. Opacidad = opacity
Con la propiedad opacity podemos aplicar transparencias a los elementos HMTL, la escala de transparencia va de 0.0 a 1

HTML

</pre>
<div class="opacity"></div>
<pre>

CSS

<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 14px; line-height: 1.5em;">.opacity{</span></pre>
 background-color: green;
 height: 150px;
 opacity: 0.4;
 width: 150px;
}

Resultado

5. Transición = transition

Nos permite crear transiciones en los elementos HTML al cambiar de color, posición, tamaño u opacidad.

CSS

#div{

transicion: propiedad | duración | transición | demora

}

6.  Fuentes = @font-face

Con @font-face vamos a poder utilizar cualquier tipo de fuente en nuestra web, solo tenemos que subirla al servidor y aplicarla al css.

CSS

@font-face{

font-family: myFirstFont;

src: url('Sansatio_Light.ttf');

}

<span style="line-height: 1.5em;">

7.  Transformar = transform

Con esta propiedad vamos a poder aplicar transformaciones en 2D y 3D a un elemento. Esta le permite girar, escalar, mover, sesgar, etc, los elementos.

Nota: Usar el prefijo en el css para cada navegador -webkit-  -moz-  -o-

HTML

</pre>
<div class="transform"></div>
<pre>

CSS

.transform{
 background-color: green;
 height: 150px;
 -webkit-transform:rotate(17deg);
 width: 150px;
}

Resultado

Si tienes algún otro efecto mas usado, dejanolos en los comentarios para agregarlo.