Aller au lien de contenu
Un composant de lien Skip to Content avec un style de conception Neumorphism, une palette de couleurs triadique et une mise en page complexe pour les blogs et les sites Web de contenu. Il inclut un design réactif et la prise en charge du mode sombre à l’aide de Tailwind CSS.
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>
Composants associés
Aller au lien de contenu
Un composant de lien réactif « Skip to Content » stylisé avec Glassmorphism, mettant en œuvre un schéma de couleurs complémentaire, une complexité modérée et une prise en charge du mode sombre adapté aux sites Web d’entreprise. Ce composant est implémenté uniquement en HTML avec les classes CSS Tailwind, ne nécessitant aucun JavaScript.
Aller au lien de contenu
Composant de lien aligné sur les principes de Material Design, avec une conception réactive, la prise en charge du mode sombre et une palette de couleurs monochromatique simple pour les applications de médias sociaux.
Aller au composant de lien de contenu
Un composant Web qui fournit un lien « Passer au contenu » de style 3D avec des effets réactifs et la prise en charge du thème sombre, à l’aide de Tailwind CSS.