CSS Windows-Style Fenster

[Comu]

Hoi!

Brauchte das für ein eigenes meiner kleineren Projekte. Eventuell kann ja der ein oder andere damit was anfangen

Screenshot:

Spoiler:

Die komplette Box ist von der Breite und Höhe her anpassbar. Wird automatisch mitwachsen (kann man also auch per JavaScript resizable machen!).

Die Box an sich hab ich mit ein paar "Extras" ausgeschmückt. Dazu zählt das Icon, der Closed-Button sowie unten der blaue Bereich (Footer). Diese Teile sind im Code folgendermaßen beschrieben:

<!-- Icon -->
<div class="windowsBoxIcon"><img src="img/icon.png" alt="Icon" title="Icon"></div>

<!-- Button -->
<div class="closeButton">x</div>

<!-- Blauer Bereich unten (Footer) -->
<div class="footer"></div>

Diese kann man ohne Probleme rausnehmen. Die Box an sich wird dadurch nicht verändert.

win_window.rar

MfG

[Batzi]

It's HTML5/CSS3-based?

[Comu]

Oben das Menü wurde von Windows genommen (ohne Gradients), ebenfalls ein leichter transparenter Hintergrund bei dem äußeren Border da mit opacity das ganze noch etwas rumgespackt hat.

[Batzi]

Opacity? Hmm oke, Könnte man ja auch RGBA nutzen ^^
ich schaue es mir morgen mal an.

[Comu]

RGBA hab ich noch nie genutzt, werd ich auch mal einen Blick drauf werfen

[Batzi]

RGBA ist nichts anderes als Opcity..

RGBA ist halt ein Farbwert mit Alphatransparenz.

Wenn du folgendes nutzt:

background: #FFFFFF;
opacity: 0.5;

Ist es dasselbe wie:

background: rgba(255, 255, 255, 0.5);

Edit:
Hab's mir mal ebend angeschaut.
Hab nen vernünftiges Prog für'n Mac gefunden, der RAR-Archive entpackt ^^

Dein Zeugs hätte man komplett über CSS3 visualisieren können ^^Alles ohne grafiken (Gut, bis auf des Background-Image des "Desktops", obwohl des eig. auch über CSS gemacht werden "könnte".)

Edit 2:
Könnte man nen nettes jQuery-Plugin raus machen. Ich glaub des nehme ich mal im Angriff :-P
Hab nur jetzt keine Lust, da ich so oder so sehr ungern mit 'nem Mac progge.

[Batzi]

So, hab mich mal an einem kleinen jQuery-Plugin gesetzt ^^
Des "Moven" funzt zwar noch ned optimal, wenn man mit der Maus zu schnell ist, aber naja.. ^^

http://scripts.knugle.de/intern/jAero/

Und hier der Download-Link:
Download jAero_1.0.tgz

[Iron]

@Batzi

Und dazu noch das Icon von Chrome durch das jeweilige Browser-Icon verändern lassen mit php user Agent auslesen und falls nix brauchbares dabei ist, einfach irgend nen default Zeichen anzeigen lassen

[Batzi]

@Iron

Des Icon kann man selbst setzen
Dafür gibt es extra die Option "icon".

[Comu]

Naja, das moving klappt ja wohl noch nicht so ganz. Werd das mal in den jQuery Dialog einbinden.