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 eine Wolke sieben malen (ohne Grafiken)
mit CSS eine Wolke sieben malen (ohne Grafiken)

CSS: Vom Quadrat zum Kreis über das Oval zur Wolke – mit CCS Grafiken erstellen

Wieder gehen wir wie im letzten Kapitel von einem Quadrat aus. Dazu erstellen wir einen Bereich in HTML:

<span class="css-kreis">1.</span>

Und für die Größe unter Hintergrundfarbe:

.css-kreis {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: orange;
}

Wir richten die Zahl mittig aus (so könnten wir einen riesigen Aufzählungspunkt machen).

.css-kreis {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: orange;

  color: white;
  line-height: 100px;
  text-align: center;
  font-size: 3em;
  font-family: sans-serif;
}

Und nun noch als Kreis – dazu wird einfach ein border-radius: __px; festgelegt, wo die Zahl halb so groß ist, wie die Breite bzw. Höhe:

.css-kreis {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: orange;

  border-radius: 50px;

  color: white;
  line-height: 100px;
  text-align: center;
  font-size: 3em;
  font-family: sans-serif;
}
ein Kreis mit Text in der Mitte nur über CSS erstellt
ein Kreis mit Text in der Mitte nur über CSS erstellt

Aus einem Kreis ein Oval über CSS

Sobald wir nun an der Breite oder Höhe etwas ändern, erhalten wir wieder mehr ein Rechteck, allerdings mit abgerundeten Ecken:

.css-kreis {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: skyblue;

  border-radius: 50px;

  color: white;
  line-height: 100px;
  text-align: center;
  font-size: 3em;
  font-family: sans-serif;
}

Ein Rechteck mit abgerundeten Ecken (diesmal als Inhalt die 2 (was man in HTML ändert)):

Rechteck mit abgerundeten Ecken
Rechteck mit abgerundeten Ecken

Gibt man nun wieder für die Seite als border-radius: 100px / 50px; die Hälfte der Seitenlänge mit, erhält man das gewünschte Oval. Die Schreibweise ist erst für Horizontale und dann getrennt über eine Slash die Vertikale:

.css-kreis {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: skyblue;

  border-radius: 100px / 50px;

  color: white;
  line-height: 100px;
  text-align: center;
  font-size: 3em;
  font-family: sans-serif;
}

Aus drei Ovalen eine Wolke über CSS erstellen

Und nun bauen wir aus 3 Ovalen eine Wolke. Dazu nutzen wir die Technik, die wir bereits bei unserem CSS-Stern genutzt haben. Wir platzieren vor und nach unserem ersten Oval eine verschobene und verkleinerten weitere Ovale.

Unsere Wolke wird umgesetzt in CSS dann folgendes Aussehen haben:

unsere Wolke aus reinem CSS erstellt ohne Grafik
unsere Wolke aus reinem CSS erstellt ohne Grafik

Wer mag, kann im Vorfeld probieren, dieses Aussehen hin zu bekommen. Ansonsten einfach die folgende Schritt-für-Schritt Vorgehensweise lesen.

In HTML nutzen wir die Bezeichnung „css-wolke“ und diese darf eine weiße Wolke werden (und ein blauer Hintergrund, damit man die weiße Wolke auf dem Hintergrund gut sieht):

<span class="css-wolke"></span>

Und unser CSS mit dem ersten Oval, dass für das Design der Wolke länglich wird:

html, body {
  background-color: skyblue;
  color: black;
  font-family: sans-serif;
  font-size: 3em;
}

.css-wolke { 
  display: inline-block;
  width: 300px;
  height: 100px;
  border-radius: 100px / 50px;
  background-color: white;

  line-height: 100px;
  text-align: center;
}

Damit die Wolke später nicht so am Bildschirmrand klebt, verschieben wir diese über margin-Angaben.

.css-wolke { 
  display: inline-block;
  width: 300px;
  height: 100px;
  border-radius: 100px / 50px;
  background-color: white;

  line-height: 100px;
  text-align: center;

  margin-left: 100px;  
  margin-top: 50px;
}

Damit wir beim Platzieren keine Probleme bekommen, müssen wir unserem Haupt-Oval die Eigenschaft position: relative;

.css-wolke { 
  display: inline-block;
  width: 300px;
  height: 100px;
  border-radius: 100px / 50px;
  background-color: white;

  line-height: 100px;
  text-align: center;

  margin-left: 100px;  
  margin-top: 100px;

  position: relative;
}

Bisher sieht unsere Ausgabe so aus:

nur ein Oval am Himmel
nur ein Oval am Himmel

Und nun ein zweites kleines Oval verschoben. Wieder nutzen wir die Technik mit ::before die wir bereits beim Stern kennen gelernt haben. Als Farbe zum Unterscheiden vom ersten nutzen wir ein grau (das später auch weiß wird):

.css-wolke::before { 
  width: 120px;
  height: 100px;
  border-radius: 50%;
  background-color: silver;

  line-height: 75px;
  text-align: center;

  position: absolute;
  content: "2";
  top: -50px;
  left: 120px;  
}
zweiter Teil und CSS-Wolke
zweiter Teil und CSS-Wolke

Und somit haben wir unseren zweiten Teil der CSS-Wolke.

Dasselbe machen wir mit dem CSS-Selektor ::after:

.css-wolke::after { 
  width: 100px;
  height: 60px;
  border-radius: 50%;
  background-color: #eee;

  line-height: 75px;
  text-align: center;

  position: absolute;
  content: "3";
  top: -20px;
  left: 60px;  
}
bisheriges Ergebnis
bisheriges Ergebnis

Und bisher sieht durch die Unterschiedlichen Farben das Ganze weniger wolkig aus. Daher alle Zahlen weg und alles in derselben Farbe:

unsere Wolke aus reinem CSS erstellt ohne Grafik
unsere Wolke aus reinem CSS erstellt ohne Grafik

Und der komplette Code:

<span class="css-wolke"></span>

Und das zugehörige Wolken-CSS:

html, body {
  background-color: skyblue;
  color: black;
  font-family: sans-serif;
}

.css-wolke { 
  display: inline-block;
  width: 300px;
  height: 100px;
  border-radius: 100px / 50px;
  background-color: white;

  line-height: 100px;
  text-align: center;

  margin-left: 100px;  
  margin-top: 100px;

  position: relative;
}

.css-wolke::before { 
  width: 120px;
  height: 100px;
  border-radius: 50%;
  background-color: white;

  line-height: 75px;
  text-align: center;

  position: absolute;
  content: "";
  top: -50px;
  left: 120px;  
}

.css-wolke::after { 
  width: 100px;
  height: 60px;
  border-radius: 50%;
  background-color: white;

  line-height: 75px;
  text-align: center;

  position: absolute;
  content: "";
  top: -20px;
  left: 60px;  
}

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