.element {
height: 100px;
overflow: hidden; | größerer Inhalt wird versteckt
overflow: scroll; | größerer Inhalt wird gescrollt
overflow-x, overflow-y; | Trennung in X und Y Achse
}
scroll-snap-type: y mandatory; Vertikal Scrollen und Snap Points streng
einhalten
scroll-snap-type: x proximity; scrolled der Browser nur automatisch, wenn
man sich in
der
Nähe
der Oberkante befindet
scroll-snap-align: start; An der Oberkante jeder Sektion soll gestoppt
werden
scroll-snap-align: center; Die Mitte eines Bildes ist der Snap Point
scroll-padding: 50px; kommt zum Einsatz, wenn ein Innenabstand zum Snap
Point gesetzt
werden
soll.
scroll-margin-top: 50px;
scroll-margin: 50px 0 0 50px;
Das Hinzufügen von scroll-margin ist nützlich, wenn Sie einem Element Abstand vom Rand
des Containers geben müssen. css-tricks/scroll-margin
Steuert dass der Browser an bestimmten
Stellen im Layout einrastet, wenn über diese Punkte hinweg gescrollt werden soll.
filter: drop-shadow(10px 10px 10px black); | mit dem Schlagschatten
bekommen mehr Objekte als nur Kreis und Rechteck ein Schatten selfhtml/schlagschatten
div {
height: 50px;
width: 45%;
background-color: red;
-webkit-box-reflect: right 15px linear-gradient(to
right,transparent,red);
}
die Werte können sein: below, above, left , oder
right.
Die 15px im Beispiel geben den Abstand an, zum Original.
Es lässt sich auch ein Image spiegeln.
outline hebt Elemente durch eine Rahmen hervor und sitzt anders als border außerhalb des
Elements. Aktive Eingabefelder zeigen outline automatisch.
Da outline außerhalb von border um das Element aufgezogen wird, kann ein Element sowohl
einen Rahmen mit border als auch eine Umrandung mit outline zeigen. outline ist immer an
allen vier Seiten gleich breit und hat überall dieselbe Farbe. Ein »outline nur unten« –
outline-bottom – gibt es also nicht. outline nimmt keinen Platz in Anspruch und
wird
nicht wie border zur Breite des Elements gerechnet.
.elem { outline: 25px dotted blue; outline-offset: 15px }
Die visuelle Darstellung der Umrandung hat die gleichen Werte wie bei border.
outline-offset schafft Abstand zwischen border und outline.
Es gibt Situationen, da stört das outline. Man sollte dann aber das outline
NICHT deaktivieren, sondern outline-color: transparent;
machen. Das hat den Vorteil wenn ein User den High Contrast Mode aktiviert, dann noch
vorhanden ist.
vh (viewport height) und vw (viewport width) funktionieren wunderbar
auf dem Desktop, machen aber Probleme im mobile Browser. Dafür gibt es svh/svw
wenn die Toolbars oben und unten angezeigt werden. lvh/lvw für den
Anzeigebereich ohne die Toolbars. Und zum Schluss gibt es noch dvh/dvw womit
sich der Viewport automatisch anpasst, ob die Toolbar angezeigt wird oder nicht.
Die Eigenschaft inset ist eine Abkürzung für die vier Eigenschaften von inset,
nämlich top, right, bottom und left in einer Erklärung. Genau wie die vier
einzelnen Eigenschaften selbst benötigt inset eine position Deklaration wie relative,
absolute oder fixed, bevor die inset-Eigenschaften wirksam werden können.
.box {
position: relative;
inset: auto 20px auto 30px;
}
Ein festes Seitenverhältnis von Bildern oder Objekten kann mit aspect-ratio
erzwungen werden. Web-Layouts und einzelne Komponenten ändern ihre Abmessungen i.d.R.
unabhängig in Breite und Höhe. Sie skalieren (bis auf wenige Ausnahmen wie die HTML
<img> oder <video> Elemente) nicht proportional. Das Beibehalten oder das
Verändern des Seitenverhältnisses ist allerdings häufig ein Schlüsselfaktor, wenn es um
Layout-Entscheidungen im responsive Design geht.