Queer Web Design: Die LGBT Flagge mit CSS

Jedes Jahr am 17. Mai ist der internationale Tag gegen Homo-, Bi- und Transphobie.

Weil ich selbst Transgender bin und helfen möchte, mehr Aufmerksamkeit auf diesen wichtigen Tag zu lenken, habe ich dieses Jahr die LGBT Fahne in CSS designed und in verschiedenen Social Networks geteilt.

Die Fahne der LGBT Community.



Wenn du diese Icons kennst, hast du bereits richtig erkannt, dass ich den Code meiner Flagge bereits auf Codepen geteilt habe. Ich möchte diesen Beitrag nutzen, um ihn kurz zu erklären. Vor allem geht es mir dabei um den Wellen-Effekt auf der Fahne. Der Rest besteht eigentlich nur aus ein paar Boxen.




Wie immer fange ich mit dem HTML – Grundgerüst an:

<div class="rainbow-wrapper">
  <div class="color red"></div>
  <div class="color orange"></div>
  <div class="color yellow"></div>
  <div class="color green"></div>
  <div class="color blue"></div>
  <div class="color purple"></div>
</div>

Das wars. Ein Regenbogenbehälter .rainbow-wrapper mit sechs divs; jeweils eins pro Farbe: rot, orange, gelb, grün, blau und lila.


Diese Farben definiere ich zuerst in CSS, damit die einzelnen Streifen der Flagge auch zu sehen sind, wenn ich sie anschließend style:

.red {
  background: #de0404;
}

.orange {
  background: #f58b01;
}

.yellow {
  background: #ffee00;
}

.green {
  background: #017f25;
}

.blue {
  background: #004cfb;
}

.purple {
  background: #4d0066;
}


Weil divs von Natur aus keine eigene Höhe und Breite haben, weise ich den Streifen als nächstes eine Höhe zu:

.color {
height: 3rem;
}



Damit werden die Streifen der Flagge sichtbar:

Die unfertige LGBT Flagge mit CSS
Die Flagge nimmt jetzt noch die komplette Webseitenbreite ein…



Ich benutze REM, um den Streifen eine Höhne zu zuweisen. Pixel, EM oder % funktionieren aber auch. Es kommt darauf an, was du bevorzugst. Ich arbeite am Liebsten mit REM und %. Infos dazu was genau die Unterschiede zwischen diesen Maßeinheiten sind, habe ich am Ende meines Betrages verlinkt.

Jetzt sorge ich erstmal dafür, dass die Flagge bessere Form bekommt und sich nicht mehr einfach über die ganze Seite erstreckt.


.rainbow-wrapper {
  border-radius: 0.2rem;
  margin: 3rem auto;
  width: 90%;
  max-width: 25rem;
}



Das Ergebnis dieses Schrittes sieht so aus:

LGBT Flagge mit CSS
Die Flagge hat jetzt eine begrenzte Breite.



Zum guten Schluß kommt noch das Wellenmuster für die Flagge. Hierfür nutze ich das CSS Pseudo-Element :after, um einen linearen Farbverlauf in schwarz – weiß über die Flagge zu legen:

.rainbow-wrapper:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(255, 255, 255, 0.25) 15%,
    rgba(0, 0, 0, 0.25) 30%,
    rgba(255, 255, 255, 0.25) 45%,
    rgba(0, 0, 0, 0.25) 60%,
    rgba(255, 255, 255, 0.25) 75%,
    rgba(0, 0, 0, 0.25) 90%
  );
}



Es entsteht eine Art Wellenmuster auf der Flagge:

Die unfertige LGBT Flagge mit CSS
Die Wellen verlaufen über die Flagge hinaus…




So, wie es soll, sieht das Ganze noch nicht aus. Das ändert sich aber, wenn ich .rainbow-wrapper eine relative Position zuweise und den overflow – also den Teil vom linearen Verlauf, der sich nicht auf der Flagge befindet – verstecke:

position: relative;
overflow: hidden;



Die .rainbow-wrapper Klasse sieht jetzt so aus:

.rainbow-wrapper {
  border-radius: 0.2rem;
  margin: 3rem auto;
  width: 90%;
  max-width: 25rem;
  position: relative;
  overflow: hidden;
}



Fertig!

Ich hoffe, dass dir dieser Einblick gefallen hat.
Schreib mir gerne in die Kommentare wie dir die Flagge gefällt. 🙂



LGBT Flagge mit CSS
LGBT Flagge mit CSS



Wie ich bereits weiter oben verraten habe, kannst du dir die fertige Flagge mit funktionierendem Code auf Codepen ansehen – und, wenn du willst, nach Belieben nutzen.

Am Besten funktioniert Codepen auf der externen Webseite. Diese erreichst du wenn du auf das Edit on Codepen Icon klickst.

See the Pen LGBT: The colors of the rainbow flag by Marty (@Marty-Development) on CodePen.



Wenn du meinen Code für ein Projekt nutzt und mir einen Kommentar mit dem Link schreibst, sehe ich mir die Seite an.

Ich bin schon gespannt! 😀

Auf jeden Fall: Danke für deine Zeit, die du mir mit dem Lesen meines Beitrags gewidmet hast!





Diese Webseiten könnten dich interessieren:

Pixel, EM und REM: Was ist der Unterschied?
https://die-netzialisten.de/em-und-rem-was-ist-der-unterschied/

→ Veröffentlicht am 02/05/2020 in CSS, Code & Co

→ Schlagwörter: , , , , Einloggen um den Post zu editieren.

0 comments on “Queer Web Design: Die LGBT Flagge mit CSS

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.