8 nuevos trucos para manejar CSS

martes, noviembre 16, 2010
COMPARTE EL POST

css3CSS es la base de todo sitio web hoy en día, y con ello si quieres seguir mejorando tu técnica sobre algunas cosas que a veces no tenemos en cuenta podemos revisar 8 nuevos trucos para manejar CSS, donde con la ayuda de CSS3 y algunas opciones que no siempre utilizamos podemos entender mejor la forma de hacer un sitio web más amplio y elegante, como por ejemplo la de usar los “em” en vez de pixeles para las tipografías o tamaño de fuente, o la posibilidad de rotar imágenes de forma muy fácil.

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.

  1. body { 
  2. font-size: 62.5%; /* font-size 1em = 10px */
  3. p { 
  4. font-size: 1.2em; /* 1.2em = 12px */
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…).




  1. .columnas { 


  2. -moz-column-count: 3; 


  3. -moz-column-gap: 20px; 


  4. -webkit-column-count: 3; 


  5. -webkit-column-gap: 20px; 





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




  1. p { whitewhite-space: nowrap; } 



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.




  1. img { 


  2. -moz-transform: scaleX(-1); 


  3. -o-transform: scaleX(-1); 


  4. -webkit-transform: scaleX(-1); 


  5. transform: scaleX(-1); 


  6. filter: FlipH; 


  7. -ms-filter: "FlipH"; 





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.




  1. .rotate { 


  2. -webkit-transform: rotate(-90deg); 


  3. -moz-transform: rotate(-90deg); 


  4. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 





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




  1. a[href^="http://"] { /* válido para cualquier enlace */


  2. ... 




  3. a[href="http://google.com"] { /* enlace específico */


  4. ... 




  5. a[href^="/"], a[href^=".."] { /* para enlaces relativos internos */


  6. ... 




  7. a[href^="mailto:"] { /* correo electrónico */


  8. ... 




  9. a[href$=".pdf"] { /* según su extensión -.pdf, .zip, .doc, .mp3, etc... */


  10. ... 





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.




  1. .contenedor { 


  2. position: absolute; 


  3. top: 50%; 


  4. left: 50%; 


  5. width: 500px; 


  6. height: 300px; 


  7. margin-top: -150px; /* 1/2 del elemento height*/


  8. margin-left: -250px; /* 1/2 del elemento width */





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




  1. .sombra { 


  2. -moz-box-shadow:inset 0 0 10px #000000; 


  3. -webkit-box-shadow:inset 0 0 10px #000000; 


  4. box-shadow:inset 0 0 10px #000000; 


  5. }



Vía cssblog

¡Síguenos en Twitter!


Deja tu comentario