Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
mit CSS nach den Sternen greifen (ohne Grafiken)
mit CSS nach den Sternen greifen (ohne Grafiken)

Stern nur über CSS ohne Grafik erstellen

Aus unserem Dreieck aus dem vorherigen Kapitel basteln wir rein aus CSS (ohne irgendwelche Grafiken) einen Stern.

Was haben wir bisher aus dem letzten Kapitel

Unser HTML-Code:

<div class="css-dreieck"></div>

Unser CSS-Code:

.css-dreieck {
  width: 0px;
  height: 0px;

  border-top: 90px solid transparent; /* skyblue */
  border-right: 0px solid transparent; /* limegreen;  */
  border-bottom: 90px solid transparent; /* orange; */
  border-left: 90px solid red; 
}

In unserem HTML-Code müssen wir nicht viel ändern. Wir machen (damit es korrekt beschriftet ist aus dem „css-dreieck“ ein „css-stern“:

<div class="css-stern"></div>

Und jetzt wollen wir einen gelben (Sterne sind irgendwie immer goldgelb – auf jeden Fall in den meisten Kinderbüchern meiner Tage).

Dazu erstellen wir ein nahezu gleichschenkliges Dreieck – die Bauweise ist die gleiche wie im Kapitel mit dem Dreieck vorgestellt:

div.css-stern {
  width: 0;
  height: 0;
  border-right: 100px solid transparent;
  border-bottom: 200px solid gold;
  border-left: 100px solid transparent;
  position: relative;
}
unser bisheriges Dreieck
unser bisheriges Dreieck

Aus unserem Dreieck wird ein Stern, wenn exakt ein um 180 Grad gedrehtes Dreieck darauflegen. Dieses erhalten wir, wenn wir „border-top“ anstelle von „border-bottom“ verwenden. Damit wir den Effekt sehen, färben wir das Dreieck in einem hellen durchsichtigen grau (später dann die gleiche Farbe wie das erste Dreieck).

Allerdings ist nun die Frage, wie wir das machen. Sollen wir in HTML einen weiteren Bereich erstellen? Nein, CSS bietet uns die Möglichkeit vor und nach einem bestehenden Inhalt über „::before“ und „::after“ ein Element über CSS „einzubauen“ (alles über diese Möglichkeit gibt es in dem Kapitel https://www.html-seminar.de/css3-before-after.htm )

Als ersten benötigen wir unseren CSS-Selektor:

div.css-stern:before {
}

Jetzt packen wir ein halbdurchsichtiges Quadrat in den CSS-Selektor:

div.css-stern:before {
  width: 200px;
  height: 200px;
  background-color: hsla(60, 50%, 0%, 0.6);
  position: absolute;
  content: "1";
  font-size: 4em;
  color: white; 
}

Um die Startecke gut zu sehen, wurde diese mit dem Inhalt „1“ in großer weißer Schrift gefüllt.

Als Ergebnis erhalten wir das Quadrat, dass in der Mitte unseres Dreiecks oben startet:

überlagerndes Quadrat horizontal mittig
überlagerndes Quadrat horizontal mittig

Es macht Sinn, wo es startet: und zwar genau da, wo auch der Inhalt unseres Dreiecks wäre, wenn die Breite nicht auf 0 gesetzt wäre. Der sichtbare gelbe Bereich stellt ja nur den Rahmen mit einer Rahmenstärke von 200 Pixeln dar.

Damit es am gleichen Punkt startet, wie unser Dreieck verschieben wir es negativ nach rechts über left: -100px;

div.css-stern:before {
  width: 200px;
  height: 200px;
  background-color: hsla(60, 50%, 0%, 0.6);
  position: absolute;
  content: "1";
  font-size: 4em;
  color: white;
  top: 0px;
  left: -100px;  
}

Als Ergebnis deckt nun unser halbdurchsichtiges Quadrat das Dreieck ab:

Quadrat deckt Dreieck ab
Quadrat deckt Dreieck ab

Und machen wir aus unserem Quadrat ein Dreieck mit der geraden Seite oben. Die Beschriftung mit „1“ werfen wir raus:

div.css-stern:before {
  width: 0;
  height: 0;
  border-top: 200px solid hsla(60, 50%, 0%, 0.6);
  border-right: 100px solid transparent;
  border-bottom: 0px solid transparent;
  border-left: 100px solid transparent;

  position: absolute;
  content: "";
  top: 0px;
  left: -100px;  
}

Als Ergebnis erhalten wir:

Dreieck von oben halbdurchsichtig
Dreieck von oben halbdurchsichtig

Und dieses schieben wir noch nach unten über top:75px;

Mit dem halbdurchsichtigen Bereich sieht man schön die Überdeckung:

unser zweifarbiger Stern
unser zweifarbiger Stern

Und nun kommt noch die gleiche Farbe – somit haben wir den kompletten Code:

div.css-stern {
  width: 0;
  height: 0;
  border-right: 100px solid transparent;
  border-bottom: 200px solid gold;
  border-left: 100px solid transparent;
  position: relative;
}

div.css-stern:before {
  width: 0;
  height: 0;
  border-top: 200px solid gold;
  border-right: 100px solid transparent;
  border-bottom: 0px solid transparent;
  border-left: 100px solid transparent;

  position: absolute;
  content: "";
  top: 75px;
  left: -100px;  
}

Und das fertige Ergebnis:

Stern komplett in CSS ohne Grafiken erstellt
Stern komplett in CSS ohne Grafiken erstellt

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe