border-radius

Shorthand für:

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

border-radius: [ <length> | <percentage> ]{1,4} [/ [ <length> | <percentage> ]{1,4} ]?

border-radius

• Bei einem Wert, gilt dieser für alle Ecken
• Bei zwei Werten erst top-left und bottom-right, dann top-right und bottom-left
• Bei 3 Werten erst top-left, dann top-right und bottom-left, dann bottom-right
• Bei 4 Werten in der Reihenfolge top-left, top-right, bottom-right, bottom-left

border-radius

Wenn der Wert einen / beinhaltet, gelten die Werte vor dem / für den horizontalen, die Werte nach dem / für den vertikalen Radius.

Bezüglich der Anzahl und Reihenfolge der Werte vor resp. nach dem / werden die gleichen Regeln angewandt wie wenn kein / vorhanden wäre.

Aufgaben

Spiel damit rum und finde heraus, auf was sich Angaben in % beziehen

http://jsbin.com/bigajeguxa/

Definiere einen Kreis

Definiere eine Ellipse

text-shadow

Definiert als kommaseparierte Liste verschieden shadows für den Text und seine decoration.

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 

text-shadow: unset;

Aufgabe

Spiel mit den Schatten. Versuche einen inset Effekt zu erzielen mit mehreren Schatten. Die Suchmaschine deiner Wahl wird dir helfen, eine Lösung zu finden.

background-size

/* Keywords syntax */
background-size: cover;
background-size: contain;

/* One-value syntax */
/* the width of the image (height set to 'auto') */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;

/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Multiple backgrounds values by background-image */
/* Do not confuse this with background-size: auto auto */
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

background-size: inherit;

Mit background-size wird die Grösse des Hintergrunds oder mehrere Hintergrundbilder definiert.

background-size

Wird die Breite oder Höhe in % angegeben, kommt es darauf an, was als background-origin definiert ist. Ist background-attachement: fixed, so gelten nochmals andere Regeln.

Lies dir mindestens den enstprechenden Abschnitt durch: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Gradients

Ein Gradient ist ein Farbverlauf. Mit CSS haben wir zwei (vier) Möglichkeiten, solche Farbverläufe zu erstellen.

linear-gradient

radial-gradient

repeating-linear-gradient

repeating-radial-gradient

linear-gradient

Ein linear-gradient ist ein Farbverlauf zwischen mindestens 2 Farben. Dabei kann die Linie auf der der Gradient verläuft definiert werden.

Hier ist das wunderbar erklärt:

http://tympanus.net/codrops/css_reference/linear-gradient

radial-gradient

Ein radial-gradient ist ein Farbverlauf zwischen mindestens 2 Farben. Der Gradient breitet sich von einem Punkt Kreisförmig aus:

Hier ist das wunderbar erklärt:

http://tympanus.net/codrops/css_reference/radial-gradient

repeating-linear-gradient

repeating-radial-gradient

linear-gradient und radial-gradient gibts auch als repeating.

Hier ist das wunderbar erklärt:

http://tympanus.net/codrops/css_reference/repeating-linear-gradient

http://tympanus.net/codrops/css_reference/repeating-radial-gradient

Generatoren

Es gibt unzählige Generatoren für gradient CSS.

http://www.colorzilla.com/gradient-editor/

http://www.virtuosoft.eu/tools/css-gradient-generator/

Such auch noch ein weitere und probier sie aus.

Aufgabe

Erstelle einige Farbverläufe um etwas Erfahrung zu sammeln. Du kannst auch Generatoren verweden.