Me mudo

Este blog no recibirá ya más actualizaciones. Ve al nuevo blog enricflorit.com o averigua por qué me mudo.

lunes, 20 de agosto de 2012

5 características de CSS3 que ya deberías estar usando


Si tienes una web o quieres diseñar una, lo que ahora está de moda es HTML5. Porque ofrece muchas nuevas opciones, un diseño "fácil", todo el potencial de CSS3... Así que manos al código, y empieza ya a escribir webs con estos consejos:


  • Border-radius. Excepto IE 8 e inferior, todos tus visitantes veran unos bonitos bordes redondeados. No olvides usar los prefijos -moz- y -wekit-. Y además, tienes esto y esto que hará que los usuarios de Internet Explorer vean estos bordes.
  • Gradients. Los degradados son muy versátiles: botones, fondos... (en un futuro también bordes y texto). Pero no te compliques, existen herramientas muy buenas como colorzilla que te harán la vida muy fácil.
  • Box shadow. Añadir algo de sombreado a cualquier capa la hace más atractiva visualmente, tus diseños se verán más profesionales. Es tan simple como esto:
#div-id {
  background: #FFF;
  border: 1px black solid;
  -moz-box-shadow: 5px 5px 5px #888;
  -webkit-box-shadow: 5px 5px 5px #888;
}

Y también existe una solución (aunque algo compleja) para mostrar sombras en Internet Explorer: http://dev.opera.com/articles/view/cross-browser-box-shadows/


  • Fuentes (@font-face). Es muy curioso que esto esté soportado por el 92% de los usuarios, es decir, casi todos lo verán bien. Se trata de usar cualquier fuente de letra en tu página web. Aquí tienes un repositorio bastante grande de fuentes libres donde, además, te explican cómo usarlas.
  • Opacidad. La propiedad css opacity hará que cualquier elemento sea un tanto por ciento transparente, el que tu le indiques. Y además tienes soporte para IE! Aquí tienes el código:

.mi-estilo {
  filter: alpha(opacity=60);/* IE */
  -khtml-opacity: 0.6;/* KHTML, Safari antiguo */
  -moz-opacity: 0.6;/* Firefox antiguos */
  opacity: 0.6;/* Navegadores modernos */
}

Espero que podáis aprovechar al máximo estas nuevas funciones de css3 ;-).

Saludos!

No hay comentarios:

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...