border-radius, text-shadow, box-shadow
background-size, background-position
linear-gradients, radial-gradient
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} ]?
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.
Spiel damit rum und finde heraus, auf was sich Angaben in % beziehen
Definiere einen Kreis
Definiere eine Ellipse
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;
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.
Definiert als kommaseparierte Liste verschieden shadows für Boxen.
/* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 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.
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
background-origin: border-box; background-origin: padding-box; background-origin: content-box; background-origin: inherit;
background-origin definiert die positioning area des Hintergrunds.
Wende background-size und background-origin und background-attachment an, und verstehe was du damit bewirken kannst.
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
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:
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:
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
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.
Erstelle einige Farbverläufe um etwas Erfahrung zu sammeln. Du kannst auch Generatoren verweden.
Unterschiedliche border-radius für horizontal und vertikal: http://jsbin.com/codebu/edit?html,css,output
Box Shadow Effects: http://www.paulund.co.uk/playground/demo/css_box_shadow/
background-size: http://jsbin.com/muqufu