Saltar al enlace de contenido
Un componente de enlace de salto al contenido con un estilo de diseño de neumorfismo, un esquema de color triádico y un diseño complejo para blogs y sitios web de contenido. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS.
Código 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>
Componentes relacionados
Saltar al componente de enlace de contenido
Un componente de enlace simple y receptivo 'Saltar al contenido' con un estilo artístico / acuarela, un esquema de color triádico y elementos temáticos de agricultura / ganadería, que admite el modo oscuro.
Saltar al componente de enlace de contenido: esqueuomorfismo en escala de grises
Un enlace simple y receptivo "Saltar al contenido" con diseño esqueuomórfico en escala de grises para el contenido del blog. Incluye soporte para modo oscuro.
Saltar al enlace de contenido
Un componente minimalista de enlace de salto de contenido para comercio electrónico, con colores vibrantes, diseño receptivo y compatibilidad con modo oscuro.