Navigazione Neumorfica sui Social Media
Un componente di navigazione per social media semplice e reattivo con un design neumorfico dell'interfaccia utente morbido. Utilizza una combinazione di colori monocromatica e supporta la modalità oscura.
Codice HTML
<nav class="p-4 bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
<div class="container mx-auto flex items-center justify-between">
<div class="text-2xl font-bold text-gray-700 dark:text-gray-200">NuSocial</div>
<div class="flex space-x-4 md:space-x-6">
<a href="#"
class="p-3 rounded-full flex items-center justify-center
bg-gray-100 shadow-neumorphic-light text-gray-600
hover:shadow-neumorphic-light-inset hover:text-blue-500
dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
transition-all duration-300"
aria-label="Home">
<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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0v-9M9 21h6"></path>
</svg>
</a>
<a href="#"
class="p-3 rounded-full flex items-center justify-center
bg-gray-100 shadow-neumorphic-light text-gray-600
hover:shadow-neumorphic-light-inset hover:text-blue-500
dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
transition-all duration-300"
aria-label="Messages">
<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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
</a>
<a href="#"
class="p-3 rounded-full flex items-center justify-center
bg-gray-100 shadow-neumorphic-light text-gray-600
hover:shadow-neumorphic-light-inset hover:text-blue-500
dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
transition-all duration-300"
aria-label="Notifications">
<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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
</a>
<button
class="p-3 rounded-full flex items-center justify-center
bg-gray-100 shadow-neumorphic-light text-gray-600
hover:shadow-neumorphic-light-inset hover:text-blue-500
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
transition-all duration-300"
aria-label="User profile">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar" class="w-6 h-6 rounded-full object-cover">
</button>
</div>
</div>
<!-- Custom Styles for Neumorphic Shadow -->
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
}
.shadow-neumorphic-light-inset {
box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #6e6e6e, -6px -6px 12px #929292;
}
.dark .shadow-neumorphic-dark-inset {
box-shadow: inset 6px 6px 12px #6e6e6e, inset -6px -6px 12px #929292;
}
</style>
</nav>Componenti correlati
Navigazione sociale brutalista
Un componente di navigazione semplice e brutalista per i social media con colori complementari. Include il design reattivo e il supporto per la modalità scura.
Navigazione brutalista sui social media
Un componente di navigazione reattivo progettato in uno stile brutalista per le applicazioni dei social media, utilizzando una combinazione di colori complementari ed elementi minimi.
JobBoardNavigazione
Un componente di navigazione semplice e reattivo per una bacheca di lavoro o una piattaforma di sviluppo della carriera, con toni oceano/blu, microinterazioni al passaggio del mouse e supporto per la modalità scura.