@keyframesBaşlangıç
@keyframes ile CSS animasyonu
Anahtar kare tanımlamaktan zamanlama fonksiyonlarına, gecikme zincirlerinden compositor performansına kadar CSS animasyonunun tamamı.
3.495 efektte kullanılıyorRehberi oku
Teknik rehberler
CSS efekt teknikleri
Her rehber tek bir tekniği baştan sona anlatır: sözdizimi, çalışan kod, tarayıcı desteği, performans ve yaygın hatalar. Farkı şu — anlatılan teknik havada kalmaz, o tekniği kullanan gerçek efektler üzerinden canlı gösterilir. Örnekler 9.078 efektlik katalogdan geliyor; kodu okur, çalışırken görür, doğrudan kopyalarsın.
:hoverBaşlangıç
:hover ve geçişlerle etkileşim efektleri
Fare üstüne gelme durumunu yakalamak, geçişleri doğru özelliklerde yumuşatmak ve dokunmatik ekranda takılan hover sorununu çözmek.
2.879 efektte kullanılıyorRehberi oku
::before / ::afterOrta
::before ve ::after ile katman kurma
Tek bir elemanı üç katmana çıkaran sözde elemanlar: content kuralı, konumlandırma, z-index sırası ve nerede kullanılmayacağı.
2.842 efektte kullanılıyorRehberi oku
clip-pathOrta
clip-path ile şekil kesme
Bir elemanın hangi bölümünün görüneceğini geometriyle tanımlamak: çokgen köşe kesimleri, dairesel açılışlar ve animasyonlu geçişler.
512 efektte kullanılıyorRehberi oku
conic-gradient()Orta
conic-gradient ile halka, pasta ve parıltı
Renkleri merkez etrafında döndürerek pasta grafik, ilerleme halkası ve dönen çerçeve parıltısı üretmek.
291 efektte kullanılıyorRehberi oku
perspective / transformİleri
perspective ve 3D dönüşümler
Düzlemsel elemanları uzaya yerleştirmek: perspektif noktası, 3D bağlam, arka yüz görünürlüğü ve kart çevirme kalıbı.
227 efektte kullanılıyorRehberi oku
backdrop-filterOrta
backdrop-filter ile cam efekti
Elemanın arkasındaki pikselleri bulanıklaştırmak: cam panel kalıbı, filter ile farkı ve mobil cihazlardaki gerçek maliyeti.
88 efektte kullanılıyorRehberi oku
mix-blend-modeİleri
Karışım modlarıyla katman birleştirme
İki katmanın piksellerini matematiksel olarak birleştirmek: ters renkli imleç, duotone görsel ve ışık sızması efektleri.
103 efektte kullanılıyorRehberi oku
maskİleri
mask ile maskeleme
Piksel başına saydamlık uygulamak: gradyanla solan kenarlar, ortası oyulmuş halkalar ve tek renkle boyanabilen SVG ikonlar.
54 efektte kullanılıyorRehberi oku
--custom-propertyOrta
CSS değişkenleriyle temalanabilir efekt yazmak
Efektin ayarlanabilir yüzeyini değişkenlere çıkarmak: tek satırla tema değiştirmek, @property ile değişkeni animasyonlamak.
40 efektte kullanılıyorRehberi oku
Sıkça sorulan sorular
- Bu rehberler diğer CSS yazılarından ne farklı?
- Her rehber, anlattığı tekniği kullanan gerçek efektlere bağlanır. Sözdizimini okuduktan sonra aynı sayfada o tekniğin katalogdaki canlı örneklerini görür, kodunu açıp inceleyebilirsin. Teori ile çalışan kod arasında boşluk kalmaz.
- Rehberlerdeki kod örneklerini kullanabilir miyim?
- Evet, tamamı ücretsizdir ve kişisel ya da ticari projelerde kullanılabilir. Örnekler saf CSS'tir; derleme adımı, kütüphane veya bağımlılık gerektirmez.
- Hangi rehberden başlamalıyım?
- @keyframes ve :hover rehberleri katalogdaki efektlerin büyük bölümünün temelini oluşturur, oradan başlamak mantıklı. ::before / ::after rehberi ise fazladan HTML yazmadan katman kurmayı öğrettiği için hemen ardından gelir.
- Rehberler güncelleniyor mu?
- Tarayıcı desteği tabloları ve yeni CSS özellikleri katalog büyüdükçe gözden geçirilir. Her rehberin altında son güncelleme tarihi yazar.
Kataloğa geç
Rehberleri okumadan doğrudan hazır efekt arıyorsan kütüphanede kategoriye, etikete ve arama terimine göre gezebilirsin.