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 « Aller au contenu » pour l’accessibilité, conçu pour les tableaux de bord en mode sombre avec une palette de couleurs en niveaux de gris. Il est modérément complexe en raison du style réactif et du mode sombre. Aucun JavaScript n’est utilisé. Utilise Tailwind CSS avec les préfixes dark : pour la prise en charge du thème sombre.
Aller au lien de contenu
Un composant de lien Aller au contenu dans le style de conception 3D, avec une palette de couleurs de terre, conçu pour le commerce électronique avec une complexité modérée. Il comprend un design réactif et une prise en charge du thème sombre.
SkipToContentLink
Passer à Composant de lien de contenu avec interface utilisateur en mode sombre, schéma de couleurs triadique et complexité simple pour le commerce électronique.