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 Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

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 […]

Deja un comentario

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

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.