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

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web y Mobile. 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 y herramientas para Desarrollo Web y móvil en modalidad online y presencial.

7 Comentarios en “10 excelentes ejemplos de uso de CSS3
  1. kHARIS dice:

    Excelente pagina

  2. fercho dice:

    excelentes efectos gracias x compartir

  3. Misael dice:

    Que buenas ideas!, saludos y gracias por compartir 🙂

  4. SAÚL dice:

    EXCELENTE MUY BUENA INF. GRACIAS POR COMPARTIR

1 Pings/Trackbacks para "10 excelentes ejemplos de uso de CSS3"
  1. […] This post was mentioned on Twitter by Cristian Eslava, juandoming. juandoming said: RT @ceslava: RT @damiande: 10 excelentes ejemplos de uso de CSS3 http://bit.ly/f2lyHb | #WebDesign […]

Responder a SAÚL Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*



Encontrame en las redes sociales. Contactame.