Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign
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;  
}
weitere eigene Projekte: