Beispiel:CSS-custom-props-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>Custom Properties - 3</title>
  <style>
:root {
  --baseHue: 240;   
  --primary: hsl(var(--baseHue) 80% 40%);
  --accent1: hsl(calc(var(--baseHue) - 231) 80% 40%);
  --backgr1: hsl(calc(var(--baseHue) - 231) 80% 40% / .15);
  --accent2: hsl(calc(var(--baseHue) - 200) 90% 50%);
  --backgr2: hsl(calc(var(--baseHue) - 200) 90% 50% / .15);  
}

h1 {
  color: var(--primary);
  background-color: var(--backgr1);
  border: medium solid var(--accent1);
  padding: 1em 1em 1em 200px;
}

a {
  color: var(--accent1);
}


button {
  color: var(--accent1);
  background-color: var(--backgr2);
  border: medium solid var(--accent1);  
  padding: .5em;
  border-radius: .2em;
  font-weight: bold;
}

button:hover,
button:focus {
  color: var(--accent2);
  background-color: var(--accent1);
  border: medium solid var(--accent1);  
}


aside {
  grid-area: aside;	
  color: var(--accent1);
  background-color: var(--backgr2);
  border: medium solid var(--accent2);
  padding: 1em;
  padding: 0.5em;
}

aside > h2 {
  color: var(--hintergrund);
  border-bottom: medium solid transparent;  
}

aside > label {
  display: block;	
  color: var(--primary);
}  

aside > output {
  display: block;	
  width: 5em;
  height: 2em;
  margin-top:.5em;
  background-color: var(--primary);
}  
  
main {
  display: grid;
  grid: "head aside" min-content
        "text aside" 1fr
        / 3fr  1fr;
  grid-gap: 1em;		
}


main > h2 {
  grid-area: head;
}
main > article {
  grid-area: text;
}
 
#suche {
  width: 10em;
  border: 2px solid #999;
  border-radius: 0.5em;
  font-size: 1.2em;
  transition: width 0.5s ease-in-out;
}

#suche:focus {
  font-size: 1.5em;
  width: 50%;
}

</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('#huePicker').addEventListener('input', setHue);
});
	
      function setHue() {
      const root = document.querySelector(':root');
      var huePicker = document.querySelector('#huePicker');
	  root.style.setProperty('--baseHue', huePicker.value);
	   return false;
     };
</script>
</head>
 
<body>
<h1>SELF Dir selbst!</h1>
 
<main>
<h2>Styl' Dein eigenes Theme mit <em>Custom Properties</em></h2>
<article>
	<p>
  		Mit den custom properties, (benutzerdefinierte Eigenschaften) können Sie für Werte von CSS-Eigenschaften zu Beginn des Stylesheets Variablen festlegen und später für beliebige Deklarationen verwenden. 
        So können Sie zum Beispiel eine Farbpalette definieren und müssen Sie bei einem Redesign nur einmal im Dokument ändern. 
	</p>
  	<p>Ändern Sie den Farbton mit Hilfe des Schiebereglers und erstellen Sie Ihr eigenens Theme!
    </p>
	<p> 
    	Hier kommen Sie zurück zum <a href="https://wiki.selfhtml.org/wiki/CSS/Custom_properties_(CSS-Variablen)#ein_ma.C3.9Fgeschneidertes_Theme">Wiki-Artikel</a>!
     </p>

	<button type="button">(funktionsloser) Button</button>

<p><pre><code>
:root {
  --baseHue: 240;   
  --primary: hsl(var(--baseHue) 80% 40%);
  --accent1: hsl(calc(var(--baseHue) - 231) 80% 40%);
  --backgr1: hsl(calc(var(--baseHue) - 231) 80% 40% / .15);
  --accent2: hsl(calc(var(--baseHue) - 200) 90% 50%);
  --backgr2: hsl(calc(var(--baseHue) - 200) 90% 50% / .15);  
}}</code></pre></p>
</article>

<aside>
	<h2>Farbwähler</h2>
    <label for="huePicker">Farbton</label>
	<input type="range" id="huePicker" value="240" min="0" max="360">
	<label for="output">Ergebnis:</label>
	<output id="output"></output>
</aside>

</main>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-custom-props-3.html&oldid=92818“