Artículo

---

0 ¡votar!

8 técnicas CSS que deberías de conocer

Los estilos CSS es lo que nos permite dar la apariencia que deseamos a nuestros desarrollos, por lo que forma parte fundamental de estos. Hoy vamos a ver un listado de 8 técnicas que nos pueden servir a la hora de realizar nuestros desarrollos.

Trabajar 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

Podemos trabajar de forma muy sencilla con columnas sin la necesidad de recurrir a los contenedores, pero por desgracia, solo funciona en navegadores que implementen el motor Mozilla o WebKit

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

Evitando el salto de línea

Podemos evitar que un texto salte de línea a mitad de la frase por el tamaño del contenedor. Esto se puede evitar con la propiedad “white-space”.

p { white-space: nowrap; }

Rotando imágenes

CSS ofrece la posibilidad de rotar completamente las imágenes. Vamos a ver como se puede hacer con propiedades CSS, y que será compatible con casi todos los navegadores actuales.

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

Rotando texto

Al igual que las imágenes, se puede rotar el texto. En este ejemplo lo rotamos 90 º

.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.

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

Para conseguir un centrado de un elemento en la página, debemos de atender dos factores: tamaño del contenedor y el atributo de posición.

.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

Podemos trabajar con sombras internas, para ello tendremos que añadir el valor del inset dentro del 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;
}

Vía: Cssblog

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios