click for the demo
Usage: click on the picture to see it in full screen, click on the close button to go back to the gallery.
The CSS3 animation re-orders the scene with a funny eye-catching animation.
As it is CSS3 animation it works properly only in Chrome and more-or-less in Opera 10.60 (and maybe on Safari - I have not tested it) and "degrades gracefully" in other browsers. Or at least it should do ... Internet Explorer seems to hate it.
Usage: click on the picture to see it in full screen, click on the close button to go back to the gallery.
The CSS3 animation re-orders the scene with a funny eye-catching animation.
As it is CSS3 animation it works properly only in Chrome and more-or-less in Opera 10.60 (and maybe on Safari - I have not tested it) and "degrades gracefully" in other browsers. Or at least it should do ... Internet Explorer seems to hate it.
I think it is high time to look around and get some CSS3 skills. There must be something mystic in rounded borders that attracts all the folks out there so badly. Something that I do not understand ... Never mind, I will find it out some day for I love to learn. Anyways - everybody does this - I should be the exception..? No :-)
This experiment is devoted to the gory
details of CSS3 pseudo-selectors, smooth transitions and rounded borders.
Well, then let me collect the lessons I learnt:
- I learnt how to withdraw the style elements added by ":target". In this example ":target" sets then picture-frame div to full screen size, place it to the top-left corner and gives a big z-index to lift it to the uppermost layer. Well, they get withdrawn immediately when the next link gets clicked :-)
- Problem with Firefox: weird but true, Firefox does not understand "E:active". I had some success with "E :active" mind the space in front of the ":". Is it really true? Was it me who missed something?
- Problem with Opera 10.60: it garbles the gallery background after the enlarged image goes back to it's original place. It sometimes even duplicates the div - along with the image tag in it - and leaves the big one hanging in the background. All is restored however if I minimize or resize the Opera window then restore it :-(.
- Problem with Opera 10.60: Growing box shadow is not animated so nicely than in Chrome. Opera simply drops a shadow and enlarges it somewhat. Chrome starts with no shadow then let the shadow grow up smoothly as it would be a shadow of a real object rising up from the floor.
- Problem with Opera 10.60: I cannot set "border-radius: ...px" on an "img" tag in the way like on a "div" tag. Internet say there is some workaround with border color. Hm...
- Opera and Konqueror do well, but Firefox is still a headache. Not to mention it's practice of setting a dotted frame around the linked images..