Vai al componente Collegamento contenuto
Un componente di collegamento neumorfico "Salta al contenuto" per l'accessibilità nelle applicazioni tecnologiche/SaaS, caratterizzato da una combinazione di colori viola/viola e reattività completa con supporto della modalità scura.
Codice HTML
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-6 focus:py-3 focus:rounded-xl focus:font-semibold focus:text-purple-800 focus:bg-purple-200 focus:shadow-neumorphic-light dark:focus:text-purple-200 dark:focus:bg-purple-800 dark:focus:shadow-neumorphic-dark motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-purple-950 focus:ring-offset-purple-50">Skip to Main Content</a>
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0a1c6, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #4a148c,
-6px -6px 12px #9c27b0;
}
</style>Componenti correlati
Vai al componente Collegamento contenuto
Un componente Salta al collegamento al contenuto progettato con elementi scheumorfici simili a un pulsante fisico. Il componente avrà una combinazione di colori pastello, una complessità moderata che include effetti al passaggio del mouse e il supporto per il tema scuro.
Vai al collegamento al contenuto
Un componente Salta al collegamento al contenuto nello stile di progettazione 3D, con una combinazione di colori color terra, progettato per l'e-commerce con una complessità moderata. Include un design reattivo e il supporto per i temi scuri.
Vai al componente Collegamento contenuto
Un componente di collegamento semplice e accessibile per saltare al contenuto progettato per siti Web di viaggi/turismo, con una combinazione di colori seppia/marrone e supporto per la modalità scura per ridurre l'affaticamento degli occhi.