Flaggen mit CSS coden

sejuma

Ich habe mal heute einige Nationalflaggen mit CSS (Cascading-Style-Sheets) gecodet.
Das ist zwar mit Sicherheit nicht lebensnotwendig zu wissen oder zu können, aber es soll verdeutlichen, dass CSS nicht nur für's Weblayout verwendet werden kann.
Eine kleine Spielerei eben.
Hier der Link

jojo87

Es ist schwer beeindruckend, was für ein Experte du im Thema CSS geworden bist.
Dein Tutorial bewist das einmal mehr.
Ganz viel Respekt meinerseits

Für Flaggen werde ichzwar auch in Zukunft Bilder nehmen, aber solche Sachen beeidrucken mich immer wieder sehr.

Gruß,
Jojo

driver

nicht übel. wenn ma mal überlegt ganz einfach, mit den bordern.
aber die sache mit dem dreieck is scha saugeil... respekt.

ich werd zwar wie jojo trotzdem weiterhin meine bildchen
verwenden, aber für paar hover-effekte könnte son css-teil
ganz interessant sein.

Dr. Gore

Respekt !
Schön zu sehen das Du aus LU bist.
Grüße von einem Ex Mannheimer

Bandit

Super. Aber dann mal eine Aufgabe: Flagge Großbritannien

The User

Hehe, CSS ersetzt bald SVG. xD
Hoffentlich bekommst du keinen Ärger von einem Scheich aus Kuwait, der die Flagge im IE anschaut.

sejuma

"Selbstverständlich" geht auch Großbritannien:

Code

<div style="width:84px;">
   <div style="position:relative; width:200px; height:123px; background:red;"></div>
    <div style="position:relative; top:-123px; border:none; border-top:61px solid white; border-right:100px solid transparent; border-left:100px solid transparent;"></div>
    <div style="position:relative; top:-122px; border:none; border-bottom:61px solid white; border-right:100px solid transparent; border-left:100px solid transparent;"></div>
    <div style="position:relative; top:-241px; border:none; border-left:93px solid white; border-top:57px solid transparent; border-bottom:57px solid transparent;"></div>
    <div style="position:relative; left:107px; top:-355px; border:none; border-right:93px solid white; border-top:57px solid transparent; border-bottom:57px solid transparent;"></div>
    <div style="position:relative; left:12px; top:-473px; border:none; border-top:54px solid #5250A4; border-right:88px solid transparent; border-left:88px solid transparent;"></div>
    <div style="position:relative; left:12px; top:-458px; border:none; border-bottom:54px solid #5250A4; border-right:88px solid transparent; border-left:88px solid transparent;"></div>
    <div style="position:relative; top:-571px; border:none; border-left:84px solid #5250A4; border-top:51px solid transparent; border-bottom:51px solid transparent;"></div>
    <div style="position:relative; left:116px; top:-673px; border:none; border-right:84px solid #5250A4; border-top:51px solid transparent; border-bottom:51px solid transparent;"></div>


    <div style="position:relative; left:80px; top:-785px; width:40px; height:123px; background:white; border:none;"></div>
    <div style="position:relative; top:-866px; width:200px; height:25px; background:red; border:none; border-top:8px solid white; border-bottom:8px solid white;"></div>
    <div style="position:relative; left:88px; top:-949px; width:25px; height:123px; background:red; border:none;"></div>
</div></div></div>

Alles anzeigen

Allerdings ist das nicht "auf meinem Mist" gewachsen.
Wer noch mehr Flaggen basteln will: Hier ist eine große CSS-Auswahl

The User

USA mit den 50 Sternen hat klar die meistne divs, aber das ist ja plump!
Lieber die Cookinseln mit englischer Flagge und - als ob das nicht genug wäre - einem Haufen von Sternen.

Elvis

Mit CSS kann man sogar Häuser bauen.

DirtyK

Wie wäre es mal mit der indischen Flagge ? :-))

Grevas

Kein Problem... Man kann auch ein Paint-like Grafikprog schreiben, mit dem kannst du dann pixel für pixel die Flagge nachzeichnen ;P

Aber sinnvoll wärs überhaupt nicht.

::RMB::

Mein absoluter Favorit und bis heute nich geschlagen ist CSS Homer Simpson

Kämpfer

Auf jeden Fall ne coole Idee, das muss man sich erst mal ausdenken. Spitze, ich werds mir merken. Kann ja auch für ne kleine Sprachflagge verwendet werden. Danke für dein gutes Tut:D

Dr. Gore

Zitat von ::RMB::

Mein absoluter Favorit und bis heute nich geschlagen ist CSS Homer Simpson

Puhhh... alter schwede.....
Solche Menschen machen mir Angst !!!
Respekt !

The User

Gibt es sowas wie Turing-vollständig fürs Malen? *g*

Tobse

Respekt!!! Aber hat das wirklich sinn sich die mühe zu machen, denn ich glaub zigtausend homer-divs brauchen in der html mehr speicher wie ein jpg-bild, oder?

The User

Also sie brauchen bestimmt mehr Speicher als eine .svg-Datei.
Es geht ja nicht nur um Speicher und Skalierbarkeit, sondern um die CSS-Demonstration.

Tobse

Ja, das sicher, aber ich hab mir einfach gedanken um die einsetzung dessen gemacht. Genauso ist das ja mit runden ecken und CSS, ein Bild ist da ja auch kleiner. Und das bild ist zu 100% mehr browserkompatibel

Flaggen mit CSS coden

Tags

Benutzer online in diesem Thema