CCHub Logo CCHub Tailwind Collection
Komponenten Zum Inhaltslink springen Zum Inhaltslink springen

Zum Inhaltslink springen

Eine "Skip to Content Link"-Komponente mit dem Designstil "Neumorphism", einem triadischen Farbschema und einem komplexen Layout für Blog- und Content-Websites. Es beinhaltet Responsive Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Vorschau

HTML-Code 

<a href="#content" class="skip-to-content-link">
  Skip to Content
</a>

<style>
  .skip-to-content-link {
    position: absolute;
    top: -40px;
    left: 0;
    background-color: #5a8f7b; /* One color from a triadic scheme */
    color: #e0f7fa; /* Another color from a triadic scheme */
    padding: 8px 12px;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    /* Neumorphism styles */
    border-radius: 10px;
    box-shadow: 7px 7px 15px rgba(50, 50, 50, 0.2), -7px -7px 15px rgba(255, 255, 255, 0.7);
  }

  .skip-to-content-link:focus {
    top: 10px;
    /* Neumorphism inset effect on focus */
    box-shadow: inset 5px 5px 10px rgba(50, 50, 50, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.7);
  }

  /* Dark mode styles */
  .dark .skip-to-content-link {
    background-color: #2c5f2d; /* Darker shade of the triadic color */
    color: #b2ebf2; /* Lighter shade of the triadic color */
    box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.5), -7px -7px 15px rgba(70, 70, 70, 0.7);
  }

  .dark .skip-to-content-link:focus {
     box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(70, 70, 70, 0.7);
  }

  @media (max-width: 768px) {
    .skip-to-content-link {
      padding: 6px 10px;
    }
  }
</style>

Verwandte Komponenten

Zur Inhaltslink-Komponente springen

Eine einfache, zugängliche Skip-to-Content-Link-Komponente, die für Reise-/Tourismus-Websites entwickelt wurde, mit einem sepia/braunen Farbschema und Unterstützung für den Dunkelmodus, um die Belastung der Augen zu reduzieren.

Offen

Zum Inhaltslink springen

Eine minimalistische Komponente zum Überspringen von Content-Links für den E-Commerce mit lebendigen Farben, responsivem Design und Unterstützung für den Dunkelmodus.

Offen

Retro_Industrial_Skip_Content

Eine Link-Komponente im Retro-/Vintage-Stil für Industrie- und Fertigungswebsites mit 80er/90er-Jahre-Ästhetik, einem komplementären Farbschema (Orange/Blaugrün) und Unterstützung für den Dunkelmodus. Diese komplexe Komponente enthält interaktive Elemente für eine umfassende Benutzererfahrung.

Offen