Компонент липкой навигации - Нейроморфизм
Адаптивный компонент липкой навигации с дизайном Neumorphism, дополнительной цветовой схемой и поддержкой темных тем, подходящий для веб-сайта-портфолио. Использует Tailwind CSS с темными классами режима и включает тонкие тени для эффекта Неоморфизма.
HTML-код
<nav class="sticky top-0 z-10 bg-gray-200 dark:bg-gray-800 p-4 transition-all duration-300 ease-in-out shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="container mx-auto flex justify-between items-center">
<div class="text-gray-800 dark:text-white text-lg font-bold">Your Logo</div>
<ul class="flex space-x-4">
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Portfolio</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
</li>
</ul>
</div>
</nav>
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #545454;
}
</style>Связанные компоненты
Компонент «Липкая навигация»
Закрепленный компонент навигации со скевоморфизмом, адаптивностью и поддержкой темных тем. Использует CSS Tailwind.
Липкая навигация (стеклянный морфизм)
Компонент Sticky Navigation со стилем Glassmorphism, адаптивностью и поддержкой темной темы.
Компонент «Липкая навигация»
Закрепленный компонент навигации с дизайном в стиле нейроморфизма, дополнительной цветовой схемой, умеренной сложностью и адаптивной поддержкой темной темы для панели управления. Дизайн включает в себя мягкие тени для эффекта неоморфизма и использует дополнительные цвета для создания визуально привлекательного интерфейса. Он подходит для приборной панели, обеспечивающей визуализацию данных и панели управления.