Nav appiccicoso skeuomorfo in scala di grigi
Una barra di navigazione appiccicosa reattiva per i blog, stilizzata con scheumorfismo utilizzando una tavolozza in scala di grigi. Dispone di supporto per la modalità oscura e un layout semplice. Costruito con Tailwind CSS (solo HTML), senza JavaScript. Il design scheumorfico mira a far apparire la barra di navigazione come un elemento fisico, leggermente rialzato.
Codice 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>Componenti correlati
Componente di navigazione permanente
Un componente di navigazione appiccicoso progettato per la modalità oscura con effetti reattivi utilizzando Tailwind CSS.
Componente di navigazione permanente
Un componente di navigazione appiccicoso dal design piatto minimalista con una combinazione di colori monocromatica per siti Web aziendali/aziendali. Il design include più elementi interattivi e supporta il tema scuro.
Componente di navigazione permanente
Un componente di navigazione appiccicosa reattivo con i principi del Material Design utilizzando Tailwind CSS, con un tema scuro e che include immagini segnaposto e avatar casuali.