Beispiel:CSS-custom-props-1.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>CSS-Variablen - 1</title>
  <style>
:root {
  --primary: #666;
  --hintergrund: #ccc;
  --akzent: #c32e04;
  --linkfarbe: #09c;
}

h2 {
  color: var(--primary);
  border-bottom: medium solid var(--akzent);
}

aside {
  grid-area: aside;	
  color: var(--akzent);
  background-color: var(--primary);
  border: medium solid var(--akzent);
  padding: 0.5em;
}

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

aside > label {
  color: black;
  background-color: var(--akzent);
}

main {
  display: grid;
  grid: "head aside" min-content
        "text aside" 1fr
        / 3fr  1fr;
  grid-gap: 1em;		
}


main > h2 {
  grid-area: head;
}
main > p {
  grid-area: text;
}
 
#suche {
  width: 10em;
  border: medium 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>
</head>
 
<body>
  <h1>CSS-Variablen (<em>Custom Properties</em>)</h1>
 
  <main>
  <h2><em>(Custom Properties)</em></h2>
  <p>
  Mit <em>custom properties</em>, (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 diese bei einem Redesign nur einmal im Dokument ändern. 
  </p>
    <aside>
    <h2>Suche</h2>
    <label for="suche">Suchbegriff eingeben</label>
    <input type="search" id="suche" placeholder="Suche…">
   </aside>

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