Another Post

x o _

Yes this can actually be used as a WordPress theme! Cool, eh? :)

FirefoxLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Comments are closed.

Welcome!

x o _

This is a demonstration of what is possible with CSS3 and jQuery. These Windows 7 windows are made by only using the latest CSS3 effects such as border-radius, rgba, box-shadow, text-shadow and gradients. So far this page is only supported by the latest version of Firefox (3.6+).

Try to zoom in and you’ll notice that theres no loss of quality except for the pixel graphics such as the Firefox favicon and the ‘X’ on the closing button.

In addition to that, you can dragg, resize and maximize the windows, just like “real” ones. Have fun!

Download Example

To-Do-List:

  • Maximizing windows (doubleclick on titlebar) ✔
  • Maximize Button ✔
  • Minimizing windows
  • Minimize Button ✔
  • Focus model for windows ✔
  • Connect windows with tasks in Taskbar
  • Make it cross-browser compatible
  • Start-Menu
  • Anything else? Make a suggestion!

21 Comments on “Welcome!”

Trackback URL

  1. Jack Sparrow says: 19.03.2012

    Sorry. I was so astonished with the girl I forgot to tell you how much this site rocks. Nice code :)

  2. Lukas Bestle says: 17.03.2012

    Kleine Feature-Idee: Markieren verhindern! Hier das CSS dafür, das kannst du so einpflegen:

    * {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    }
    .focus_win .window_inner *{
    -moz-user-select: all;
    -webkit-user-select: text;
    user-select: all;
    }

  3. Jack Sparrow says: 16.03.2012

    100% of nerds visiting this site didn’t notice the wallpaper ;)

    BTW: Who is she?

  4. Lukas Bestle says: 13.03.2012

    Gibt es genau (!) dieses Beispiel auch zum Download? Nein, nicht das ähnliche Beispiel…

    • Norman says: 16.03.2012

      Hi, ich hab mal oben im Artikel einen Downloadlink eingefpgt. Viel Spaß damit! :)

  5. Refardo Gelora says: 27.01.2012

    wow
    this is very great!
    good job!
    =D

  6. Mark Adamson says: 23.01.2012

    works well in chrome. I’m on version 18

  7. kelly says: 21.09.2011

    danke norman, mache ich. lg kelly

  8. kelly says: 14.09.2011

    es gefällt mir ausgezeichnet. beim nachbauen mit 2 fenstern weiß ich nicht was ich für einen befehl bei “stack” eingeben muss, dass das aktive fenster immer im vordergrund ist. kann mir jemand einen tipp geben? habe chrome als browser (windows vista)

  9. Mihai says: 27.09.2010

    Sugestion:
    Icons

  10. Mihai says: 25.09.2010

    hmm… after submitting a comment works in Chrome

  11. Mihai says: 25.09.2010

    hi, Norman, is there a way to make it more compatible with Chrome or IE, for me it only works in Firefox

  12. Flo says: 11.06.2010

    Hallo Norman,

    ich habe tatsächlich eine fast ähnliche Optik gebastelt…dabei habe ich auch versucht die “reflection”-Geschichten in der Titlebar zu erstellen (zumindest im FF):
    background: -moz-repeating-linear-gradient(
    top left 45deg,
    rgba(255,255,255,0.35),
    rgba(245,245,245,0.65) 80px,
    rgba(255,255,255,0.35) 160px
    );

  13. ryan says: 16.05.2010

    This is very awesome, is there code available?

    • Norman says: 18.05.2010

      hey ryan, you can get the source code of a similar example here or here its written by me and although its in german you should be able to read the code ;)

  14. Barta Tamás says: 14.05.2010

    I like it.
    However I would never use it for blogging, but it’s quite instructive.

  15. Oskar says: 07.04.2010

    Pretty cool!

  16. Felix says: 24.03.2010

    suggestion:
    - reflections on taskbar + titlebars
    - different orbs for hover and open state
    - Aero Snap (dragging windows to the left, right, top for snapping, dragging maximized windows for restoring)
    - better hover state for task buttons

Start