ForumKalbi.Com - HTML - CSS - XML

CSS ile Responsive Bir Navigasyon Men�s� Yap�m� (Mobil Uygunluk �nemli!)

Matsuro — Thu, 22 Oct 2026 07:00:01 GMT

Selam millet!

Umar�m herkes iyidir. Ben de yeni bir proje �zerinde �al��yorum ve mobil cihazlarda g�zel g�r�nen, ayn� zamanda desktop'ta da sorunsuz �al��an bir navigasyon men�s� yapmam gerekiyor. Bu konuda biraz tak�ld�m ve tecr�beli arkada�lardan yard�m almak istedim.

�zellikle responsive tasar�mda men�lerin nas�l daha ak�c� hale getirilebilece�i konusunda fikirlerinizi almak istiyorum. Belki "hamburger" men� yerine daha farkl�, ��k ��z�mleriniz vard�r? Ya da mevcut ��z�mleri daha da iyile�tirecek CSS hileleri?

�u ana kadar denediklerim aras�nda flexbox ve media query'ler var ama daha profesyonel yakla��mlar varsa duymaya haz�r�m. �zellikle animasyonlar ve ge�i�ler konusunda da fikirlerinizi bekliyorum.

Yard�mc� olabilecek arkada�lara �imdiden te�ekk�rler!

�yi forumlar.

Html geri say�m sayac�

OzanLoji — Tue, 20 Oct 2026 21:10:57 GMT

Bu kod, modern bir cam efekti (glassmorphism) tasar�m�na sahip, aray�z�nde ayar paneli bulundurmayan, do�rudan sabit bir hedef tarihe g�re �al��an tek dosyal�k bir geri say�m sayac�d�r.

�ne ��kan �zellikleri:
G�rsel Tasar�m: Arka plandaki renkli neon parlamalar ve buzlu cam kart g�r�n�m�yle olduk�a ��k ve modern bir aray�z sunar.

Canl� Say�m: Belirlenen hedefe kalan g�n, saat, dakika ve saniyeyi her saniye g�ncelleyerek g�sterir.

S�re Bitimi Kutlamas�: Geri say�m s�f�rland��nda otomatik olarak ekranda konfeti patlat�r ve kutlama mesaj� g�sterir.

Hedef Tarih Nas�l De�i�tirilir?
Kodun i�indeki JavaScript b�l�m�nde yer alan �u iki sat�r� kendi etkinli�inize g�re d�zenleyebilirsiniz:

EVENT_TITLE: Sayac�n �zerinde g�r�necek etkinlik ba�l��.

TARGET_DATE_STRING: Sayac�n geri sayaca�� hedef tarih ve saat (YYYY-MM-DDTHH:MM:SS format�nda).

HTML-Kodu:



"tr">



    "UTF-8">

    "viewport" content="width=device-width, initial-scale=1.0">

    </span>Sade & Modern Geri Say�m Sayac�<span style="color:#000080">

    

    

    

    "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">

    

    

    

    



    



"text-slate-100 flex flex-col justify-between p-4 md:p-8 relative overflow-x-hidden min-h-screen">



    

    "glow-1 absolute -top-20 -left-20 w-96 h-96 rounded-full pointer-events-none z-0">

    "glow-2 absolute -bottom-20 -right-20 w-96 h-96 rounded-full pointer-events-none z-0">



    

    "relative z-10 text-center my-auto pt-8">

        "inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card text-xs md:text-sm font-medium text-indigo-300 mb-4 border border-indigo-500/20">

            "w-4 h-4 text-indigo-400">

            Geri Say�m

        

        

        "eventTitleDisplay" class="text-4xl md:text-6xl font-extrabold font-outfit tracking-tight bg-gradient-to-r from-white via-indigo-200 to-indigo-400 bg-clip-text text-transparent px-4">

            Yeni Y�l Geri Say�m�

        

    



    

    "relative z-10 max-w-4xl mx-auto w-full my-auto py-8">



        "grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-8">

            

            

            "glass-card rounded-3xl p-6 md:p-8 text-center relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">

                "absolute inset-0 bg-gradient-to-b from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">

                "days" class="block text-5xl md:text-7xl font-bold font-outfit text-white tracking-tight my-2">00

                "text-xs md:text-sm uppercase tracking-widest text-indigo-300/80 font-medium">G�n

            



            

            "glass-card rounded-3xl p-6 md:p-8 text-center relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">

                "absolute inset-0 bg-gradient-to-b from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">

                "hours" class="block text-5xl md:text-7xl font-bold font-outfit text-white tracking-tight my-2">00

                "text-xs md:text-sm uppercase tracking-widest text-indigo-300/80 font-medium">Saat

            



            

            "glass-card rounded-3xl p-6 md:p-8 text-center relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">

                "absolute inset-0 bg-gradient-to-b from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">

                "minutes" class="block text-5xl md:text-7xl font-bold font-outfit text-white tracking-tight my-2">00

                "text-xs md:text-sm uppercase tracking-widest text-indigo-300/80 font-medium">Dakika

            



            

            "glass-card rounded-3xl p-6 md:p-8 text-center relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300 border-indigo-500/30">

                "absolute inset-0 bg-gradient-to-b from-pink-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">

                "seconds" class="block text-5xl md:text-7xl font-bold font-outfit text-pink-400 tracking-tight my-2">00

                "text-xs md:text-sm uppercase tracking-widest text-pink-300/80 font-medium">Saniye

            



        



        

        "completionMessage" class="hidden glass-card rounded-2xl p-6 text-center border-emerald-500/40 bg-emerald-950/20 my-4 animate-bounce">

            "inline-flex p-3 rounded-full bg-emerald-500/20 text-emerald-400 mb-2">

                "w-8 h-8">

            

            "text-2xl font-bold text-emerald-300 font-outfit">S�re Doldu!

            "text-sm text-emerald-200/70 mt-1">Geri say�m ba�ar�yla tamamland�.

        



    



    

    "relative z-10 text-center text-xs text-slate-500 py-4 mt-auto">

        � Modern Glassmorphism Geri Say�m Saya� Kodu