Link
Recent Posts
Recent Comments
«   2025/11   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
Tags more
Today
Total
관리 메뉴

웹솔루션개발 25년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Premium Responsive Navbar 본문

웹프로그램밍 자료실/HTML 자료

[해피CGI][cgimall] Premium Responsive Navbar

해피CGI윤실장 2025. 9. 16. 09:02

웹 인터페이스를 위해 설계된 최첨단 UI 구성 요소 내비게이션 디자인 입니다.
디자인할때 참고하면 유용할거 같습니다.
자세한 내용은 데모를 참고해 주시기 바랍니다.






HTML

<div class="bg-black text-white font-['Space_Grotesk'] overflow-x-hidden">
    <!-- Background elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
        <div class="absolute top-20 left-10 w-96 h-96 bg-indigo-900/10 rounded-full blur-3xl"></div>
        <div class="absolute bottom-10 right-10 w-80 h-80 bg-purple-900/10 rounded-full blur-3xl"></div>
        <div class="absolute top-40 right-20 w-64 h-64 bg-cyan-900/10 rounded-full blur-3xl"></div>
        
        <!-- Decorative grid lines -->
        <div class="absolute inset-0 grid grid-cols-12 opacity-5 pointer-events-none">
            <div class="border-r border-cyan-500"></div>
            <div class="border-r border-cyan-500"></div>
            <div class="border-r border-cyan-500"></div>
            <div class="border-r border-cyan-500"></div>
            <div class="border-r border-cyan-500"></div>
            <div class="border-r border-cyan-500"></div>
            <div class="border-r border-cyan-500"></div>
            <div class="border-r border-cyan-500"></div>
            <div class="border-r border-cyan-500"></div>
            <div class="border-r border-cyan-500"></div>
            <div class="border-r border-cyan-500"></div>
            <div class="border-r border-cyan-500"></div>
        </div>
        <div class="absolute inset-0 grid grid-rows-12 opacity-5 pointer-events-none">
            <div class="border-b border-cyan-500"></div>
            <div class="border-b border-cyan-500"></div>
            <div class="border-b border-cyan-500"></div>
            <div class="border-b border-cyan-500"></div>
            <div class="border-b border-cyan-500"></div>
            <div class="border-b border-cyan-500"></div>
            <div class="border-b border-cyan-500"></div>
            <div class="border-b border-cyan-500"></div>
            <div class="border-b border-cyan-500"></div>
            <div class="border-b border-cyan-500"></div>
            <div class="border-b border-cyan-500"></div>
            <div class="border-b border-cyan-500"></div>
        </div>
    </div>
</div>
 

 

저작자표시 (새창열림)

'웹프로그램밍 자료실 > HTML 자료' 카테고리의 다른 글

[해피CGI][cgimall] Animated CSS Gradient Border 애니메이션 CSS 그라데이션 테두리  (0) 2025.09.18
[해피CGI][cgimall] wavy background 물결 모양 배경 css  (0) 2025.09.17
[해피CGI][cgimall] GenArt / Simplex noise  (0) 2025.09.11
[해피CGI][cgimall] 모바일에서 쓰기 좋은 애니메이션 메뉴 Mobile Menu Animation  (0) 2025.09.02
[해피CGI][cgimall] 가격이 올라가는 카운터 애니메이션  (0) 2025.08.27
공유하기 링크
'웹프로그램밍 자료실/HTML 자료' Related Articles more
Comments