CSS3 HTML5

Los nuevos estándares para el diseño y desarrollo web y Móvil

Capacitación HTML5

10 excelentes ejemplos de uso de CSS3

| 8 Comentarios

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. Dock estilo Mac OSX creado utilizando CSS3.
Ejemplo: http://michaelhue.com/cssdock/
Post original del autor: http://michaelhue.tumblr.com/post/1464232656/cssdock

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. Muy buenos botones con efectos CSS3 y colores RGBA
Ejemplo: http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html
Explicación del código: www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

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

Autor: Damián

Escribió cuatro libros, relacionados con sistemas operativos, hardware y desarrollo web, entre ellos se destaca Webmaster Profesional (editado en el año 2009) y HTML 5 – Entienda el cambio, aproveche su potencial lanzado en el 2011 en formato papel y en el 2012 en versión ebook. Se ha desempeñado como editor de libros relacionados con informática. Ha realizado trabajos de edición en la revista Users Digital Design, para la cual participa también escribiendo notas sobre diseño y desarrollo web. Ha colaborado como autor en la revista Dr. Max, Phone Users y en diversas colecciones de fascículos (Universo PC y 1000 Ideas PC, entre otras). Escribe contenidos para diversos medios online, incluyendo el sitio RedUSERS.com. Es consultor y especialista en desarrollo web, con amplio conocimiento en HTML, CSS, AJAX, PHP y Bases de datos. En la actualidad se destaca su trabajo en la preparación de contenidos relacionados con CSS3 y HTML5. Es profesor y dicta curso de HTML5 y clases en la Carrera de Programador Web en el Instituto IT Master Professional Training, en Buenos Aires (Argentina).