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
Muy buenos, te dejo algunos mas aqui para que le des un vistazo:
http://www.cristalab.com/tutoriales/dibujo-y-animacion-de-sharingan-con-css3-c106133l/
http://www.cristalab.com/tutoriales/dibujar-y-animar-mangekyou-sharingan-izuna-con-css3-c106154l/
http://www.cristalab.com/tutoriales/dibujar-y-animar-un-rinnegan-con-css3-c106178l/
Excelente pagina
Mucha gracias 🙂
Muchas gracias 😉
excelentes efectos gracias x compartir
Que buenas ideas!, saludos y gracias por compartir 🙂
EXCELENTE MUY BUENA INF. GRACIAS POR COMPARTIR