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 Komponente vom Typ "Zum Inhaltslink springen", die mit skeuomorphen Elementen entworfen wurde, die einer physischen Schaltfläche ähneln. Die Komponente verfügt über ein pastellfarbenes Schema, eine moderate Komplexität einschließlich Hover-Effekten und Unterstützung für dunkles Design.

Offen

Zum Inhaltslink springen

Eine Komponente vom Typ "Zum Inhaltslink springen", die nach den Prinzipien des Materialdesigns, einem monochromatischen Farbschema und der Unterstützung des Dunkelmodus gestaltet ist. Es eignet sich für E-Commerce-Websites und wird mit Tailwind CSS ohne JavaScript erstellt.

Offen

Zur Inhaltslink-Komponente springen

Eine Webkomponente, die unter Verwendung von Tailwind CSS einen 3D-formatierten Link "Zum Inhalt springen" mit responsiven Effekten und Unterstützung für dunkle Themen bereitstellt.

Offen