110011010010111101

¡Firefox 3.6 soporta CSS3!

El día 21 de enero se lanzó la versión 3.6 de Firefox con múltiples mejoras de las cuales cabe destacar:
  • Implementación de los nuevos atributos CSS3, que veremos en este post.
  • Nuevo sistema de temas llamado Personas. ¡Ahora cambiar de tema en Firefox es tan rápido como un click, sin instalaciones ni necesidad de reiniciar! (Recomendado)
  • Rendimiento mejorado de JavaScript.
  • Implementación de HTML5 y las nuevas especificaciones DOM.

Veamos un poco más a fondo las nuevas propiedades CSS3 soportadas.
Dificultad:


Atención
Sólo funcionarán bajo Firefox 3.6. Cualquier usuario con otra versión u otro navegador, no podrá ver estos efectos.


Multiples Backgrounds
Si no es la que más, es de las mejores implementaciones que han podido hacer. Se trata de poder combinar diversos backgrounds en un mismo elemento. ¡Se acabó el tener que photoshopear para tener un background en concreto!

Su funcionamiento es muy simple:
   .myclass {  
      background: background1, background2, ..., backgroundN;  
   }  
También se pueden emplear otros atributos de CSS backgrounds:
   .myclass {  
      background: background1, background2, ..., backgroundN;  
      background-repeat: no-repeat, repeat-x, ..., no-repeat;  
      background-position: center, top right, ..., top left;  
   }  

Nota
El orden de los backrounds es importante! El orden de aparición es el orden de “altura” que recibe el background: cuanto antes aparezca, más “arriba” aparecerá renderizado.

Nota
En caso de emplear más de un background, las propiedades asociadas deben seguir el mismo orden que los background.

Podemos ver un ejemplo a continuación. Se ha empleado una imagen como fondo y una imagen de la manzana de Apple, que se ha superpuesto mediante CSS.



CapturaDemostración real
multibg.png
 


Gradientes
Implementación de gradientes (lineales, radiales, angulares…) gracias a CSS3. Muy útil, sobretodo para fondos o degradados sobre una imagen.

Funciona de la siguiente manera:
   .myclass {  
      background: -moz-linear-gradient(top, blue,white); 
   }  

El codigo anterior nos generaría algo así:

CapturaDemostración real
linear gradient
 

Ejemplo usando blanco con transparencia y el mismo background del ejemplo anterior, mezclando gradientes con multiple backgrounds

CapturaDemostración real
transparency
 


Bien, esto es un pequeño ejemplo de lo que se puede hacer. Por supuesto hay muchas más opciones nuevas en CSS3, pero creo que estas son las más destacables bajo mi punto de vista.

Os animo a aquellos que os interesa el diseño y desarrollo web que intentéis hacerlo vosotros, ya que es algo que se utilizará de ahora en adelante.

Por supuesto no dudéis en contactar, opinar, hacer sugerencias o realizar peticiones por si tenéis alguna cosilla que os interesaría saber o se os resiste.

Espero que este post sea de vuestro interés y aprendáis algo nuevo, intentaré mantener el ritmo… dentro de lo que me deje la Universidad

Y como conclusión y ya me despido, os animo a todos a que os bajéis el nuevo Firefox 3.6 y que le den por culo dejemos de lado a Internet Explorer, que es el peor navegador en curso.

Un saludo y hasta la próxima!

F.

Spread Firefox Affiliate Button

To Tumblr, Love Metalab