Teil 1: Figuren gestalten mit CSS – die Grundformen

Erstellt am 20. Januar 2013 von Michaelmilli0n

Dass man mit CSS nicht nur Schriften einfärben und Hintergründe definieren kann, das ist weitgehend bekannt. Was aber wirklich mit CSS möglich ist, das ist noch nicht sonderlich gut aufgezeigt. Daher haben wir uns dazu entschlossen, hier einige Tipps und Tricks zu geben, wie wir mit CSS gestalten können und uns kreativ austoben können.

Im heutigen ersten Teil stellen wir Ihnen die Grundformen vor, die wir in der einen oder anderen Webseite schon verbaut haben und die auch Ihnen nicht unbekannt sein sollten. Ausgangslage ist für uns immer ein Container <div class="???"></div> mit dem jeweiligen Klassennamen (zum Beispiel#quadrat) im unteren Kasten.

Quadrat

Rechteck

  • Figur
  • CSS-Code

Kreis

  • Figur
  • CSS-Code

Oval

  • Figur
  • CSS-Code


Im zweiten Teil werden wir Ihnen zeigen, wie wir einfach Dreiecke gestalten können. Auch werden Sie in den weiteren Teilen erfahren, wie wir Sterne gestalten, wie Fünfecke oder Sechsecke entstehen und wir werden darauf eingehen, wie Sie dieses Wissen anwenden können und wie Sie mit CSS kreative Figuren erstellen können und sogar Logos gestalten können. Bleiben Sie uns also treu und besuchen Sie uns gerne wieder.