CSS3 fun

CSS3 fun :target

This is just a little experiment to see if a window-like behavior could be achieved without any use of Javascript.

Here, the CSS3 pseudo-class :target to change the window stacking order, so the active window is the topmost window. Try clicking on one of the three first icons below, and if your browser supports :target, the appropriate window should light up.

This demo has been tested in Opera 9.50 Alpha 1, Mozilla (including Firefox), and Safari.

New: Now with draggable windows

I've made added a few lines of script that should enable you to drag the windows around to your own liking.

Since the windows are transparent, the performance is rather abysmal on slower computers, but I'm keeping it this way, since I just wanted to show that “it can be done”.

The script is 58 lines, with comments, and should be easy enough to understand if you're Javascript savvy.

Comments

If you want to contact me for whatever reason, read my about page.

If you have any questions specifically regarding this demonstration, ask in the blog entry related to this demo.

Recycle?

There have been several sources of inspirations for this little experiment:

If you wish to use the techniques on this page for whatever reason, you are free to do so without asking.