Akzentfarben & Hervorhebung

Teil des Abschnitts Practical Frontend der HTML-Journey von Coddy — Lektion 14 von 35.

Akzentfarben helfen dabei, wichtige Elemente hervorzuheben, wie zum Beispiel Schaltflächen, Links, Call-to-Action-Bereiche oder markierten Text. Sie können diese als CSS-Variablen (--primary-color, --accent-color, --highlight-color) definieren und sie konsistent auf Ihrer gesamten Website verwenden. Hover-Zustände und Highlights können diese Variablen ebenfalls nutzen, was es einfach macht, ein visuell ansprechendes und stimmiges Design zu erstellen und gleichzeitig die Aufmerksamkeit auf wichtige Inhalte zu lenken.

Erstellen Sie eine CSS-Variable für Ihre Akzentfarbe:

:root {
  --accent-color: #ff6b6b;
}

Verwenden Sie die Akzentfarbe für wichtige interaktive Elemente wie Schaltflächen:

.button-primary {
  background-color: var(--accent-color);
  color: white;
}

Hebe aktive Navigationspunkte mit der Akzentfarbe hervor:

.nav-item.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
}

Aufgabe

Einfach

Deine Aufgabe:

Lege die Akzentfarbe fest unter Verwendung einer CSS-Variablen --accent-color.
Wende die Akzentfarbe an auf alle Schaltflächen auf der Seite.
Ändere den Hover-Zustand der Schaltflächen zur Primärfarbe.
Wende die Akzentfarbe an auf Links, hervorgehobenen Text und Footer-Links für ein konsistentes Erscheinungsbild.

Spickzettel

Akzentfarben helfen dabei, wichtige Elemente hervorzuheben. Definieren Sie diese als CSS-Variablen und verwenden Sie sie konsistent auf Ihrer gesamten Website.

Erstellen Sie eine CSS-Variable für Ihre Akzentfarbe:

:root {
  --accent-color: #ff6b6b;
}

Verwenden Sie die Akzentfarbe für Schaltflächen:

.button-primary {
  background-color: var(--accent-color);
  color: white;
}

Heben Sie aktive Navigationselemente hervor:

.nav-item.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
}

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Accent Colors & Highlighting</title>
  <style>
    :root {
      --primary-color: #1e90ff;
      --text-color: #222;
      --bg-color: #f9f9f9;
      
    }

    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    header {
      background-color: var(--primary-color);
      color: white;
      padding: 1rem;
      text-align: center;
    }

    main {
      padding: 2rem;
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .card {
      background-color: white;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .card h2 {
      margin-top: 0;
      color: var(--primary-color);
    }

    .card button {
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      cursor: pointer;
    }

    a {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .highlight {
      color: white;
      padding: 0 4px;
      border-radius: 3px;
    }

    footer {
      background-color: #222;
      color: white;
      text-align: center;
      padding: 1rem;
      margin-top: 2rem;
    }

    footer a {
      margin: 0 0.5rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Summer Music Festival</h1>
    <p>Experience <span class="highlight">unforgettable</span> music and vibes all summer long!</p>
  </header>

  <main>
    <div class="card">
      <h2>Rock Stage</h2>
      <p>Join the rock legends for an unforgettable night of music! <a href="#">More info</a></p>
      <button>Learn More</button>
    </div>

    <div class="card">
      <h2>Jazz Stage</h2>
      <p>Relax with smooth jazz performances under the open sky. <a href="#">Schedule</a></p>
      <button>Learn More</button>
    </div>

    <div class="card">
      <h2>EDM Stage</h2>
      <p>Dance all night with top DJs spinning the hottest tracks. <a href="#">Lineup</a></p>
      <button>Learn More</button>
    </div>
  </main>

  <footer>
    <p>Follow us on <a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Twitter</a></p>
  </footer>
</body>
</html>