PhineX Lab | Portfolio Step 3

الخطوة ٣

Navbar العائمة (Glassmorphism)

سنصنع شريط تنقل عائماً بتأثير الزجاج الضبابي — أحد أجمل تأثيرات UI الحديثة.

المهام

للـ .navbar: أضف position: fixed، top: 16px، left: 50%، transform: translateX(-50%)، backdrop-filter: blur(20px)

أضف border-radius: 100px و display: flex و z-index: 1000

للـ .nav-links a:hover: أضف color: var(--neon) و background: rgba(57,255,20,.08)

للـ .nav-cta: أضف background: var(--neon)، color: #03050a، border-radius: 100px

💡 backdrop-filter: blur() هو سر تأثير الزجاج. يضبّب ما خلف العنصر — يجب أن يكون للعنصر خلفية شفافة جزئياً مثل rgba(13,16,23,.8)

alexmorgan.dev / portfolio