Navegación pegajosa skeuomórfica en escala de grises
Una barra de navegación pegajosa y receptiva para blogs, diseñada con esqueuomorfismo utilizando una paleta en escala de grises. Cuenta con soporte para modo oscuro y un diseño simple. Construido con Tailwind CSS (solo HTML), sin JavaScript. El diseño skeuomórfico tiene como objetivo hacer que la barra de navegación parezca un elemento físico ligeramente elevado.
Código HTML
<nav class="sticky top-0 z-50 bg-gray-200 dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700 shadow-[0_1px_0px_rgba(255,255,255,0.3)_inset,_0_1px_2px_rgba(0,0,0,0.2)] dark:shadow-[0_1px_0px_rgba(255,255,255,0.04)_inset,_0_1px_2px_rgba(0,0,0,0.5)]">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex-shrink-0">
<a href="#" class="text-xl font-semibold text-gray-800 dark:text-gray-100 hover:text-black dark:hover:text-white transition-colors duration-150">
MySkeuoBlog
</a>
</div>
<!-- Desktop Navigation Links -->
<div class="hidden sm:flex sm:items-center sm:space-x-3 md:space-x-5">
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
Home
</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
Articles
</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
Categories
</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
About
</a>
</div>
<!-- Mobile menu button (decorative as no JS for toggle) -->
<div class="sm:hidden flex items-center">
<button type="button" class="p-2 rounded-md text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-600" aria-label="Main menu" aria-expanded="false">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
</nav>Componentes relacionados
Componente de navegación pegajoso brutalista
Barra de navegación pegajosa brutalista en escala de grises para un blog compatible con el modo oscuro
Componente de navegación pegajoso - Modo oscuro Pastel
Una barra de navegación fija diseñada para el modo oscuro, con un diseño responsivo y acentos en colores pastel. La barra de navegación permanece en la parte superior de la ventanilla a medida que el usuario se desplaza, lo que mejora la usabilidad de las páginas con mucho contenido. Incluye marcadores de posición para un logotipo o título de sitio y enlaces de navegación, con estilo Tailwind CSS para una apariencia moderna y limpia.
Componente de navegación pegajoso - Pastel neumórfico
Un componente de navegación complejo y pegajoso con un estilo de diseño de neumorfismo y un esquema de color pastel, adecuado para documentación o sitios wiki. Cuenta con elementos de navegación anidados, una barra de búsqueda y compatibilidad con el modo oscuro, todo implementado con HTML y Tailwind CSS para una capacidad de respuesta completa.