Windows Fenster Design in CSS nachbauen

[singu]

Ich möchte gerne in HTML Windows Fenster nachbauen, dazu verwende ich CSS, aber wie bekomme ich sowas wie im Anhang hin.

 

[Imbericle]

Ich nehme an, dass du die runden Ecken meinst? Dafür unterstützen moderne gute Browser (Gegenteil von IE 6 ;) ) die Eigenschaft -moz-border-radius

Ansonsten, macht man es mit Bildern. Unter "runde Ecken CSS" findest du bei Google aber sicher genügend Anleitungen oder du guckst dir mit Firebug an wie Windoof es macht.

MfG

 

[Elroy]

Ich nehme an, dass du die runden Ecken meinst? Dafür unterstützen moderne gute Browser (Gegenteil von IE 6 ;) ) die Eigenschaft -moz-border-radius
MfG

Sagen wir der Firefox zeigt das an. Was ist mit den modernen guten Browsern wie IE9, Opera, Chrome?

Moderne gute Browser wie der Safari verstehen CSS3 und brauchen keine Krücke um border-radius darzustellen.

Gruss
Elroy

 

[singu]

Ich möcht schon gern bei dem Design im Anhang bleiben, das mit den runden Ecken kenn ich. Nur wie kann ich so ein Fenster in HTML mit CSS darstellen. Gibt es da irgendwelche Vorlagen?

 

[Imbericle]

Sagen wir der Firefox zeigt das an. Was ist mit den modernen guten Browsern wie IE9, Opera, Chrome?

Moderne gute Browser wie der Safari verstehen CSS3 und brauchen keine Krücke um border-radius darzustellen.

Gruss
Elroy

Da hast du natürlich Recht. Ich habe noch aus der Gewohnheit das CSS3 früher eh noch nicht unterstützt wurde auf die moz-Eigenschaft verlinkt.

Ich möcht schon gern bei dem Design im Anhang bleiben, das mit den runden Ecken kenn ich. Nur wie kann ich so ein Fenster in HTML mit CSS darstellen. Gibt es da irgendwelche Vorlagen?

Vorlagen gibt es, zum Beispiel die von mir verlinkte Seite Windoof.org Was is denn genau dein Problem, dass du nicht auf die Reihe bekommst, wenn du runde Ecken kennst, aber kein Fenster nachbauen kannst?

 

[USchi]

Hallo, 10 Jahre spaeter.
Mir geht es nicht um runde Ecken sondern allein darum:
Gibt es eine Loesung zur webbasierten Darstellung eines Windowsfensters, welches sich im Aussehen und bei der Benutzung (zB durch resize, drag and drop usw.) nicht von einem Windowsfenster unterscheidet?
Gruss

 

[basti1012]

Es wäre besser wenn du einen neuen Beitrag aufgemacht hättest.
Zu deiner Frage:
Klar geht das.
Das gibt es bestimmt auch schon fertig.
Notfalls selber bauen.Das ist ja nur HTML,CSS und JS und sollte man in einer Stunde locker nachbauen können.

 

[USchi]

Danke. In einer Stunde ist das sicher nicht drin. Allein fuer das Erkennen und Erfassen/Vermessen des Designs und der Funktionalitaeten bei 90% Abdeckung, wuerde ich fuer einen Profi mindestens drei volle Tage veranschlagen. Und dann beginnt das Coden erst. Falls ich nichts Brauchbares finde, werde ich es tun.

 

[basti1012]

Klar geht das.
Es gibt ja schon Vorlagen die das Design schon eingebaut haben.
Dann noch etwas Javascript und fertig.

https://codepen.io/MohamedElGhandour/pen/GEbwEW?editors=1010

Noch nicht perfekt , aber man sieht das es schnell gemacht ist

 

[Gelöschtes Mitglied 36401]

@basti1012
USchi meint nicht den Desktop ;)

 

[basti1012]

Der meint doch die Windows Fenster oder nicht ?
Mach mal doppel klick auf den Computer jetzt, das hatte in meiner Version nicht ganz geklappt .
Aber jetzt sollte es gehen.
EDIT:
Hier etwas einfacher

Link zur Lösung

 

[USchi]

@basti1012
Danke fuer den Link
https://codepen.io/MohamedElGhandour/pen/GEbwEW?editors=1010
Mohamed hat 27668 Zeilen Code gebraucht. Ich will nicht kleinlich sein.
<spass>
Bei "locker in einer Stunde" sind das etwa 7 Zeilen bzw. 1630 Zeichen pro Sekunde.
Angenommen, er haette sich noch 10 Minuten Gedanken machen muessen (ich weiss, hat er nicht :-), klingt das nicht mehr so locker.
(derzeit haelt Helena Matouskova mit 510 Anschlaegen pro Minute den aktuellen Weltrekordhalterin)
Ich werd Mohamed mal fragen, wielange er wirklich gebraucht hat.
</spass>
<ernst>Trotzdem Danke fuer die Quelle, die ich nicht fand</ernst>