professionelles Webdesign mit CSS3

CSS3

Der Weg zum perfekten Design

compuart informiert kurz und bündig über Grundlagen der Web-Programmierung. In dieser Blog-Artikel erläutern wir, welche Funktion CSS wahrnimmt. Des Weiteren gehen wir auf CSS3, den aktuellen des W3C, ein und veranschaulichen an einem einfachen Beispiel einige Möglichkeiten zur Gestaltung.

CSS3 Logo

Das Aussehen einer Website wird mithilfe von CSS gestaltet. In den CSS-Dateien wird definiert, wie die einzelnen Elemente der Website dargestellt werden. Indem das Grundgerüst mit HTML und die Gestaltung mit CSS definiert werden, werden Inhalt und Layout voneinander getrennt. Änderungen lassen sich durch diese Trennung leichter umsetzen.

Vorgaben einer CSS-Datei wirken auf jeder Seite, in der sie eingebunden ist. Änderungen müssen daher nur an einzelnen Stelle vorgenommen werden. Mit dem neuesten CSS-Standard CSS3 sind noch weitaus beeindruckendere Effekte realisierbar. Die Features werden inzwischen von den meisten modernen Browsern unterstützt.

So kann man beispielsweise festlegen, dass ein Text automatisch auf mehrere Spalten verteilt wird, wie am es aus der Zeitung kennt. Lange Texte sind so deutlich einfacher zu lesen, da der Leser nicht so schnell in der Zeile verrutscht. Wird der Effekt nicht von allen Browsern unterstützt, müssen zusätzlich weitere Mittel eingesetzt werden.

Gestaltungsmöglichkeiten mit CSS 3

Zu den wichtigsten Vorteilen von CSS3 zählen:

  • Einbindung von eigenen Schriftarten
  • Gestalterische Freiheit durch Effekte
  • Flexible Darstellung für unterschiedliche Endgeräte durch Media Queries
  • 2D- und 3D-Grafiken
  • Vektorgrafiken einbinden oder dynamisch zeichnen lassen
  • neue Dokumentstrukturierung durch semantische Divs
  • neue Formular-Elemente wie zum Beispiel "tel" für Telefonnummern
  • Local Storage: Daten offline speichern


Unser Team aus erfahrenen Webentwicklern ist immer auf dem aktuellen Stand, sodass wir auch für Ihre Internetpräsenz die optimale Balance zwischen neuen Technologien und Browserkompatibilität finden.

Diese Box wurde ausschließlich mithilfe von CSS 3 gestaltet. Neben Farbverläufen, Schatten und abgerundeten Ecken lassen sich auch andere Effekte hinzufügen. CSS-Code der Beispielbox:

.box {
padding: 20px;
width: 90%;
background: #eee;
border: 1px solid #DDD;
background: -moz-linear-gradient(top, #EEE, #FFF);
background: -webkit-linear-gradient(top, #eee, #fff);
background: -ms-linear-gradient(top, #eee, #fff);
background: -o-linear-gradient(top, #eee, #fff);
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}