Kod Parçacıkları
Bir sonraki projeniz için mükemmel bileşeni bulun.
Sadece CSS ile Akordeon (SSS)
JavaScript kullanmadan, HTML details/summary etiketleri ve CSS ile uygulanan, erişilebilirliği yüksek SSS akordeon bileşeni.
SSS Akordiyon
Yalnızca HTML5 ayrıntıları/özet öğesi ve CSS ile uygulanır, JavaScript gerekmez. Sorunsuz açılış ve kapanış animasyonlarıyla SSS'ler için erişilebilir bir akordeon.
Görsel Akordiyon
Paneli açtığınızda yalnızca metni değil aynı zamanda güzel bir arka plan resmini de görüntüleyen bir akordeon.
örtüşen avatar grupları
Üst üste yığılmış birden fazla kullanıcı simgesi ve kaç kişinin kaldığını gösteren bir rozet içeren Avatar kullanıcı arayüzü.
Animasyonlu Degrade Arka Plan
Sadece CSS kullanılarak oluşturulan, renklerin pürüzsüzce değiştiği şık bir degrade (gradient) arka plan.
Animasyonlu Mesh Degrade
Bu, yalnızca CSS kullanılarak uygulanan, renklerin düzgün bir şekilde değiştiği ve birbirine karıştığı dinamik bir örgü tonlaması arka plan bileşenidir.
Aurora Arka Plan
Birden fazla animasyonlu oval damla ve filtreyle aurora borealis gibi akan muhteşem bir arka plan efekti. Saf CSS ile uygulandı.
Parçacık Alanı Arka Planı
CSS animasyonunu kullanarak yüzen parçacıklar oluşturan arka plan efekti
Animasyonlu Puantiye Arka Plan
Bu, animasyonla temiz bir puantiyeli desen çizmek için CSS radyal degradesini kullanan bir arka plan bileşenidir.
Pulsing Status Badge
Çevrimiçi olduğunuzu veya canlı yayın yaptığınızı vurgulayan dalgalı bir animasyona (Darbe) sahip bir rozet.
Siberpunk Buton
Karanlık bir tema üzerinde harika görünen, neon efektli ve aksaklık animasyonlu fütüristik bir düğme bileşeni.
Degrade Kenarlıklı Buton
Bu düğme bileşeni, CSS "-webkit-mask-composite" ile animasyonlu degradeyi birleştirerek güzel bir dönen degrade kenarlığına sahiptir.
Sıvı Dolgulu Buton
Üzerine gelindiğinde alttan dalgalar halinde sıvıyla dolan bir düğme
Manyetik Buton
Fare imlecini sanki manyetik olarak çekilmiş gibi düzgün bir şekilde takip eden etkileşimli bir manyetik düğme bileşeni.
Neumorphism Buton
Sadece CSS ile uygulanan, üç boyutlu ve yumuşak dokulu bir Neumorphism stili buton UI bileşeni.
Shimmer Buton
Fareyle üzerine gelindiğinde ve periyodik olarak bir ışık bandı (ışıltı efekti) yayan güzel bir düğme bileşeni.
3D Flip Kart
Fareyle üzerine gelindiğinde 3B alanda dönen etkileşimli kart bileşeni
Glass Profil Kartı
Buzlu cam efektini (cammorfizm) kullanan zarif, yarı saydam bir kullanıcı profili kartı.
Glassmorphism Kartı
Buzlu cam efektiyle saydamlık ve bulanıklık sunan, modern ve şık bir Glassmorphism kart UI bileşeni.
Neon Glow Kart
Bu, kartın kenarının üzerine gelindiğinde neon ışık gibi yandığı ve spot ışığının fare konumuna bağlı olarak hareket ettiği etkileşimli bir kart kullanıcı arayüzü bileşenidir.
Animasyonlu Fiyatlandırma Kartı
Fareyle üzerine gelindiğinde vurgulanan ve animasyonlu bir fiyatlandırma bölümüne sahip modern bir fiyatlandırma kartı bileşeni.
İstatistik Sayacı Kartı
Bu, sayfa kaydırıldıkça sayılar hareketlendiğinden ve sıfırdan arttığından gösterge tabloları ve açılış sayfaları için ideal olan bir istatistik kartı bileşenidir.
sonsuz kayan yazı atlıkarınca
Logoların ve kartların kesintisiz olarak yatay olarak kaydırılmasını sağlayan bileşen.
Mega Footer Düzeni
Çok sütunlu bağlantılar, bülten kaydı ve sosyal medya simgeleri içeren geniş altbilgi.
Animasyonlu Arama Çubuğu
Simgeye tıkladığınızda sorunsuz bir şekilde genişleyen minimalist bir arama çubuğu.
Özel Geçiş (Toggle) Anahtarı
Tarayıcıların standart onay kutusu (checkbox) görünümünü modern ve estetik bir geçiş anahtarı ile değiştiren CSS uygulaması.
Dosya Yükleme Dropzone
Sürükle ve bırak destekli modern dosya yükleme alanı.
Kayan Etiketli Input
Odaklandığında etiket olarak sorunsuz bir şekilde açılan yer tutucuya sahip modern bir giriş alanı.
Çok Adımlı Form
Birden çok adım arasında geçiş yapan kullanıcı arayüzü (ilerleme göstergesiyle birlikte), genellikle kayıt ekranlarında vb. kullanılır.
OTP Input
Tek bir karakter girdiğinizde otomatik olarak odaklanan ve geri tuşuyla önceki kutuya dönen sezgisel 6 basamaklı OTP giriş bileşeni. Ayrıca yapıştırmayı da destekler.
Şifre Güç Göstergesi
Girilen şifrenin gücünü görsel olarak gösteren bir kullanıcı arayüzü.
Bento Grid Düzeni
Özellik tanıtımları ve gösterge tabloları için popüler olan asimetrik, modern bento kutusu ızgara düzeni.
Masonry Düzeni
CSS Sütunlarını kullanan güzel Pinterest tarzı düzensiz ızgara düzeni
Duyarlı (Responsive) CSS Grid Galerisi
Medya sorguları (media queries) kullanmadan auto-fit ve minmax ile uygulanan duyarlı bir görsel galeri yöntemi.
Başlıklı Sidebar
Solda sabit bir kenar çubuğu ve üstte bir başlık bulunan modern bir web uygulamasının temel düzeni. Yönetim ekranları ve SaaS ürünleri için idealdir.
Saf CSS Yükleme Simgesi (Spinner)
Hiçbir görsel (imaj) materyal veya JavaScript koduna ihtiyaç duyulmadan tamamen saf CSS ile geliştirilmiş modern bir yükleme (spinner) simgesi.
Dalgalı Nokta Loader
5 dalgalı noktaya sahip, herhangi bir JavaScript gerektirmeyen saf bir CSS animasyon yükleyici bileşeni.
Glitch Metin Loader
Siberpunk tarzı aksaklık efektine sahip bir metin yükleme ekranı.
İlerleme Çubuğu Loader
Bu, üç tür ilerleme çubuğu animasyonu gerçekleştiren bir yükleyici bileşenidir: saf CSS kullanarak derecelendirme, şerit ve darbe.
Nabız Halkası Loader
Dalgalar gibi yayılan, geçişli ve halka animasyonlu bir yükleme döndürücü.
Skeleton Ekran Loader
İçerik yüklenirken görüntülenen zengin parıltılı animasyonlara sahip İskelet kullanıcı arayüzü
Glassmorphism Modal
Arka planı bulanık, cam benzeri güzel bir kalıcı iletişim kutusu.
Breadcrumb Navigasyon
Modern ve güzel ok şeklindeki kırıntı navigasyonu
Floating Dock Navigasyon
Simgelerin üzerine gelindiğinde genişlediği macOS benzeri kayan yuva navigasyonu.
Hamburger Menü Animasyonu
Tıklandığında pürüzsüz bir şekilde 'X' simgesine dönüşen, şık ve etkileşimli bir hamburger menü animasyonu uygulaması.
Katlanabilir Sidebar Menü
Bu, kontrol panellerinde vb. kullanılabilecek bir kenar çubuğu gezinmesidir ve yalnızca simge durumuna daraltılabilir.
Sabit Navbar
Cam morfizm efektiyle donan ve siz kaydırdıkça kompakt bir stile dönüşen yapışkan bir gezinme çubuğu bileşeni.
Özellik Kartları Bölümü
SaaS/açılış sayfaları için özellik tanıtım kartı bölümü. Fareyle üzerine gelindiğinde yumuşak bir şekilde parlayan geçiş kenarlığına sahip bir kart kullanıcı arayüzü bileşeni.
Hero Video Arka Planı
Bu, görsel bir etki sağlamak için arka plana döngüsel bir video yerleştiren bir kahraman bölümüdür.
Bölünmüş Hero Bölümü
Cesur tipografi ve görseller, yük altında kayan bir kahraman bölümü ile sol ve sağ bölümlere ayrılmıştır.
Tailwind CSS ile Duyarlı Fiyatlandırma Tablosu
SaaS platformları için ideal, tamamen Tailwind CSS kullanılarak oluşturulmuş, modern ve duyarlı fiyatlandırma tablosu UI snippet'i.
Referans Slider
Kullanıcı yorumlarının bir listesini görüntülemek için kaydırıcı bölümü
Dikey Timeline Bölümü
Bir projenin aşamalarını ve geçmişini temsil eden dikey bir zaman çizelgesi.
Animasyonlu Altı Çizili Sekmeler
Etkin sekmeleri sorunsuz bir şekilde takip eden altı çizili göstergelerle sekmede gezinme.
Başarılı Toast Bildirimi
Başarılı bir işlem hakkında kullanıcıyı bilgilendiren açılır bir bildirim.
Animasyonlu Manyetik Tooltip
İmlecin öğe üzerindeki hareketini sorunsuz bir şekilde takip eden gelişmiş, yavaşça açılan animasyonlu bir araç ipucu.
Context Menü
Zengin tasarıma sahip özel sağ tıklama içerik menüsü
Saf CSS Araç İpucu (Tooltip)
JavaScript kullanmadan sadece HTML ve CSS ile oluşturulan pürüzsüz gezinme (hover) araç ipucu.
Popover Menü
Tıklandığında (veya odaklanıldığında) açılan ve fareyle üzerine gelindiğinde yerine eylemlerin listesini görüntüleyen bir açılır menü.