Quantcast
Channel: zeroseven labs - Internetagentur & Werbeagentur in Ulm » Tutorials
Viewing all articles
Browse latest Browse all 11

HTML kann ganz schön schräg sein.

0
0

Wie bekommt man schräge Flächen in HTML und CSS?

Beinahe alle Websites haben eines gemeinsam: Klare, rechteckige Formen.
Allerdings gibt es tolle Möglichkeiten sich mit schrägen Flächen und Kanten und Trapez- oder Skew-Effekten und Dreiecken abzuheben.

Dazu sind keine Bildgrafiken nötig, sondern man kann mit den richtigen Methoden das Ganze direkt über CSS und HTML lösen. Der Vorteil: Größen und Farben lassen sich leicht und schnell verändern, Unterstützung von Retina-Displays und geringere Ladezeiten.

CSS-Border

Das “border”-Attribute haben Sie sicherlich schon oft verwendet, aber haben Sie schon schräge Formen damit gestaltet?

Um jedes HTML-Element herum lässt sich ein Rahmen setzen. Dieser kann für oben, unten, links und rechts separat behandelt werden:

Was dabei viele außer Acht lassen, ist dass eine Kante zur Anderen in einem Winkel mit 45° anstößt. Bei einer Border-Breite von 20px wird dies deutlich:

Dieses Verhalten welches von allen Browsern unterstützt wird, können wir uns für Schrägen zu Nutze machen, indem wir das Element auf eine Breite und Höhe von 0px reduzieren:

Nun müssen lediglich die Fraben der 4 Kanten entsprechend angepasst werden, um folgende Dreiecke zu erhalten:

Über diese Methode und der Kombinaton aus beispielsweise 2 Kanten lässt sich nun eine Schräge bekommen:

  • Oberer Rahmen: transparent
  • Unterer Rahmen: grün
  • Linker Rahmen: transparent
  • Rechter Rahmen: grün

Mit diesem Prinzip lassen sich folgende Formen problemlos mit CSS und HTML, ohne zusätzliche Grafiken gestalten:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
Lorem ipsum.

Viewing all articles
Browse latest Browse all 11

Latest Images

Trending Articles





Latest Images