Skeuomorphe en niveaux de gris Sticky Nav
Une barre de navigation autocollante réactive pour les blogs, stylisée avec un skeuomorphisme à l’aide d’une palette en niveaux de gris. Dispose d’une prise en charge du mode sombre et d’une mise en page simple. Construit avec Tailwind CSS (HTML uniquement), pas de JavaScript. Le design skeuomorphe vise à faire apparaître la barre de navigation comme un élément physique, légèrement en relief.
HTML Code
<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>Composants associés
Composant de navigation collante - Neumorphisme
Un composant de navigation autocollant réactif avec un design Neumorphism, une palette de couleurs complémentaire et une prise en charge du thème sombre, adapté à un site Web de portfolio. Utilise Tailwind CSS avec des classes de mode sombre et inclut des ombres subtiles pour l’effet Neumorphism.
Composant de navigation collante
Une barre de navigation autocollante réactive conçue avec des micro-interactions et une palette de couleurs triadique, adaptée aux blogs et à la consommation de contenu.
Composant de navigation collante
Composant de navigation collant avec le style Glassmorphism, les effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.