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:

box-shadow: rgba(0, 0, 128, 0.25) 5px 3px 4px;
text-shadow: rgba(64, 64, 64, 0.5) -2px 4px 4px;

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-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);

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:

background-color:blue !important; background-color:red;

Esquinas redondeadas con CSS:

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

-moz-border-radius: 15px;
border-radius: 15px;

Ejemplo:

Transparencia en las imágenes con CSS:

Muy útil también en efectos con hover

opacity:0.4;
filter:alpha(opacity=40); /* Para IE8 y anteriores */

Ejemplo:


iSocialWeb – Diseño Web en Barcelona

Artículos relacionados
Deja tu respuesta