Bir süredir üzerinde çalıştığım projeyi paylaşmak istiyorum: librarycss.com
Kısaca ne: Hazır CSS efektlerinin toplandığı Türkçe bir kütüphane. Şu an
9.078 efekt, 12 kategoride (butonlar, kartlar, yükleyiciler, metin
animasyonları, arka planlar, checkbox, switch, hover, rozetler, formlar,
navigasyon, tooltip).
Neden yaptım: Türkçe kaynak ararken sürekli aynı 3-5 siteye çıkıyordum,
hepsi İngilizce ve çoğu ya reklam duvarı ya da "npm install" gerektiren
paketler. Ben tek bir buton hover efekti için kütüphane kurmak
istemiyordum. Burada her efekt saf HTML+CSS — kopyala, yapıştır, çalışır.
Derleme adımı, paket, bağımlılık yok.
Öne çıkan şeyler:
- Her efektin canlı önizlemesi var, listede de detay sayfasında da
gerçekten çalışıyor (ekran görüntüsü değil).
- Detay sayfasında HTML / CSS / React sekmeleri ayrı ayrı, tek tıkla
kopyalanıyor.
- Tarayıcı içi editör: efekti açıp değiştirip sonucu anında görüyorsun.
Beğendiğini kendi kütüphanene atıyorsun.
- 6 tane CSS aracı: gradyan üretici, box-shadow, border-radius
şekillendirici, cubic-bezier eğri editörü, glassmorphism, text-shadow.
- 10 Türkçe rehber (keyframes, clip-path, backdrop-filter, blend-mode,
mask, 3D transform vs.) — her birinde tarayıcı destek tablosu ve
"yaygın hatalar" bölümü var.
- 70 CSS özelliği için referans sayfası, her birinde o özelliği gerçekten
kullanan efektlerden canlı örnek.
- Katkı sistemi: efekt gönderiyorsun, onaylanınca puan alıyorsun. Puanla
rütbe ve rozet açılıyor, liderlik tablosu var. Onaylanan efektin
altında adın künye olarak duruyor.
Geri bildirime açığım — özellikle "şu kategori eksik", "şu efekt çalışmıyor",
"arayüzde şu sinir bozucu" tarzı şeyleri duymak isterim. Sitede sorun
bildirme butonu da var ama buraya yazsanız da olur.
Teşekkürler.
9.078 efekt, 12 kategoride (butonlar, kartlar, yükleyiciler, metin
animasyonları, arka planlar, checkbox, switch, hover, rozetler, formlar,
navigasyon, tooltip).
Neden yaptım: Türkçe kaynak ararken sürekli aynı 3-5 siteye çıkıyordum,
hepsi İngilizce ve çoğu ya reklam duvarı ya da "npm install" gerektiren
paketler. Ben tek bir buton hover efekti için kütüphane kurmak
istemiyordum. Burada her efekt saf HTML+CSS — kopyala, yapıştır, çalışır.
Derleme adımı, paket, bağımlılık yok.
Öne çıkan şeyler:
- Her efektin canlı önizlemesi var, listede de detay sayfasında da
gerçekten çalışıyor (ekran görüntüsü değil).
- Detay sayfasında HTML / CSS / React sekmeleri ayrı ayrı, tek tıkla
kopyalanıyor.
- Tarayıcı içi editör: efekti açıp değiştirip sonucu anında görüyorsun.
Beğendiğini kendi kütüphanene atıyorsun.
- 6 tane CSS aracı: gradyan üretici, box-shadow, border-radius
şekillendirici, cubic-bezier eğri editörü, glassmorphism, text-shadow.
- 10 Türkçe rehber (keyframes, clip-path, backdrop-filter, blend-mode,
mask, 3D transform vs.) — her birinde tarayıcı destek tablosu ve
"yaygın hatalar" bölümü var.
- 70 CSS özelliği için referans sayfası, her birinde o özelliği gerçekten
kullanan efektlerden canlı örnek.
- Katkı sistemi: efekt gönderiyorsun, onaylanınca puan alıyorsun. Puanla
rütbe ve rozet açılıyor, liderlik tablosu var. Onaylanan efektin
altında adın künye olarak duruyor.
Geri bildirime açığım — özellikle "şu kategori eksik", "şu efekt çalışmıyor",
"arayüzde şu sinir bozucu" tarzı şeyleri duymak isterim. Sitede sorun
bildirme butonu da var ama buraya yazsanız da olur.
Teşekkürler.
