Vai al collegamento al contenuto
Un componente Salta al collegamento al contenuto con stile di progettazione Neumorfismo, una combinazione di colori triadica e un layout complesso per blog e siti Web di contenuti. Include un design reattivo e il supporto per la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<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>
Componenti correlati
Vai al componente Collegamento contenuto
Un componente di collegamento Salta al contenuto reattivo per una dashboard con uno stile di neumorfismo e una combinazione di colori dei toni della Terra.
Vai al componente Collegamento contenuto
Glassmorphism Salta al collegamento al contenuto con un effetto vetro smerigliato, sfocatura, reattività e supporto per la modalità scura utilizzando Tailwind CSS, senza JavaScript.
Vai al collegamento al contenuto
Un componente Passa al collegamento al contenuto con uno stile basato sui principi di Material Design, una combinazione di colori monocromatica e il supporto della modalità scura. È adatto per siti di e-commerce ed è costruito utilizzando Tailwind CSS senza JavaScript.