CSS Paper Bird
21 de Enero del 2010(versión en castellano abajo)
In this experiment I took a serie of paper bird (crane) photos with different illumination positions I did some time ago, and I’ve created a pure CSS effect - without Javacript - to show them one by one depending on the scrollbars positions.
Please, drag the thumbs/sliders along the tracks to see the effect.
I’ve tried the effect and it works in IE8, Safari 4, Firefox 3.5, Chrome 3, Opera 10 and the code validates. It doesn’t work in IE6.
Castellano
En este experimento he usado una serie de fotos a una pajarita de papel con diferentes posiciones de iluminación que hice hace tiempo, y he creado este efecto CSS puro (sin Javascript) que muestra las imágenes de una en una dependiendo de la posición de las barras de desplazamiento.
Arrastra los deslizadores de las barras de desplazamiento para ver el efecto.
Lo he probado y funciona en los navegadores actuales y el código valida. No funciona en IE6.
Cool effect :D
me gusta esa actitud, el que tiene IE6 que se curta!
jaja
Saludos, muy bueno el efecto, me gusto.
Que guay este efecto también podría estar bien en una foto al atardecer (ver la distinta iluminación del sol reflejada en un edificio por ejemplo.)
Podriamos quedar para hacer algunas fotillos un dia que te apetezca si ves qla idea puede ser buena, ya me dices
Chao!
Hola Román déjame felicitarte, realmente eres un bárbaro para CSS, Saludos..
[…] CSS Paper Bird […]
Gurú del CSS.
Muy Impresionante.
Marvelous. Keep it up.
Lovely. Great demonstration of what can be done with CSS.
Look! A ducky!
Muy bueno roman, espero algún día llegar a tener el nivel que tienes e incluso competir contigo. dios te bendiga, bytes
que bueno esta eso, impresionante, y como decimos aqui en guatemala, está “chilero” (bonito)
está buenísimo, impresionante!!!!! lo mejor que he visto, felicidades, y como decimos aquí en Guatemala está “chilero”
Fantastic!
Demasiado bueno, te la comistes DIOS TE CONTINUE BENDICIENDO
Mil veces felicidades. No tenia idea de la potencia del CSS.
Enlazo a mi blog sobre tu ejemplo.
Fuerza yy una ves más mil felicidades
Este es el link de tu ejemplo en mi blog. http://proyectosbeta.blogspot.com/2010/01/ejemplo-de-las-maravillas-del-css.html
saludos
Realmente sorprendente, te seguiré a partir de ahora, me interesa explotar en lo posible las posibilidades de css en cuanto a eventos de ratón se refiere, saludos!
Maravilloso, no conocia el verdadero poder de css. sigue adelante y no olvides publicar las novedades en tu blog. ;)
Rock and roll, man. That is too cool!
[…] 02:16H · Topics: CSS · Print After doing the CSS Paper Bird effect, I found out that by a combination of the CSS1 properties background-attachment and […]
[…] Román Cortés, el creador de Homer CSS, Pacman en CSS y Meninas 3D en CSS, nos ha querido deleitar con otra de sus creaciones. Esta vez se trata de una pajarita de papel que, dependiendo de la posición de las barras de desplazamiento, muestra distintos grados de iluminación, mostrando de una en una (CSS Sprites). El efecto está creado únicamente con CSS (sin Javascript) funciona en la mayoría de los navegadores actuales menos en IE6. El efecto se muestra a continuación: […]
simplemente ESPECTACULAR!!! ese metodo, sos un maestro del CSS felicidades!!!
[…] Pájarita de papel en CSSwww.romancortes.com/blog/css-paper-bird/ enviado por Facso […]
[…] doing the CSS Paper Bird effect, I found out that by a combination of the CSS1 properties background-attachment and […]
[…] ver este excelente trabajo en su blog, donde publico otras cosas muy interesantes como este efecto de luz en las imágenes, también realizado únicamente con […]
Me quedé sorprendido por la idea.
Es una gran inspiración.
—————————-
I was amazed at the idea.
It is a great inspiration.
sehr gute arbeit, echt nicht schlecht
[…] Enlace | Pajarita CSS […]
[…] which I also embedded here below in an iframe. If you like this one Román also shows a paper bird with different illumination effects by using […]
[…] http://www.romancortes.com/blog/css-paper-bird/ […]
Señores y señoras, el css tambien es arte, e aquí un ejemplo! BRavo Román!