Ian Hanson (@teapoted), es un diseñador y desarrollador web londinense que ha creado y compartido un muy funcional slider de contenidos hecho completamente con CSS3, y nada de JavaScript.

Este slider funciona como cualquier otro script similar hecho con ayuda de JavaScript, lo mejor de todo es que es sensible al dispositivo desde donde se visualice, adaptándose automáticamente a la pantalla de este.

Al estar hecho íntegramente con CSS3, es compatible con todos los navegadores modernos.

Este slider tiene un pequeño problema de compatibilidad con los dispositivos iOS (iPod Touch, iPhone y iPad) que no manejan adecuadamente las etiquetas <label>, para ello, el creador ha añadido un pequeño fix en JavaScript que corrige este problema.

Nota: No hay archivos disponibles para descarga, de modo que si deseas probar el slider en tu página, tendrás que guiarte mirando directamente el código fuente.

Enlace: Responsive CSS3 Slider

Una excelente recopilación la que han hecho en Smashing Apps, se trata de 43 tutoriales y técnicas CSS3, donde nos muestrán cómo aplicar las nuevas técnicas incluídas en el nuevo y cada vez más utilizado CSS3.

Lo interesante de usar CSS3 es que para muchos casos, ya no es necesario echar mano de JavaScript para realizar algunos efectos, como desenfoques, transiciones, animaciones, etc. Aquí les dejo tres tutoriales de ejemplo:

1. Cómo crear un menú desplegable con sólo CSS3


2. Personalizar formularios web con CSS3 y Webkit


3. Cómo crear un menú circular con CSS3


Enlace: Showcase Of Useful CSS3 Tutorials And Techniques

BluCSS es un framework CSS útil para maquetar páginas web, con él podemos empezar a crear nuestros layouts en 4 plataformas diferentes: escritorio (monitores de gran resolución), portátiles, tablets y móviles.

Por defecto, viene con un contenedor principal de 1000px (que se puede modificar a cualquier tamaño) y tiene un grid de 10 columnas, cada una con un ancho especificado en porcentajes para un ajuste automático cuando varíe la resolución de la pantalla.

BluCSS incluye estilos básicos para empezar, y que puedes ver en esta demo.

Enlace: BluCSS

DesignMag ha hecho una interesante recopilación de 30 tutoriales de CSS3, bastante útiles para diseñadores y desarrolladores web. En esta lista encontramos por ejemplo, tutoriales para crear menús desplegables, navegación por tabs, transición de imágenes, animaciones, etc.

Aquí les dejo tres ejemplos:

1. Creando una web con HTML5 y CSS3


2. Creando un menú circular


3. Transiciones usando fallbacks de jQuery


Enlace: 30 Excellent CSS3 Tutorials

Desde hace algunos años, el uso de degradados en diseño web se ha hecho muy popular, son muchos los diseñadores que usan estos efectos para darle un toque más atractivo a sus trabajos.

Lo más común por ejemplo, es utilizar una imagen de fondo con dos o más colores en degradado y con pocos pixels de ancho para luego, mediante CSS hacer que se repita para dar la impresión de que se trata de una sola imagen.

Bueno, desde que CSS3 se ha empezado a popularizar entre los diseñadores, el uso de imágenes con degradado ha ido dejándose para dar paso a realizarlo directamente con las nuevas propiedades que nos ofrece CSS3, y un claro ejemplo es la imagen que inicia esta entrada, pero para que esto funcione se necesita contar con alguno de estos navegadores: Opera 11.10+, Firefox 3.6+, Safari 5.03+ o Chrome 7+.

En Dev.Opera han preparado una completa guía (en inglés) que nos enseña de forma detallada cómo hacer degradados lineales con CSS3, podremos ver desde degradados transparentes, ángulo de inclinación de los degradados, repetición de degradados lineales y varios ejemplos prácticos.

Enlace: CSS3 linear gradients

CSS3 Menu es una aplicación gratuita que nos permite crear atractivos menús de navegación utilizando CSS3 y sin la necesidad de usar JavaScript.

CSS3 Menu viene en versiones para Windows y Mac OS X, los menús se generan en una lista ya sea vertical u horizontal, y podemos incluir varios submenús. También incluye templates y una vista previa, que nos permite ir visualizando cómo va quedando nuestro menú.

Enlace: CSS3 Menu

Actualmente se ha vuelto muy popular utilizar efectos de texto en Diseño Web, que ha simple vista pareciera que se ha echado mano de Javascript para lograr efectos como sombras, degradados, relieves, rotación, etc. Pero sólo se ha usado CSS.

En 1st Web Designer nos traen una recopilación de 22 tutoriales para lograr efectos de texto avanzados usando sólo CSS, con lo que podremos darle a nuestros diseños un aspecto más atractivo, aquí les pondré tres ejemplos:

1. Rotación de texto


2. Texto con efecto de degradado


3. Texto con efecto de relieve


Enlace: 22 Advanced CSS Text Effects And Web Typography Tips

En Six Revisions han hecho una excelente y bastante útil recopilación de 30 técnicas de navegación utilizando CSS, que nos podrán servir de base para nuestros proyectos.

Enlace: 30 Exceptional CSS Navigation Techniques

Para aquellos usuarios que se están iniciando en el mundo del diseño y desarrollo web, deberán saber que una de las principales herramientas que deben tener en cuenta es el CSS, lenguaje con el que definiremos la estructura de nuestras páginas.

En Hongkiat ofrecen una recopilación de 20 tips CSS ideal para principiantes, con los que podrás aprender a manejar con mayor facilidad este lenguaje.

Enlace: 20 Useful CSS Tips For Beginners

En más de una oportunidad cuando nos encontramos realizando algún diseño web (Front-end) habrán situaciones en las que necesitaremos algo de ayuda con el CSS para que nuestro diseño se vea perfectamente en los navegadores más utilizados, sobretodo en el odioso IE6.

En Vandelay Design nos proporcionan 10 recursos CSS realmente útiles que nos vendrán de maravilla para realizar un buen trabajo. Ahí podemos encontrar tutoriales, chuletas, trucos y demás cosas que no serán de gran utilidad.

Enlace: 10 Resources for When You Need Help with CSS