Flaggen in purem CSS!
Diese Seite wurde nur mit CSS gestaltet, ohne Tabellen, Javascript, browserspezifische oder missbilligte Tags und Attribute, mit validem HTML und CSS und mit nur einem einzigen Bild (ein alphatransparentes PNG für die Menüs).
Um diese Seite vernünftig betrachten zu können, benötigen Sie entweder Opera, Konqueror oder Mozilla in einer aktuellen Version. Der Internet Explorer macht so ziemlich alles falsch (fehlerhafte Implementierung des Boxenmodells, keine ausreichende Unterstützung von :hover, position:relative und position:fixed und alphatransparenten PNGs). Frühere Versionen von Konqueror konnten kein border-color:transparent;, deshalb schauen in diesen die Flaggen etwas "seltsam" aus.
Benutzung der Seite
Wenn Sie mit dem Mauszeiger über die Flaggen fahren erscheint rechts oben eine Information über diese Flagge, um alle Flaggennamen auf einmal zu sehen fahren Sie auf "Lösung" oben links. Wenn Sie mehr über den Aufbau dieser Seite wissen wollen verwenden Sie bitte das rote N in der Leiste links. Die Buchstaben darunter lassen sich verwenden, um direkt zu einer Flagge zu springen. Viel Spaß beim Erraten der Ländernamen!
Aufbau der Flaggen
Die Flaggen basieren auf der border-Eigenschaft von CSS. Dazu ein Beispiel:
<div style="width:5px; height:5px; border:10px solid; border-color:red blue green yellow;"></div>
Ergebnis:
Man sieht, dass die Ramen in den Ecken in einer geraden Linie zusammenlaufen. Wenn man nun bestimmte Rahmen deaktiviert und andere mit border-color:transparent unsichtbar machen können Sie etliche Figuren erhalten:
<div style="width:0px; height:0px; border-right:20px solid black; border-left:20px solid black; border-bottom:32px solid white; border-top:none;"></div>
Ergebnis:
<div style="width:20px; height:0px; border-right:20px solid black; border-left:20px solid black; border-top:20px solid white; border-bottom:none;"></div>
Ergebnis:
<div style="width:20px; height:0px; border-top:20px solid black; border-bottom:20px solid black; border-left:20px solid white; border-right:none;"></div>
Ergebnis:
Auf diese Weise wären noch etliche andere Figuren möglich, für bestimmte Figuren muss man aber mehrere Dreiecke überlappen, indem man sie durch relative Positionierung an die gleichen Koordinaten setzt.
Eine detailliertere Version hat Lasse Reichstein Nielsen in seinem Artikel Information on Border Slants veröffentlicht.
Das einzige, was hier noch interessant ist, ist vielleicht, dass ich zum Anordnen der Flaggen keine Tabelle verwendet habe, sondern die einzelnen Container mit float:left formatiert habe. Auf diese Weise passt sich die Spaltenzahl der Fensterbreite an.
Beschreibungs-Popups
Die Texte, die erscheinen, wenn man mit dem Mauszeiger über eine Flagge fährt, sind innerhalb eines <span>-Elements abgespeichert. Im Normalfall werden sie nicht angezeigt, deshalb werden sie mit display:none versteckt:
div#flaggen > div > span {
display:none;
}
Damit sie aber doch angezeigt werden, sobald die Maus den Flaggenbreich berührt, wird diese Einstellung später überschrieben:
div#flaggen > div:hover > span {
display:block;
position:fixed;
right:5px;
top:5px;
/*Weitere Formatierungen (width, height, border, background...)*/
}
Der halbtransparente Hintergrund entsteht dadurch, dass ein halbtransparentes PNG als Hintergrund eingesetzt wurde.
Lösungs-Button
Hier wird es kompliziert. Die Popups sollen erscheinen, wenn der Mauszeiger über dem Bereich "Lösung" verweilt, aber nicht, wenn er sich über dem eigentlichen Flaggenbereich befindet.
Hier ersteinmal die Struktur dieser Datei:
<div id="flaggen">
<div id="button">
Lösung
</div>
<div id="flaggenbereich">
<div>
<span>Ländername</span>
Der Inhalt einer Flagge
</div>
<div>
<span>Ländername</span>
Der Inhalt einer Flagge
</div>
</div>
</div>
Der Button wird mit position:fixed am Bildschirm fixiert. Außerdem wird der Ländername versteckt:
div#flaggen > div > div > span {
display:none;
}
Nun wird für das ganz normale hover der Text wie folgt formatiert:
div#flaggen:hover > div > div > span {
display:block;
position:relative;
height:15px;
margin-bottom:-15px;
/*Andere Attribute*/
}
Der negative untere Abstand existiert, damit der restliche Inhalt der Flaggenbox nicht verrutscht. Schließlich muss noch verhindert werden, dass dieser Effekt auch greift, wenn sich der Mauszeiger auf dem eigentlichen Bereich der Flaggen befindet:
div#flaggen > div:hover > div > span {
display:none;
/* Tatsächlich wird hier die Aufschrift *
* positioniert, um den Hovereffekt für *
* die einzelnen Flaggen zu erreichen. */
}
Vorab muss ich erwähnen, dass ich die Idee zum Menu von einer anderen Seite hatte. Mehr dazu im Bereich "Danke".
Das gesamte Menu ist im Prinzip eine verschachtelte Liste:
<ul>
<li>
A
<ul>
<li>1.Punkt</li>
<li>2.Punkt</li>
</ul>
</li>
<li>
B
<ul>
<li>1.Punkt</li>
<li>2.Punkt</li>
</ul>
</li>
<!--usw.-->
</ul>
Um die Untermenüs zu Beginn zu verstecken und sie bei Mausberührung wieder erscheinen zu lassen kann die folgende Formatierung verwendet werden:
ul > li > ul {
display:none;
}
ul > li:hover > ul {
display:block;
}
Mit entsprechender Formatierung kann man das links angezeigte Menu herstellen.
Danke an:
Seiten, die mir direkt als Inspirations- und Ideenquelle gedient haben
Weitere Seiten
Seiten, die mir indirekt geholfen haben oder sehr interessant sind:
- Dr. Web (Deutsch): Ein sehr interessantes Magazin für Webdesigner
- CSS Zen Garden (Englisch, Übersetzungen vorhanden): Der Beweis, wie flexibel CSS ist
- Jörgs Webnotizen: Interessante, z.T. auch lustige Arikel über Webdesign
- Thorsten Vock: Zum Teil recht interessante CSS-Experimente, die Uhr wurde von mir noch erweitert.
Hinweise
Damit Suchmaschinen diese große Seite überprüfen können bekommen diese den Teil mit den Flaggen sowie die interne Navigation nicht ausgeliefert.
Die Codeteile dürfen frei verwendet werden, solange etwas eigenes daraus entsteht. Es ist also nicht erlaubt, zum Beispiel alle Flaggen zu kopieren (Ausnahmen bitte per E-Mail regeln).
Das Nutzungsrecht der Texte liegt ausschließlich bei Mathias Plichta.
Falls es Sie interessiert: Insgesamt wurden auf dieser Seite 858 div-Container verwendet