CSS Clip Path Oluşturucu
Ücretsiz çevrimiçi CSS clip-path oluşturucu. Sürüklenebilir noktalarla polygon, circle, ellipse ve inset şekilleri tasarlayın, canlı önizleyin ve tek tıkla CSS kodunu kopyalayın.
CSS'te clip-path nedir?
clip-path, bir öğeyi temel bir şekle veya yola göre kırpan CSS özelliğidir. Şeklin dışında kalan her şey gizlenir; böylece dikdörtgen bir görseli veya kutuyu görseli düzenlemeden üçgene, daireye, altıgene, eğik bir banner'a veya istediğiniz özel bir çokgene dönüştürebilirsiniz.
Hangi tarayıcılar clip-path destekliyor?
Bu oluşturucunun kullandığı temel şekil fonksiyonları polygon(), circle(), ellipse() ve inset() tüm modern tarayıcılarda desteklenir: Chrome, Edge, Firefox, Safari ve Opera dahil. -webkit-clip-path öneki yalnızca çok eski mobil Safari sürümleri için gerekir.
Poligon modu nasıl çalışır?
Poligon modunda önizleme her köşe noktasını sürüklenebilir bir nokta olarak gösterir. Taşımak için noktayı sürükleyin, yeni nokta eklemek için boş alana çift tıklayın, seçmek için bir noktaya tıklayın ve sil düğmesiyle kaldırın. CSS değeri yüzde koordinatlarla gerçek zamanlı güncellenir.
polygon() içindeki yüzdeler ne anlama gelir?
Her köşe noktası, öğenin sol üst köşesinden ölçülen X Y yüzde çifti olarak yazılır. Değerler öğe boyutuna göreli olduğundan şekil öğeyle birlikte ölçeklenir ve her ekran genişliğinde duyarlı kalır.
circle, ellipse ve inset arasındaki fark nedir?
circle(yarıçap at x y) tek yarıçaplı daireye kırpar, ellipse(rx ry at x y) farklı yatay ve dikey yarıçaplar sağlar, inset(üst sağ alt sol) her kenardan daralan bir dikdörtgen kırpar. Bu oluşturucu tüm parametreler için kaydırıcılar ve sayı girişleri sunar.
clip-path yerleşimi veya tıklamaları etkiler mi?
clip-path tamamen görseldir. Öğe yerleşimde özgün kutusunu korur, çevresindeki hiçbir şey kaymaz. Ancak tıklama gibi işaretçi olayları yalnızca görünür kırpılmış alanda çalışır; bu da özel biçimli düğmeler için kullanışlıdır.
clip-path animasyonla değiştirilebilir mi?
Evet. Şekil fonksiyonu ve nokta sayısı eşleştiğinde tarayıcılar iki clip-path değeri arasında yumuşak geçiş yapar; örneğin büyük insetten küçüğe veya aynı köşe sayısına sahip iki poligon arasında. CSS transition özelliğiyle animasyon ekleyin.
Görselim veya verilerim bir yere yükleniyor mu?
Hayır. Önizleme görseli bir canvas üzerine yerel olarak çizilen degradeden ibarettir ve tüm hesaplamalar tarayıcınızda olur. Tasarladığınız hiçbir şey sunucuya gönderilmez; araç yüklendikten sonra çevrimdışı da çalışır.
clip-path'in yaygın kullanım alanları nelerdir?
Popüler kullanımlar arasında eğik hero bölümleri, altıgen veya dairesel avatar maskeleri, üçgen konuşma balonu uçları, yaratıcı fotoğraf kolajları, pahlı kart köşeleri ve özel biçimli düğmeler yer alır; hepsi görsel düzenleme yazılımı olmadan.
CSS Clip Path Oluşturucu Nasıl Kullanılır
Görselleri düzenlemek yerine CSS clip-path ile herhangi bir öğeye şekil verin. Bir şekil işlevi seçin, tutamaçları sürükleyin ve üretime hazır CSS'yi kopyalayın. Her şey tarayıcınızda yerel olarak çalışır.
- Bir mod seçin: Çokgen, Daire, Elips veya Inset.
- Çokgen modunda köşe noktalarını sürükleyin, nokta eklemek için boş alana çift tıklayın ve silmeden önce birini seçin.
- Daire, Elips ve Inset modlarında her değeri kaydırıcılarla ince ayar yapın ya da kesin bir yüzde yazın.
- Yerelde üretilen degrade örnek görselin üzerinde canlı önizlemenin güncellenmesini izleyin.
- Tek satırlık clip-path kuralını kopyalayıp stil sayfanıza yapıştırın.
İki durum arasında çokgen nokta sayısını aynı tutarsanız, şekli bir CSS geçişiyle akıcı biçimde canlandırabilirsiniz.
İlgili Araçlar
- CSS Box Shadow Oluşturucu Ücretsiz çevrimiçi CSS box shadow oluşturucu. Ayarlanabilir ofset, bulanıklık, yayılma, renk ve inset ile görsel olarak güzel gölgeler oluşturun. Canlı önizleme ve anında kod kopyalama.
- CSS Gradyan Oluşturucu Görsel olarak muhteşem CSS gradyanları oluşturun. Birden fazla renk durağı, açılar ve konumlarla doğrusal, radyal ve konik gradyanlar oluşturun. Üretime hazır CSS kodunu anında kopyalayın.
- Border Radius Oluşturucu Ücretsiz çevrimiçi yaratıcı border radius oluşturucu. 8 kulbu sürükleyin veya bir blob hazır şekli seçin, organik CSS biçimleri oluşturun ve kodu anında kopyalayın.
- Renk Dönüştürücü Ücretsiz çevrimiçi renk dönüştürücü. HEX, RGB, HSL, HSV formatlarını görsel seçici ile anında dönüştürün. %100 gizli, tarayıcınızda çalışır.
- CSS Easing Oluşturucu Ücretsiz çevrimiçi CSS easing oluşturucu. Etkileşimli eğri üzerinde cubic-bezier kontrol noktalarını sürükleyin, 18 hazır ayardan birini seçin, döngüde oluşan top animasyonunu izleyin ve zamanlama fonksiyonunu anında kopyalayın.
- CSS Text Shadow Oluşturucu Ücretsiz çevrimiçi text-shadow oluşturucu. Ofset, bulanıklık, renk ve opaklıkla birden fazla gölge katmanı üst üste dizin, Neon, 3D, Retro hazır ayarlarını deneyin ve CSS'i anında kopyalayın.
- CSS Güzelleştirici CSS kodunu anında biçimlendirin ve güzelleştirin. Özelleştirilebilir seçeneklerle sıkıştırılmış CSS'i okunabilir koda dönüştürün.
- CSS Sıkıştırıcı Ücretsiz çevrimiçi CSS sıkıştırıcı. Boşlukları, yorumları ve gereksiz karakterleri kaldırarak CSS kodunu anında sıkıştırın ve optimize edin. Daha hızlı web performansı için dosya boyutunu azaltın.