Beispiel:Relative-Color-2.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">
<title>automatische Farbpalette - 2</title>
<style>
:root {
--background: #ddd;
--base: blue;
--base-light-1: oklch(from var(--base) calc(l + 0.25) c h);
--base-light-2: oklch(from var(--base) calc(l + 0.5 ) c h);
--base-dark-1: oklch(from var(--base) calc(l - 0.25) c h);
--base-dark-2: oklch(from var(--base) calc(l - 0.5 ) c h);
--accent-warm: oklch(from var(--base) l c calc(h + 20));
--accent-cool: oklch(from var(--base) l c calc(h - 20));
--accent-complement: oklch(from var(--base) l c calc(h + 180));
--accent-complement-light-1: oklch(from var(--base) calc(l + 0.25 ) c calc(h + 180));
--accent-complement-light-2: oklch(from var(--base) calc(l + 0.5 ) c calc(h + 180));
}
nav li,
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav a,
button {
display: block;
border-radius: 0.5em;
margin-bottom: 0.5em;
padding: 0.5em 1.5em;
white-space: nowrap;
text-decoration: none;
font-weight: bold;
}
nav a {
width: 6em;
background: var(--base-light-2);
border: thin solid;
color: var(--base-dark-2);
}
nav li:first-of-type a {
border-top-left-radius: 3em;
}
nav li:last-of-type a {
border-bottom-right-radius: 3em;
}
nav a:hover,
nav a:focus,
button:hover {
background: var(--base-dark-2);
color: var(--base-light-2);
}
article a,
footer a {
background-color: var(--accent-complement-light-2);
color: var(--accent-complement)
}
article a:hover,
footer a:hover {
background-color: var(--accent-complement);
color: var(--accent-complement-light-2);
}
button {
font-size: 1.25em;
padding: 0.5em;
width: min-content;
border-radius: 50% / 40%;
margin-inline: auto;
background-image: radial-gradient(ellipse, var(--base-light-2) 0%, var(--base-light-1) 100%);
border: thin solid;
color: var(--base-dark-2);
}
h1 {
color: var(--accent-complement-light-1);
background: var(--base);
padding-inline: 2em;
padding-block: 0.2em;
width: min-content;
white-space: nowrap;
margin-left: -1em;
position: relative;
}
h1::before {
content: "";
position: absolute;
display: block;
height: 0;
width: 0;
top: 1em;
left: -0.55em;
border-style: solid;
border-width: 0.6em;
border-color: transparent var(--base-dark-2) transparent transparent;
z-index: -1;
}
h1::after {
content: "";
position: absolute;
display: block;
height: 0;
width: 0;
top: 0;
right: 0;
border-style: solid;
border-width: .75em;
border-color: transparent var(--background) transparent transparent;
}
h2 {
color: var(--base);
}
header,
nav,
article,
aside,
footer {
padding: .5em;
}
header {
position: relative;
grid-column: 2 / -1;
grid-row: 1;
border-left: thin solid;
}
nav {
grid-column: 1;
grid-row: 2 / 4;
}
article {
grid-column: 2;
grid-row: 2 / 4;
border-left: thin solid;
padding-bottom: 2em;
}
aside {
grid-column: 3;
border: medium dashed var(--base-dark-1);
border-radius: 0 0.5em 0.5em;
margin-block: 1em;
}
aside h2 {
--ribbonHeight: 1.5rem;
--ribbonpadding: .25rem;
background: var(--accent-complement-light-2);
border: thin solid var(--base-dark-2);
border-radius: 0 .5em;
font-size: var(--ribbonHeight);
width: min-content;
margin-inline: auto;
padding-inline: 0.5em;
padding-block: var(--ribbonpadding);
white-space: nowrap;
line-height: 1;
position: relative;
top: calc(-1.9 * var(--ribbonHeight));
}
footer {
grid-column: 2 / -1;
grid-row: 4;
text-align: right;
border-top: thin solid;
}
body {
margin: 0 auto;
max-width: 60em;
font-family: sans-serif;
box-sizing: border-box;
color: #333333;
display: grid;
grid-template-columns: 1fr 3fr 1.5fr;
grid-template-rows: min-content 1fr 1fr min-content;
gap: 0 .5em;
min-height: 100vh;
}
html {
background: var(--background);
}
.palette li {
margin-bottom: 0.25em;
}
.palette [role=decoration] {
display:inline-block;
width:1.25em;
aspect-ratio:1;
border:thin solid;
margin-bottom:-0.25em;
}
</style>
</head>
<body>
<header>
<h1>Farbpaletten automagisch erzeugen</h1>
</header>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#link_1.html">Startseite</a>
</li>
<li><a href="#link_2.html">Unterseite 1</a>
</li>
<li><a href="#link_3.html">Unterseite 2</a>
</li>
<li><a href="#link_4.html">Kontakt</a>
</li>
</ul>
</nav>
<aside>
<h2>Tipp</h2>
<p>Ändere den Wert für <code>--base</code> in den Entwickler-Werkzeugen deines Browsers.</p>
<p>Beobachte, was passiert.</p>
</aside>
<article>
<h2>So war's früher!</h2>
<p>Bis jetzt mussten Farben in einem Grafikprogramm ermittelt und dann als HEX-Werte im CSS notiert werden.</p>
<p>Mit <em>custom properties</em> konnte man einzelne Werte mehrfach verwenden.</p>
<h2>Relative Farbangaben</h2>
<p>Mit dem <a href="https://www.w3.org/TR/css-color-5/">CSS Color Module Level 5</a> können nun – ausgehend von einer Grundfarbe – weitere Akzentfarben <strong>automatisch erstellt werden</strong>:</p>
<ul class="palette">
<li><span role="decoration" span style="background: var(--base-dark-2);"></span> <code>--base-dark-2: oklch(from var(--base) calc(l - 0.5 ) c h);</code></li>
<li><span role="decoration" span style="background: var(--base-dark-1);"></span> <code>--base-dark-1: oklch(from var(--base) calc(l - 0.25) c h);</code></li>
<li><span role="decoration" span style="background: var(--base);"></span> <code>--base: blue;</code></li>
<li><span role="decoration" span style="background: var(--base-light-1);"></span> <code>--base-light-1: oklch(from var(--base) calc(l + 0.25) c h);</code></li>
<li><span role="decoration" span style="background: var(--base-light-2);"></span> <code>--base-light-2: oklch(from var(--base) calc(l + 0.5 ) c h);</code></li>
</ul>
<h3>Akzentfarben</h3>
<ul class="palette">
<li><span role="decoration" span style="background: var(--accent-warm);"></span> <code>--accent-warm: oklch(from var(--base) l c calc(h + 20))</code></li>
<li><span role="decoration" span style="background: var(--accent-cool);"></span> <code>--accent-cool: oklch(from var(--base) l c calc(h - 20));</code></li>
<li><span role="decoration" span style="background: var(--accent-complement);"></span> <code>--accent-complement: oklch(from var(--base) l c calc(h + 180))</code></li>
<li><span role="decoration" span style="background: var(--accent-complement-light-1);"></span> <code>--accent-complement-light-1: oklch(from var(--base) calc(l + 0.25 ) c calc(h + 180))</code></li>
<li><span role="decoration" span style="background: var(--accent-complement-light-2);"></span> <code>--accent-complement-light-2: oklch(from var(--base) calc(l + 0.5 ) c calc(h + 180))</code></li>
</ul>
</article>
<aside id="news">
<h2>Top-News</h2>
<p>Gestern gab's Freibier!</p>
<p>Nächster Termin:
<time datetime="2026-02-29 10:00">29. Februar</time>
</p>
<button type="button">Anmelden!</button>
</aside>
<footer> <a href="#kontakt.html">Kontakt</a>
<p>© 2023 SELFHTML</p>
</footer>
</body>
</html>
