Componente di navigazione del neumorfismo
Componente di navigazione del neumorfismo ottimizzato per i siti web di portfolio. Presenta un layout complesso con più elementi interattivi, un design reattivo e il supporto della modalità oscura utilizzando Tailwind CSS. La combinazione di colori è analoga.
Codice HTML
<nav class="p-6 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<span class="text-xl font-bold text-gray-800 dark:text-gray-200">Your Name</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
</div>
<div class="md:hidden">
<button class="text-gray-600 dark:text-gray-400 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
<div class="mobile-menu hidden md:hidden mt-4 space-y-2">
<a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
<a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
<a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
<a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
</div>
</nav>
<style>
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
}
.shadow-neumorphic-text-light {
text-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
}
.dark .shadow-neumorphic-text-dark {
text-shadow: 2px 2px 5px #333333, -2px -2px 5px #555555;
}
</style>Componenti correlati
Componente di navigazione skeuomorfa
Un componente di navigazione scheumorfico progettato per imitare elementi del mondo reale come un pannello di controllo fisico o un cruscotto. Presenta un design reattivo, effetti al passaggio del mouse che simulano la pressione fisica dei pulsanti e supporto per temi scuri. La navigazione include ombre sottili, sfumature e texture per creare un aspetto tattile 3D che ricorda le interfacce fisiche.
Componente di navigazione skeuomorfa
Un componente di navigazione progettato in uno stile scheumorfico, caratterizzato da colori vivaci e un layout reattivo adatto ai contenuti del blog. Include funzionalità interattive come gli effetti al passaggio del mouse ed è ottimizzato per la modalità oscura.
Navigazione nel cruscotto (Material Design)
Componente di navigazione del cruscotto di progettazione dei materiali con combinazione di colori triadica e supporto per la modalità scura.