Si vais a emprender un nuevo proyecto web, y queréis deshaceros de todo, para desarrollarlo a mano, el primer paso -siempre- es hacerse con un buen reset.css. ¿De qué valen? En resumen, setean todos los elementos del DOM (la estructura html) con el mismo aspecto inicial, puesto que, generalmente, cada explorador (Chrome, Firefox, etc.) tiende a interpretarlo como le da la gana. Así que, para ganar consistencia y heterogeneidad en tus maquetaciones, te recomiendo que visites a este señor y descargues su trabajo: (descargar reset.css).

No sé si la nueva moda de los gradientes la puso en marcha el rediseño del logotipo de Instagram, o el de los iconos de iOS, pero lo que está claro es que los degradados vuelven a estar en boca -y en pantalla- de todos. En esta ocasión, tenemos la oportunidad de explorar infinitas posibilidades de ellos gracias a la galería de Gradient Magic y, lo que es mejor, descargar su código en CSS para usarlo en el diseño de nuestra web. Por supuesto, si no os gusta ninguno, podéis crear el vuestro a medida.

Últimamente estoy maquetando y he descubierto el sistema Grid de CSS. Me ha parecido tan maravilloso que me he sentido obligadísimo a compartirlo con vosotros. Os comentaría alguna de sus ventajas, fundamentos y peculiaridades, pero -la verdad- el manual que os disponéis a leer lo resume y explica todo con tal claridad que me lo reservo para que lo descubráis por vosotros mismos.

Si queréis maquetar como «Dios» manda, podéis empezar por aquí:

• Manual online Grid – Maquetación CSS

Cada vez utilizamos menos Javascript para hacer animaciones. CSS está conquistando, en este aspecto, más y más terreno. Las ventajas son evidentes: implica menos peso de descarga y mayor velocidad. Para aquellos que todavía no estéis familiarizados con las animaciones en CSS, no hay nada mejor que ver ejemplos prácticos de uso. En la siguiente página, disponéis de un extenso catálogo de casos: escalar, rotar, flips, slides, etc. y todos acompañados por su respectivo código CSS.

• Visitar Animista: Ejemplos de animación en CSS

¡Muchos habréis visto ya este efecto tan de moda! Se trata de ir desplegando (mediante animación o transición) elementos en el cuerpo de la Web mientras vamos haciendo scroll. Si queréis programar algo parecido, aquí os dejo Scroll Reveal. Un código, en Java Script, que os facilitará la tarea.

Una galería de plantillas HTML5 de descarga gratuita. Cabe destacar el buen gusto del diseño de las mismas y que todas son responsive / liquidas para una correcta y óptima visualización en dispositivos móviles.

– Visitar galería de plantillas HTML5 Gratis

Una Guía / Curso interesantísimo sobre todas las mejoras y nuevas características que nos trae CSS3. Es un libro PDF pensado, sobre todo, para aquellos que ya tienen conocimientos sobre CSS y HTML5 puesto que entra de lleno, y en exclusiva, sobre los añadidos CSS3.

Gratis, completo y en Español ¿Qué más se puede pedir?

– Descargar «Guía Completa de CSS3 / Curso CSS3»

Autor: Antonio Navajas.

Si eres desarrollador web / maquetador, te interesará saber que BrowserShots te permite visualizar tu Web hasta en 200 navegadores diferentes. Es gratis pero presenta el inconveniente de tener que esperar colas hasta de 30 minutos. Si no tienes mucha prisa, y te interesa conocer la compatibilidad de tu código HTML y CSS en diferentes navegadores, no dudes en visitarla.

Bonito y resultón efecto en Jquery para navegar por los contenidos de tu Web. Lo mejor es que lo puedes configurar a pantalla completa y el efecto ventana queda aún más impactante.

– Ver demo

– Descargar archivos

– Ver tutorial

Siempre he pensado que el futuro del diseño Web pasará por herramientas como esta y que la maquetación HTML y CSS3 será un código que pocos llegarán a escribir y entender a fondo. Mientras espero ese momento con gran ansiedad, os presento este plugin de photoshop que, aunque no hace el código de toda la Web, sí que nos facilita la ardua tarea de llevar a CSS botones con efectos de sombra, degradados, bordes, brillos, etc.

¡Y si no os parece útil, al menos echarle un vistazo porque es increíble lo que CSS3 puede llegar a hacer!

– Descargar Plugin / addon para Photoshop CSS3Ps