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!

L
ö
s
u
n
g
Kuwait Auch hier reicht ein einzelner Layer.
Kongo Drei Layer. Der gelbe Hintergrund wird von zwei Dreiecken überlagert, sodass der Streifen entsteht.
Jamaika Die vier Dreiecke überlagern den gelben Hintergrund, fünf Layer.
Griechenland 5 Layer waren für diese Flagge nötig.
Südafrika Diese aufwändige Flagge enthält sieben Layer. Die Trapeze entstehen durch eine breite, schmale Box mit einem farbigen Rahmen oben und einem farblosen links.
Vincent und die Grenadinen Die Rauten bestehen aus jeweils zwei Dreiecken. Insgesamt waren sieben Layer nötig.
Bahamas Für diese einfache Flagge wurden zwei Layer benötigt.
St.Lucia Vier Layer waren nötig, um diese Flagge zu erstellen.
Seychellen Aus fünf Layern lässt sich diese Flagge zusammenstellen.
Somalia Insgesamt wurden hier vier Layer verwendet.
Schweiz Dieses simple Kreuz benötigt immerhin drei Layer.
Timor-Leste Sechs Layer sind hier verbaut.
Vietnam Hier sind vier Layer verwendet worden.
Vereinigte Arabische Emirate Diese Flagge lässt sich aus zwei Layern herstellen.
Großbritannien Diese Flagge benötigt sage und schreibe zwölf Layer.
Zentralafrika Sechs Layer werden hier benötigt.
Tansania Fünf Layer.
Trinidad und Tobago Fünf Layer.
Tonga Hier wurden insgesamt vier Layer verwendet.
Tschechien Diese Flagge kommt mit einem Layer aus.
Panama Durch die beiden Sterne wurden für diese Flagge sieben Layer benötigt.
Antigua Elf Layer waren nötig, um diese sehr aufwändige Flagge zu erstellen.
Armenien Auch hier kommt man mit einem Layer aus.
Australien Diese Flagge besteht aus 32 Layern. Dafür sind vor allem die vielen Sterne verantwortlich.
Bahrain Sechs Layer wurden benötigt, um diese gezackte Flagge zu erstellen.
Belgien Auch diese Flagge wurde mit einem Layer realisiert.
Benin Mit zwei Layern lässt sich diese Flagge aufbauen.
Bolivien Diese Flagge besteht aus einem Layer.
Bosnien-Herzegovina 28 Layer waren für diese Flagge nötig.
Botswana Zwei Layer wurden für diese einfache Flagge gebraucht.
Bulgarien Diese Flagge besteht aus einem Layer.
Cookinseln Sage und schreibe 58 Layer wurden hier benötigt.
Chile Der Stern besteht aus drei Layern, deren Rahmen auf Dreiecksform gebracht wurden.
China 16 Layer verbraucht diese Flagge.
Côte d'Ivoire Ein Layer.
Dänemark Zwei Layer, ansonsten nichts besonderes.
Deutschland Eigentlich simpel: Das Ganze lässt sich mit einem einzigen <div>-Element bewerkstelligen.
Dschibuti Vier Layer formen diese Flagge.
Estland Ein Layer.
Frankreich Ein Layer.
Gabun Ein Layer.
Gambia Zwei Layer formen diese Flagge.
Ghana Vier Layer bilden dieses Länderkennzeichen.
Guinea Ein Layer.
Guinea-Bissau Mit fünf Layern lässt sich diese Flagge aufbauen.
Guyana Diese schöne Flagge besteht aus fünf Layern.
Honduras 16 Layer wurden hier verbaut.
Indonesien Ein Layer.
Irland Ein Layer.
Island Die Isländer (?!) benötigen vier Layer, um ihre Flagge zu erstellen.
Israel 12 Layer formen diese Flagge. Der Stern wurde zuerst voll eingefügt und dann teilweise von weißen Dreiecken verdeckt.
Italien Ein Layer.
Jemen Ein Layer.
Jordanien Sechs Layer formen diese Flagge.
Kamerun Vier Layer.
Kap Verde 32 Layer sind hier verwendet worden.
Kathar Neun Layer wurden benötigt, um diese gezackte Flagge zu erstellen.
Kolumbien Ein Layer.
Kongo 22 Layer verbraucht diese Flagge.
Kuba Sechs Layer sind hier verwurstet.
Lettland Ein Layer.
Lybien 1 Layer.
Litauen Ein Layer.
Luxemburg Ein Layer.
Madagaskar Mit zwei Layern lässt sich diese Flagge aufbauen.
Mali Ein Layer.
Mikronesien 13 Layer verbraucht diese Flagge.
Monaco Ein Layer.
Niederlande Ein Layer.
Nigeria Ein Layer.
Österreich Ein Layer.
Polen Ein Layer.
Rumänien Ein Layer.
Russland Ein Layer.
Salomonen 18 Layer wurden hier verbaut.
Samoa Hier wurden insgesamt 17 Layer verwendet.
São Tomé und Príncipe Acht Layer sind hier verwurstet.
Schweden Zwei Layer, ansonsten nichts besonderes.
Senegal Vier Layer sind hier in Aktion.
Serbien und Montenegro Ein Layer.
Sierra Leone Ein Layer.
St. Kitts und Nevis Elf Layer.
Sudan Zwei Layer formen diese Flagge.
Suriname Fünf Layer bilden dieses Länderkennzeichen.
Syrien Sieben Layer sind hier verwendet worden.
Tsdschikistan Ein Layer.
Thailand Zwei Layer formen diese Flagge.
Ukraine Ein Layer.
Ungarn Ein Layer.
USA 153 Layer, drei für jeden Stern, zwei für die 13 Streifen und einen für das blaue Feld.

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.  */
}

Das Menu auf der linken Seite

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:

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