Las novedades de CSS 3 (I) - Nobbot

Las novedades de CSS 3 (I)

CSS 3Aunque sorprendentemente aún quedan defensores de la vieja guardia de las tablas, el pulso del diseño web hoy en día se mide en base a las hojas de estilos y el estándar que las define: CSS. Si alguna vez te has animado a “retocar” alguna web, te habrás cruzado con este lenguaje sencillo, flexible y totalmente abierto a la creatividad de cada uno.

Sin embargo, los años no pasan en balde para nadie, y el estándar empieza a necesitar un lavado de cara que lo adapte a los tiempos que corren. Dicha actualización llegará con CSS 3, la nueva generación que aportará multitud de recursos nuevos a los diseñadores, ampliando así las posibilidades estéticas de la web. Muchos de estos avances ya se emplean en algunos sitios, aunque obviamente no los soportan todos los navegadores. ¿Quieres conocerlos y saber lo que darán de sí? Aquí va la primera entrega de novedades que traerá consigo:

  • Bordes redondeados: Tradicionalmente, cuando queríamos aplicar esquinas redondeadas a nuestros diseños teníamos que recurrir a imágenes de fondo que simularan el efecto, con todos los inconvenientes que ello conlleva. Esta inclusión hará que con unas pocas líneas de código, cualquier elemento de nuestra página luzca unos bellos bordes redondeados. Así aplicaríamos un borde de 5 píxeles de radio a todas las esquinas de un elemento:

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    Y así lo haríamos si quisiéramos añadir diferentes valores a distintas esquinas:

    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 10px;

    Los añadidos “-moz-” y “-webkit-” sirven para que la propiedad funcione en Firefox y navegadores con WebKit (Safari y Chrome). Es una de las novedades más conocidas, y de hecho podemos verla en sitios tan populares como Twitter, cuyas esquinas se muestran redondeadas únicamente en navegadores que soporten este estándar.

    Twitter

  • Transparencias: Al igual que con los bordes redondeados, la única forma que hasta ahora teníamos de incluir transparencias en nuestras webs era mediante imágenes, en este caso empleando archivos PNG. Con CSS 3 será mucho más fácil, gracias al empleo de una propiedad que nos permitirá ajustar el nivel de transparencia para el color de cualquier elemento. Veamos cómo se haría:

    color: #000;
    opacity:0.5;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;

    De esta forma, obtendremos un elemento negro con la transparencia reducida a la mitad, permitiendo así mostrar parte de lo que haya tras él. La comodidad que aporta esta solución está fuera de toda duda, así como lo vistoso de sus resultados, que pueden apreciarse en todos los navegadores modernos.

    Transparencia

  • Usa cualquier fuente: Esta es una de mis novedades favoritas, y bien usada hará que Internet luzca más vistoso que nunca… aunque mal empleada puede llegar a ser un atentado para el buen gusto. Básicamente, con esta propiedad se pondrá fin al uso de las fuentes básicas para navegación web (Arial, Verdana, Times, etc.), pudiendo emplearse cualquiera. Lo conseguimos de esta forma:

    @font-face {
    font-family:'MEgalopolis Extra';
    src: url('/archivos/MEgalopolisExtra.otf') format('opentype');}

    La idea es que el visitante reciba la fuente almacenada en el directorio que le indiquemos mediante el “src”, para que de esta forma pueda visualizar la tipografía de nuestra web tal y como nosotros siempre la imaginamos. Una propiedad ya disponible en todos los navegadores decentes, así como en Internet Explorer 7 empleando unos cuantos trucos para ello.

    Font-face

Por su condición de estándar aún no finalizado, hay que tener en cuenta a la hora de usar estas propiedades que muchos de nuestros visitantes no podrán apreciarlas, en función del navegador con el que lleguen a nosotros. En cualquier caso, se trata de un goloso bocado al futuro que ya podemos ir paladeando, y del cual os iremos mostrando más novedades en otros artículos.

  • Lo de las tipografías puede dar lugar a unos bodrios alucinantes. Históricamente, se han usado fuentes “seguras”, es decir, que se sabe que están instaladas en todos los sistemas operativos (Arial, Trebuchet, Times, Verdana, etc…). Eso ha limitado la libertad de diseño, pero a la vez nos ha salvado de ver fuentes ilegibles por toda la web…

  • Por eso decía lo de que ” mal empleada puede llegar a ser un atentado para el buen gusto”. Míralo por el lado bueno, con suerte será un nuevo paso hacia la desaparición de la Comic Sans xD

  • matork

    noooo, no porfavor no, no quiero que llegue el dia en que suceda eso!!!! ver fuentes feas por todas las paginas, ya me lo imagino y si pasar. por que hay muuuuuuuuuuuuuucha gente que le ENCANTA usar fuentes ilegibles 🙁