5 trucos CSS para tus webs

Las hojas de estilo en cascada (Cascading Style Sheets, o sus siglas CSS) nos permite dotar a las webs de un estilo y una estética. Existen ciertos trucos que nos ayudan a realizar mejoras estéticas en nuestros diseños web, hoy os contaremos alguna.

CSS Tips y Tricks: Algunos trucos CSS

1º Sombreado de texto o caja con CSS:

Con este truco podéis liberaros un poco del uso de photoshop y dotar a vuestras letras e imágenes de una sombra:

-webkit--moz--ms-filter:alpha(opacity=40); /* Para IE8 y anteriores */
-webkit--moz--ms-filter:alpha(opacity=40); /* Para IE8 y anteriores */

Ejemplo:
isocialweb – diseño web

Rotar imágenes con CSS:

Sencillo pero útil estilo, que mezclado por ejemplo con un hover, nos podría permitir torcer imágenes al pasar el ratón por encima, o de una forma más sencilla montar tablero de imágenes simulando un corcho por ejemplo:

-webkit--moz--ms-filter:alpha(opacity=40); /* Para IE8 y anteriores */
-webkit--moz--ms-filter:alpha(opacity=40); /* Para IE8 y anteriores */
-webkit--moz--ms-filter:alpha(opacity=40); /* Para IE8 y anteriores */
-webkit--moz--ms-filter:alpha(opacity=40); /* Para IE8 y anteriores */
-webkit--moz--ms-filter:alpha(opacity=40); /* Para IE8 y anteriores */

Ejemplo:



3º Uso de !important

Esta etiqueta indica la predominancia del estilo que lo lleva sobre otro que haga referencia al mismo valor. Es ideal para redefinir un estilo.

Ejemplo:

-webkit--moz--ms-filter:alpha(opacity=40); /* Para IE8 y anteriores */

Esquinas redondeadas con CSS:

Esto nos puede ayudar a hacer botones, darle un toque diferente a nuestras imágenes, divs…

-webkit--moz--ms-filter:alpha(opacity=40); /* Para IE8 y anteriores */
-webkit--moz--ms-filter:alpha(opacity=40); /* Para IE8 y anteriores */

Ejemplo:

Transparencia en las imágenes con CSS:

Muy útil también en efectos con hover

-webkit--moz--ms-filter:alpha(opacity=40); /* Para IE8 y anteriores */
-webkit--moz--ms-filter:alpha(opacity=40); /* Para IE8 y anteriores */

Ejemplo:


iSocialWeb – Diseño Web en Barcelona

Artículos relacionados
Deja tu respuesta