1.4 Form

Früher mussten Buttons in der Regel als Bitmap-Grafiken in Websites eingebunden werden. Da mit CSS3 erweiterte Möglichkeiten zur Formerstellung durch CSS-Anweisungen aufkamen ist dies nicht mehr Notwendig. Vorteile: schnelle, zentrale Änderungen der Gestaltung im Stylesheet statt langwieriger Änderungen von Grafiken in Photoshop.
Auch können Effekte wie abgerundete Ecken etwa verwendet werden, um Bilder anzuschneiden etc. und sich so vom ›Kästchen-Layout‹ zu entfernen.

Abgerundete Ecken

Mit der CC3-Anweisung border-radius können die Ecken von Block-Elementen wie div-Containern abgerundet werden.

Für Buttons

See the Pen Form - Round Corners by Andreas (@ernasad) on CodePen.

Dabei lassen sich für die einzelnen Ecken unterschieliche Radien festelegen und sich auf diese Weise durch CSS einfache Formen erzeugen.

See the Pen Form – Round Corners 2 by Andreas (@ernasad) on CodePen.

Beispiel: Ansicht von Images beschneiden

Kreise für Galerie

Schatten

box-shadow

See the Pen Form – Shadow by Andreas (@ernasad) on CodePen.

Schatten für Galerie

Transforms

QAY

Translate

See the Pen Form – Transform 2 by Andreas (@ernasad) on CodePen.

Scale

Rotate

See the Pen Transform – Rotation 1 by Andreas (@ernasad) on CodePen.

See the Pen Transform – Rotate 2 by Andreas (@ernasad) on CodePen.

Kontur

Wie bspw. in Illustrator die Eigenschaften für Konturen von Objekten definiert werden können, so gibt es in CSS Anweisungen, um die Konturen zu stylen: border-color border-width, border-style: dotted;

CSS-Anweisung Parameter Funktion
border-color bspw. rgb(0,0,0) Farbe des Rands
border-width bspw. 1px Breite des Rands
border-style bspw. dotted Stil des Rands

See the Pen Form – Border 1 by Andreas (@ernasad) on CodePen.

Die verschieden Kontur-Stile (gepunktet, gestrichet, …) können hier nachgesehen werden.

Mit border-right border-left border-top border-bottom können die einzelnen Seiten auch individuell definiert werden.

Beispiel


div{
   border-left-width: 10px;
   border-right-width: 10px;
   border-top-width: 2px;
   border-bottom-width: 2px;
}

Vektoren mit SVGs

SVG ist das Vektor-Dateiformat für den Browser. Es lässt sich in Illustrator speichern und über CSS stylen. Gut für grafische Elemente und Buttons. Styling-Optionen für SVGs finden sich hier.



<html>