Thema: CSS Windows-Style Fenster
-
28.07.2012, 21:47 #1
CSS Windows-Style Fenster
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:
HTML-Code:<!-- 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>
win_window.rar
MfGGeändert von Darkfield (27.03.2014 um 12:10 Uhr)
-
28.07.2012, 23:47 #2
- Registriert seit
- 01.07.2011
- Beiträge
- 103
Thanked 54 Times in 45 PostsCSS Windows-Style Fenster
It's HTML5/CSS3-based?
-
28.07.2012, 23:50 #3
CSS Windows-Style Fenster
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.
-
28.07.2012, 23:51 #4
- Registriert seit
- 01.07.2011
- Beiträge
- 103
Thanked 54 Times in 45 PostsCSS Windows-Style Fenster
Opacity? Hmm oke, Könnte man ja auch RGBA nutzen ^^
ich schaue es mir morgen mal an.
-
28.07.2012, 23:52 #5
CSS Windows-Style Fenster
RGBA hab ich noch nie genutzt, werd ich auch mal einen Blick drauf werfen
-
28.07.2012, 23:55 #6
- Registriert seit
- 01.07.2011
- Beiträge
- 103
Thanked 54 Times in 45 PostsCSS Windows-Style Fenster
RGBA ist nichts anderes als Opcity..
RGBA ist halt ein Farbwert mit Alphatransparenz.
Wenn du folgendes nutzt:
background: #FFFFFF;
opacity: 0.5;
background: rgba(255, 255, 255, 0.5);
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.
-
31.07.2012, 00:03 #7
- Registriert seit
- 01.07.2011
- Beiträge
- 103
Thanked 54 Times in 45 PostsCSS Windows-Style Fenster
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
-
31.07.2012, 12:02 #8
- Registriert seit
- 05.04.2012
- Beiträge
- 19
Thanked 0 Times in 0 PostsCSS Windows-Style Fenster
@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 lassenGeändert von Darkfield (27.03.2014 um 12:11 Uhr)
-
31.07.2012, 12:06 #9
- Registriert seit
- 01.07.2011
- Beiträge
- 103
Thanked 54 Times in 45 PostsCSS Windows-Style Fenster
@Iron
Des Icon kann man selbst setzen
Dafür gibt es extra die Option "icon".Geändert von Darkfield (27.03.2014 um 12:11 Uhr)
-
31.07.2012, 14:16 #10
CSS Windows-Style Fenster
Naja, das moving klappt ja wohl noch nicht so ganz. Werd das mal in den jQuery Dialog einbinden.
Ähnliche Themen
-
Windows 7 Build 7601 - Echtheit dieser Windows Kopie wurde noch nicht bestätigt
Von PandaPaeD im Forum SoftwareAntworten: 6Letzter Beitrag: 09.01.2014, 15:57 -
Honey Boo Boo Style (Honey Boo Boo vs Gangnam Style)
Von milchbubix im Forum Musik ♫Antworten: 1Letzter Beitrag: 14.09.2012, 11:54 -
[CSS] Windows-Style Fenster
Von Comu im Forum CSSAntworten: 0Letzter Beitrag: 28.07.2012, 21:38 -
Windows 7 Style
Von KingWayne im Forum WindowsAntworten: 1Letzter Beitrag: 17.12.2011, 16:23 -
/code Fenster neu
Von helfen im Forum Knuddels-NewsAntworten: 10Letzter Beitrag: 26.11.2011, 14:36
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.