Schräge Kanten
Schräge Kanten bei Artikeln mit Hintergrundfarbe
Voraussetzungen
- NATURE Theme ab Version 2.6.0
- V2-Installation mit CSS-Variablen (nicht SCSS-Variablen)
- Contao 5
- Verwendung von Bulma 1.x
Dieses Feature ermöglicht schräge Kanten an Artikeln mit Hintergrundfarben.
Schräge Kanten - CSS-Klassen
Die CSS-Klassen für schräge Kanten fügst du in den Artikeleinstellungen unter dem Feld CSS-Stil-Auswahl hinzu.
Wenn du eine neuere Version der Theme-Demo nutzt, sind die Klassen dort auswählbar. Andernfalls kannst du die Klassen
auch direkt in das Feld für die CSS-Klasse eintragen.
| Schräge Kante | CSS-Klasse |
|---|---|
| Schräge oben ↖ (steigt nach links) | has-slope-top-left |
| Schräge oben ↗ (steigt nach rechts) | has-slope-top-right |
| Schräge unten ↘ (fällt nach rechts) | has-slope-bottom-right |
| Schräge unten ↙ (fällt nach links) | has-slope-bottom-left |
Hintergrundfarben Klassen
Die schrägen Kanten funktionieren nur in Verbindung mit Hintergrundfarben. Weise einem Artikel z. B. eine der folgenden Klassen zu:
| Klasse | Hintergrundfarbe (Beispiel) |
|---|---|
has-background-white |
hsl(0, 0%, 100%) |
has-background-black |
hsl(0, 0%, 4%) |
has-background-light |
hsl(0, 0%, 96%) |
has-background-dark |
hsl(0, 0%, 21%) |
has-background-primary |
hsl(171, 100%, 41%) |
has-background-link |
hsl(217, 71%, 53%) |
has-background-info |
hsl(204, 86%, 53%) |
has-background-success |
hsl(141, 71%, 48%) |
has-background-warning |
hsl(48, 100%, 67%) |
has-background-danger |
hsl(348, 100%, 61%) |
Weitere Hintergrundschattierungen
| Klasse | Hintergrundfarbe (Beispiel) |
|---|---|
has-background-black-bis |
hsl(0, 0%, 7%) |
has-background-black-ter |
hsl(0, 0%, 14%) |
has-background-grey-darker |
hsl(0, 0%, 21%) |
has-background-grey-dark |
hsl(0, 0%, 29%) |
has-background-grey |
hsl(0, 0%, 48%) |
has-background-grey-light |
hsl(0, 0%, 71%) |
has-background-grey-lighter |
hsl(0, 0%, 86%) |
has-background-white-ter |
hsl(0, 0%, 96%) |
has-background-white-bis |
hsl(0, 0%, 98%) |
Beispiel
Eine Beispielseite mit schrägen Kanten findest du in unserer Theme Demo:
https://nature.contao-themes.net/layouts/schraege-kanten.html
Dort sind zwischen farbigen Artikeln jeweils Artikel ohne Hintergrundfarbe und Schräge-Klassen gesetzt, um den Effekt zu erzeugen.
