10 excelentes ejemplos de uso de CSS3

Las técnicas relacionadas con  CSS3 son cada vez más populares en Internet. Su uso está cada vez más extendidos en sitios web y hay muchos creativos que están experimentando hasta donde se puede llegar con esta técnica que promte revolucionar la manera en que se diseña en Internet.

Recorriendo la web, podemos maravillarnos con diferentes ejemplos de inspiración, creatividad e inventiva.

A continuación veremos 10 excelentes ejemplos de uso de CSS3.

1. Un reloj análogo en CSS3.
Ejemplo: http://www.paulrhayes.com/experiments/clock/#clock
Explicación del código: www.paulrhayes.com/2009-03/an-analogue-clock-using-only-css

2. Fotos con estilo polaroid utilizando CSS3.
Ejemplo: http://www.zurb.com/playground/css3-polaroids/
Explicación del código: http://www.zurb.com/article/305/easily-turn-your-images-into-polaroids-wi

3. Cartas que se apilan con CSS3.
Ejemplo: http://designlovr.com/examples/dynamic_stack_of_index_cards/
Explicación del código: http://designlovr.com/use-css3-to-create-a-dynamic-stack-of-index-cards/

4. Creando cubos (y animándolos) con las posibilidades 3D de CSS3.
Ejemplo: http://www.paulrhayes.com/experiments/cube/multiCubes.html
Explicación del código: http://www.paulrhayes.com/2009-04/3d-cube-using-css-transformations/

5. Filtro para las imágenes con CSS.
Ejemplos: http://www.cssportal.com/css-image-filters/ (para ver el código se debe hacer click sobre las imágenes que tienen filtro en los ejemplos y se mostrará el estilo de cada caso en una ventana modal)

6. Globos de diálogo con CSS3
Ejemplo: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
Explicación del código: http://nicolasgallagher.com/pure-css-speech-bubbles/

7. DropDown Menú con CSS3.
Ejemplo: http://www.webdesignerwall.com/demo/css3-dropdown-menu/
Explicación del código: http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/

8. Animaciones usando transformaciones
Ejemplo y código: http://www.the-art-of-web.com/css/css-animation/

9. Efectos de sombra en texto. Un excelente trabajo realizado utilizando grises.
Ejemplo: http://line25.com/wp-content/uploads/2009/letterpress/demo/demo.html
Explicación del código: http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow

10. Asombrosos efectos de Overlay y uso de bordes de imágenes con CSS3
Ejemplo y explicación del código: http://www.zurb.com/playground/awesome-overlays

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.