14 Herramientas de CSS3 y HTML5 Muy Útiles

Cada día son más los diseñadores y desarrolladores web que apuestan por HTML5 y CSS3, pues ofrecen muchas ventajas sobre sus predecesores a la hora de enriquecer los diseños. Desde el canvas de vídeo de HTML5 hasta las propiedades de sombreado de CSS3, estos lenguajes sólo nos traen que oportunidades para crear un diseño web más atractivo a los ojos del usuario y más semántico para los buscadores.

En este artículo encontrarás una colección de herramientas de CSS3 y HTML5 que te facilitarán enormemente tu trabajo como profesional del diseño web. Veremos herramientas y frameworks que nos ayudarán a sacar el máximo partido de HTML5 y CSS3. También puede interesarte el artículo de 15 frameworks para desarrollo web.

Herramientas y frameworks de HTML5

HTML5 Boilerplate

Esta herramienta de HTML5 es la que a mí personalmente me resulta más útil, se actualiza de manera regular y que nos permite descargar diferentes versiones: con comentarios, sin comentarios o personalizada a nuestras necesidades. Al utilizar Modernizr las páginas web creadas con HTML5 Boilerplate se ven correctamente incluso en navegadores que no dan soporte a HTML5 y CSS3.

52framework

Tal y como su nombre bien indica, se trata de un framework para trabajar con HTML5, CSS3 y JavaScript. Incluye casi todo lo que te puedas imaginar: canvas de vídeo, validación de formularios, selectores de CSS3, grid, etc. Tienes disponibles varias demos para ver si se ajusta a tus necesidades antes de descargarlo.Este framework está recomendado por Smashing Magazine, por lo que vale la pena tenerlo en cuenta.

G5 Framework

Este framework es compatible con todos los navegadores populares y da soporte a HTML5, CSS3, PHP y jQuery, por lo que es una herramienta muy potente para los desarrolladores web. Este framework empezó como un proyecto personal que ha ido creciendo y que ahora nos ofrece muchos recursos.

Lime.js

Lime.js es un framework para desarrollo de juegos con HTML5 tanto para desktop como para dispositivos táctiles. Tiene muy buena documentación en inglés, por lo que si quieres desarrollar juegos con HTML5, este framework puede ser una buena opción.

Modernizr

Modernizr es una librería JavaScript open source que permite que HTML5 y CSS3 se muestre correctamente en navegadores antiguos que no dan soporte a estos lenguajes. Es muy fácil de usar y hay una amplia documentación online para aquellos que quieran saber más sobre su funcionamiento.

Herramientas para CSS3

Algunas de estas herramientas ya las vimos en el artículo de 5 herramientas excelentes de CSS3 para el diseño web

Selectivizr – Selectores CSS3

Selectivizr es una utilidad de JavaScript que emula las pseudoclases de CSS3 así como los selectores CSS3 en Internet Explorer 6-8. Es tan fácil como incluir el script en las páginas web y Selectivzr hace el resto.

CSS3 Please

El concepto es simple, salen las propiedades de CSS3 con valores predeterminados, que se pueden editar y modificar. Al editar el código la misma página web se actualiza ella sola como por arte de magia, mostrando las propiedades editadas.

CSSPrefixer

¿Odias los prefijos de los diferentes navegadores como -webkit, -moz, etc.? Entonces debes conocer esta herramienta, que te genera los prefijos de los diferentes navegadores cuando le das al botón “process”.

When can I use…

Esta herramienta no sólo es útil para CSS3, sino también para HTML5, archivos SVG, la API de JS, etc. El funcionamiento es muy simple, seleccionas la propiedad que te interesa y te muestra en que navegadores está implementada y en cuáles no.

Ceaser CSS Easing Animation Tool

Las transiciones de CSS3 ofrecen un amplio abanico de posibilidades, lo que la mayoría de nosotros nos quedamos con las transiciones lineales y poco más. Esta herramienta te facilita muchísimo el crear transiciones con CSS3, imprescindible si quieres implementar resultados increíbles!

CSSDesk

De todas las herramientas, ésta diría que es la más sencilla. Lo bueno que tiene es que te permite ver los resultados de manera inmediata en su página. Tiene un editor HTML y uno CSS donde puedes insertar el código que te interesa y ver los efectos en el panel lateral derecho.

Generador de código CSS3 para animaciones

Tú sólo pones los parámetros y el sistema te genera el código que puedes probar online.

Generador de gradientes de CSS3

No puede ser más fácil el crear un gradiente que con esta herramienta. Tu te limitas a especificar los parámetros y el sistema te genera el código.

Generador de sombra de CSS3

Intuitivo y fácil de usar, pues ves los resultados en el ejemplo que aparece en la pantalla. Tú te limitas a probar y el sistema te genera de manera automática el código.

¿Conoces alguna otra herramienta que te sea útil? ¿Te ha gustado el artículo? Deja un comentario.