Beispiel:Color-mix-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" >
<title>Farbkontraste mit relativer Syntax</title>
<style>
aside {
border: medium solid;
border-radius: 1rem;
padding: 0;
display: flex;
flex-flow: column nowrap;
color: var(--tone);
background-color: oklch(from var(--tone) calc(l + 45) calc(c * 0.5) h);
box-shadow: 0.3em 0.6em 1em
color-mix(in oklch, var(--tone) 90%, black 10%);;
h2 {
margin: 0 0 1rem;
border-radius: .8rem .8rem 0 0;
text-align:center;
background-color: var(--tone);
color: oklch(from var(--tone) calc(l + 40) c h);
}
p {
padding: 0 1em;
}
p:last-of-type {
margin-top:auto;
}
}
.info {
--tone: var(--color-primary);
}
.warning {
--tone: var(--color-secondary);
}
.success {
--tone: var(--color-tertiary);
}
button {
background-color: var(--color-accent);
color: oklch(from var(--color-accent) calc(l - 50) c h);
padding: 0.2em 0.5em;
border-radius: 0.5em;
}
button:hover,
button:focus {
background-color: oklch(from var(--color-accent) calc(l * 1.1) c h);
}
/* GLOBAL */
:root {
--color-primary: oklch(50% 0.1 240);
--color-secondary: oklch(50% 0.2 30);
--color-tertiary: oklch(50% 0.2 120);
--color-accent: oklch(75% 0.2 90);
}
.not-supported {
background: #600;
border-radius: 8px;
color: #fff;
font-size: 0.9rem;
padding: 0.5rem 1rem;
position: fixed;
@supports (background: oklch(from var(--color-tertiary) calc(l + 45) calc(c *0.5) h)) {
display: none;
}
}
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
gap: 3em;
font-family: sans-serif;
max-width: 50em;
margin: 1em auto;
}
h1 {
grid-column: 1 / -1;
}
</style>
</head>
<body>
<aside class="card info">
<h2>Farben mischen</h2>
<p>Ausgehend von unserer Grundfarbe <code> oklch(50% 0.1 240)</code> erzeugen wir drei weitere Farben mit anderen Werten für hue.</p>
<p> <button class="button__primary">→ mehr</button>
<button class="button__secondary">überspringen!</button>
</p>
</aside>
<aside class="card success">
<h2>Info aktualisiert</h2>
<p>Mehr Sicherheit mit 2-Faktor-Authentifizierung.</p>
<p> <button class="button__primary">→ weiter</button>
<button class="button__secondary">Später!</button>
</p>
</aside>
<aside class="card warning">
<h2>Session unterbrochen</h2>
<p>Ihr Account war seit mehr als 10min inaktiv.</p>
<p> <button class="button__primary">→ Einloggen</button>
<button class="button__secondary">Schließen!</button>
</p>
</aside>
<p class="not-supported">Die hier verwendeten Farb-Funktionen werden in diesem Browser nicht unterstützt.</p>
</body>
</html>
