El CSS es la piedra angular de todo diseño web. Su sintáxis, aparantemente sencilla, afecta directamente al aspecto visual de nuestro front-end. En este artículo quiero comentaros ocho técnicas CSS que os resultarán muy útiles en futuros proyectos.

Trabajando con medidas relativas

Si queremos utilizar medidas relativas (em), para las tipografías de nuestros diseños, es bueno establecer el valor font-size del body a 62.5%. De esta forma será mas sencillo trabajar con este tipo de valores ya que el valor em será el mismo que en píxeles dividido por diez.

body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

Utilizando columnas múltiples

Existe una forma muy sencilla de trabajar con columnas en nuestras plantillas, sin recurrir al uso de varios contenedores. Por desgracia este atributo solo es compatible con navegadores que usen motor Mozilla o WebKit (Safari, Chrome, Firefox, etc…).

.columnas {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}

Evitando el salto de línea

A veces no queremos que un texto salte de línea a mitad de una frase, debido al tamaño del contenedor de ese elemento. Para ello existe un atributo llamado white-space que evita precisamente esos saltos de línea indeseados.

p { white-space: nowrap; }

Rotando imágenes

Entre muchas de las posibilidades que CSS ofrece existe la de trabajar con la posición de las imágenes. En este ejemplo vamos a girar una imagen completamente, además, será compatible con prácticamente todos los navegadores modernos.

img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

Rotando texto

Acabamos de ver que es posible rotar imágenes, algo parecido ocurre con el texto. En este caso giramos un texto 90 grados.

.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Estilizando enlaces según su destino

En el diseño final de un sitio web existen numerosos tipos de enlaces. Normalmente, a la hora de darles estilo recurrimos al uso de diferentes clases. Mediante el uso de selectores este trabajo se nos reduce muchísimo. (Publicado en “Enlaces inteligentes con CSS“)

a[href^="http://"] { /* válido para cualquier enlace */
...
}
a[href="http://google.com"] { /* enlace específico */
...
}
a[href^="/"], a[href^=".."] { /* para enlaces relativos internos */
...
}
a[href^="mailto:"] { /* correo electrónico */
...
}
a[href$=".pdf"] { /* según su extensión -.pdf, .zip, .doc, .mp3, etc... */
...
}

Centrando un elemento

¿Que ocurre cuando queremos centrar un elemento en una página?. Siempre tenemos el mismo problema, queremos que se adapte al tamaño del navegador, pero que siempre permanezca centrado. Para conseguir este propósito tendremos que atender a dos factores: tamaño del contenedor y al atributo position.

.contenedor {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 300px;
margin-top: -150px; /* 1/2 del elemento height*/
margin-left: -250px; /* 1/2 del elemento width */
}

Sombra interna

Ya sabemos que CSS permite trabajar con sombras, pero ¿qué ocurre sin queremos que la sombra sea interna?. Muy sencillo, lo único que tendremos que hacer será añadir el valor inset dentro el atributo correspondiente.

.sombra {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}