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" semplice e reattivo con uno stile acquerello/artistico, una combinazione di colori triadica ed elementi tematici di agricoltura/allevamento, che supporta la modalità scura.
Vai al componente Collegamento contenuto
Un collegamento Salta al contenuto in stile 3D visivamente accattivante che aiuta gli utenti a bypassare i menu di navigazione su un'interfaccia di social media. Il componente utilizza uno schema di colori complementari (blu e arancione) con un effetto 3D ottenuto attraverso ombre e trasformazioni. Presenta un design reattivo e il supporto per temi scuri. Il collegamento appare fisso nella parte superiore sinistra della finestra quando è attivo o attivo, il che lo rende facilmente accessibile per la navigazione da tastiera pur rimanendo discreto quando non è in uso.
Vai al componente Collegamento contenuto
Un componente Salta al collegamento al contenuto progettato con elementi 3D, tonalità della terra e personalizzato per le interfacce del dashboard. Include stili per temi chiari e scuri.