Flaggen basteln mit CSS

26.05.2008

Flaggen basteln mit CSS

CSS kann man nicht nur für das Seitenlayout einer Website verwenden; es bietet auch einige Möglichkeiten zum Experimentieren und zum Spielen. So kann man durchaus mit wenigen CSS-Angaben auch Nationalflaggen basteln.
Zugegeben: Nicht alle lassen sich mit CSS bewerkstelligen. Dennoch reicht das CSS-Spektrum für viele Standardflaggen, die keine größeren Ansprüche stellen.

Vorbereitungen: Flaggen, Farbcodes und Größen

Bevor wir loslegen ist es sinnvoll, zunächst die Flagge der jeweiligen Nation vor Augen und ihre Farbcodes parat zu haben. Was die Flaggen betrifft, findet ihr z.B. hier eine umfangreiche Übersicht.
Zur Bestimmung des Farbcodes könnt ihr euch das recht einfach zu bedienende und kostenlose Color Cop besorgen.
Schließlich muss noch die Flaggengröße bestimmt werden. In den nachfolgenden Beispielen wird von einer Größe von 150px Breite auf 90px Höhe ausgegangen. Diese Maße können für drei unterschiedliche Farben recht einfach dreigeteilt werden.

Flaggen der Kategorie "Querstreifen"

Hierzu zählen z.B. die Flaggen von Deutschland, der Niederlande, Spanien oder Polen.
Beginnen wir mit der Deutschlandflagge "schwarz-rot-gold": Sie ist recht einfach und benötigt lediglich eine CSS-Klasse.
Nach dem CSS-Boxmodell bemisst sich die Gesamthöhe eines Div's nach seiner eigentlichen Höhe zuzüglich der Seitenränder.
Den mittleren Farbbereich "rot" definieren wir als Hintergrundfarbe und weisen der Klasse eine Höhe von 30px zu. Hinzu kommt dann noch ein oberer schwarzer Rand von 30px sowie ein unterer goldener Rand von 30px. Die Breite legen wir auf 150px fest.
Dies führt zu folgenden CSS-Angaben:

.deutschland {
width: 150px;
height: 30px;
background: #f00;
border-top: 30px solid #000;
border-bottom: 30px solid #fc0;
}

HTML:

Das Ergebnis sieht dann so aus:

Für gleichartige Flaggen müsst ihr nun lediglich andere Farbcodes einsetzen.

Bei der spanischen Flagge ist der Mittelteil etwas höher, dafür der obere und untere Rand etwas weniger hoch. Also brauchen wir lediglich die entsprechenden Werte und die Farbcodes abzuändern:

.spanien {
width: 150px;
height:50px;
background: #f2e51a;
border-top: 20px solid #cf010e;
border-bottom: 20px solid #cf010e;
}

Für die Ukraine werden nur zwei Streifen benötigt. Somit können wir auf den Hintergrund verzichten und benötigen lediglich einen oberen und unteren Rahmen. Die Div-Höhe setzen wir auf "0", da die Gesamthöhe allein durch die beiden Rahmen bestimmt wird:

.ukraine {
width: 150px;
height:0px;
border-top: 45px solid #008ccd;
border-bottom: 45px solid #fff100;
}

Mauritius hat vier unterschiedliche Farbstreifen. Dafür könnte man wie bei der Ukraine zwei untereinander angeordnete Div's nehmen, deren Rahmenbreiten jedoch entsprechend geringer ausfallen:

.mauritius1 {
width: 150px;
height:0px;
border-top: 22px solid #c00;
border-bottom: 22px solid #036;
}

.mauritius2 {
width: 150px;
height:0px;
border-top: 22px solid #ff0;
border-bottom: 22px solid #093;
}

Zusammengesetzt:

Für diese Beispiele könnte man natürlich auch eine Tabelle verwenden und jeder Tabellenzeile eine Farbklasse zuweisen.

Flaggen der Kategorie "Längsstreifen"

Auch das ist eine recht einfache Übung: Anstelle der oberen und unteren Rahmen definieren wir linke und rechte Rahmen, so z.B. für die belgische Flagge:

.belgien {
background: #ff0;
width: 50px;
height:90px;
border-left: 50px solid #000;
border-right: 50px solid #c00;
}

Flaggen mit "Kreuzbalken"

Hierzu zählen z.B. Dänemark oder Schweden, aber auch die Schweiz.

Versuchen wir uns an der schwedischen Nationalflagge, für welche wir zwei Div's benötigen:
Im ersten ".schweden1" definieren wir den mittleren, horizontalen gelben Balken als Hintergrund sowie den hellblauen Flaggenteil als oberen und unteren Rahmen. Ausgehend von 90px Gesamthöhe verwenden wir für den gelben Hintergrund 20px sowie für die beiden hellblauen Rahmen je 35px. Um anschließend noch den Längsbalken positionieren zu können, verwenden wir noch ein "position: relative. Daraus folgt als Zwischenergebnis:"

.schweden1 {
width: 150px;
height: 20px;
background: #fc0;
border-top: 35px solid #069;
border-bottom: 35px solid #069;
position: relative;
}

Fehlt jetzt noch der Längsstreifen: Er wird mit 20px Breite und 90px Höhe absolut zu ".schweden1" positioniert, und zwar mit einem Linksabstand von 40px und einem Top-Abstand von -35px. Er wird also ausgehend von der Oberkante des gelben Querbalkens um 35px nach oben verschoben:

.schweden2 {
width: 20px;
height: 90px;
background: #fc0;
position: absolute;
top: -35px;
left: 40px;
}

Schließlich wird nun der Div ".schweden2" in den Div ".schweden1" eingefügt:

Als Ergebnis erhalten wir die schwedische Nationalflagge:

Nehmen wir uns noch die Schweizer Flagge mit weißem Kreuz auf rotem Grund vor:
Auch hier verwenden wir einen Div mit weißem Hintergrund und rotem Rahmen auf jeder Seite; jedoch mit etwas unterschiedlichen Breiten:

.schweiz1 {
width: 50px;
height: 20px;
background: #fff;
border-top: 35px solid #c00;
border-right: 50px solid #c00;
border-bottom: 35px solid #c00;
border-left: 50px solid #c00;
position: relative;
}

Nun muss noch ein weißer Längsbalken so positioniert werden, dass er zusammen mit unserem ersten Flaggenteil ein weißes Kreuz bildet:

.schweiz2 {
width: 20px;
height: 50px;
background: #fff;
position: absolute;
top: -15px;
left: 15px;
}

Zusammengefügt als HTML-Code:

Auch Dreick-Formen sind möglich: Beispiel Tschechien

Hinweis: Im Internet Explorer 6 und kleiner wird diese Flagge falsch dargestellt (konnte den Fehler aber noch nicht fixieren).

Was ist nun das "Geheimnis" dieses CSS-Codes, wo wir doch immer nur rechteckige Formen gewohnt sind?
Zunächst benötigen wir einen Div, der die Breite begrenzt. Wegen des weißen Farbteils in der tschechischen Flagge weisen wir ihm zwecks besserer Sichtbarkeit noch einen schwarzen äußeren Rahmen zu:

.aussen {
width: 150px;
border: 1px solid #000;
}

Nun machen wir uns zu Nutze, dass die Rahmen in den Ecken diagonal zusammenlaufen. Als Basis können wir einen ähnlichen Aufbau wie bei der Ukraine-Flagge wählen, nämlich einen oberen Rand in weiß sowie einen unteren Rand in rot mit jeweils 45px.
Dem wird nun noch ein blauer linker Rand hinzugefügt. Seine Breite bestimmt den Punkt, wo sich alle drei Farben treffen. Hier wurden 70px gewählt.
Zusammen ergibt dies folgende CSS-Angaben:

.tschechien {
height: 0px;
border-left: 70px solid #002c72;
border-top: 45px solid #fff;
border-bottom: 45px solid #f00;
}

HTML:

Sehen wir uns zum Schluss noch die kuwaitische Flagge an. Versucht mal selbst, hinter diese CSS-Konstruktion zu kommen.

Wie ihr seht, kann man mit relativ einfachen CSS-Angaben eine Vielzahl von Nationalflaggen basteln. Viel Spaß dabei!

nach oben