viernes, 18 de noviembre de 2011

Catálogo visual de propiedades CSS3 y JavaScript para profesionales web

En esta entrada voy a catalogar (para mi propio uso y el de todos) las cosas que pueden hacerse en diseño web con dos herramientas: CSS3 y JavaScript. Gracias a unos intrépidos desarrolladores, que han creado un par de fantásticas herramientas web de prueba, puede apreciarse rápidamente la potencialidad de ambos complementos del puro y llano HTML. Por si fuera poco, una de ellas nos dará además el código necesario.

 

Ejemplos prácticos de 39 propiedades CSS3

 

En primer lugar, vamos con las hojas de estilo CSS3. Aún presentan problemas de compatibilidad en los diferentes navegadores (que para variar no las mostrarán de la misma manera, si es que llegan a mostrarlas...). Sin embargo si se está leyendo esto desde un navegador Firefox actualizado, IE9 o similar podrá apreciarse bastante bien lo que un diseñador web puede llegar a conseguir simplemente mediante estilos CSS3 (eso sí, más le valdrá a dicho diseñador probar su código con todos y cada uno de los navegadores, por si acaso).

 

La diseñadora web Lea Verou ha creado un fantástico "mini-site" para mostrar esto de lo que estoy hablando. En él ha aplicado las diferentes propiedades CSS3 a unos sencillos cuadros, de forma que al pasar el ratón sobre ellos muestran una propiedad en particular. Al mismo tiempo, la propia web evidencia que las hojas de estilo pueden emplearse para hacer transiciones. Os recomiendo que visitéis su creación, fantástico catálogo del uso de CSS3.

 

Aspecto de la web Animatable, ejemplo de uso de CSS3Animatable: ejemplo de uso de CSS3

 

Ejemplos prácticos de 19 propiedades o usos de JavaScript

 

Pasemos a JavaScript. Por supuesto estamos aquí ante un lenguaje de programación, de forma que su capacidad es muy amplia y variada, e incluso difícil de cuantificar. No obstante, algunas de sus propiedades (o usos estéticos, más propiamente) son especialmente populares desde hace años en el diseño y construcción web en general. Y aquí es dónde otro autor, en este caso desarrollador web, ha creado un pequeño "site" para mostrar estos usos.

 

Nota: Desgraciadamente esta herramienta ha dejado de funcionar :( Una lástima pues era excelente. Si algún visitante que lea esto conoce una herramienta alternativa, por favor que deje un comentario.

 

Aspecto de la web AboutJs, que muestra propiedades JavaScriptAboutJs: ejemplo de usos de JavaScript que facilita además los códigos. YA NO FUNCIONA :( La web está offline.

Artículos relacionados: