polygon() ve circle() ile clip-path
clip-path özelliğini kullanarak ögeleri özel çokgen veya daire şekillerine kırpın.
polygon() ve circle() ile clip-path, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
clip-path Nedir?
clip-path, bir öğenin görünür alanını belirtilen bir şekle göre kırpar. Şeklin dışındaki her şey görünmez olur, ancak düzen içinde yer kaplamaya devam eder.
clip-path: circle()
Bir öğeyi dairesel bir şekle göre kırpın. Bağımsız değişken yarıçaptır:
<div class="avatar"></div>
<div class="badge"></div>
clip-path: ellipse()
x yarıçapını, y yarıçapını ve isteğe bağlı merkez konumunu belirterek elips biçiminde kırpın:
<div class="card-image"></div>
clip-path: polygon()
En güçlü clip-path seçeneğidir. x,y koordinat çiftlerini listeleyerek bir çokgen tanımlayın:
<div class="hexagon"></div>
<div class="diagonal-cut"></div>
clip-path: inset()
İsteğe bağlı yuvarlatılmış köşelerle bir dikdörtgen biçiminde kırpın. Bağımsız değişkenler içe çekme mesafeleridir:
<div class="card"></div>
Bölüm Şekilleri için clip-path
Sayfa bölümleri arasında açılı bölüm geçişleri oluşturun:
<div class="section-diagonal">Diagonal Section</div>
clip-path'i Canlandırma
Aynı sayıda noktaya sahip clip-path, görünme ve şekil değiştirme canlandırmaları için geçiş yapabilir:
<div class="reveal visible"></div>
clip-path ve border-radius
Basit yuvarlatılmış şekiller için border-radius daha iyidir — arka plan ve kenarlıkla birlikte çalışır. border-radius ile oluşturulamayan dikdörtgen olmayan şekillere ihtiyaç duyduğunuzda clip-path kullanın.
clip-path: path()
path(), rastgele şekiller için bir SVG yol dizesi kabul eder:
<div class="star"></div>
Performans Değerlendirmesi
clip-path yeni bir yığın bağlamı oluşturur ve canlandırıldığında her karede boyamayı tetikleyebilir. clip-path'i canlandırmak, transform veya opacity'yi canlandırmaktan daha maliyetlidir — dikkatli bir şekilde birlikte kullanın.
clip-path Referans Kutusu
clip-path için koordinat sistemi, öğenin kenarlık kutusudur (SVG için kenar boşluğu kutusu). Yüzdeler, öğenin boyutlarına göre hesaplanır.
Hızlı Kontrol
Koordinat çiftleriyle tanımlanan düzensiz, dikdörtgen olmayan bir şekli hangi clip-path işlevi oluşturur?
Özet
clip-path, öğeleri geometrik şekillere göre kırpar. circle() ve ellipse() yuvarlak kırpmalar oluşturur. polygon() birden çok köşeli herhangi bir şekli tanımlar. inset(), isteğe bağlı yuvarlatmayla bir dikdörtgen biçiminde kırpar. Etkileyici görünme efektleri için aynı nokta sayısına sahip çokgenler arasında canlandırma yapın. SVG tabanlı rastgele şekiller için path() kullanın.
Sıkça Sorulan Sorular
“polygon() ve circle() ile clip-path” dersi ücretsiz mi?
Evet — “polygon() ve circle() ile clip-path” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“polygon() ve circle() ile clip-path” dersinde ne öğreneceğim?
clip-path özelliğini kullanarak ögeleri özel çokgen veya daire şekillerine kırpın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“polygon() ve circle() ile clip-path” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- polygon() ve circle() ile clip-path
- Metin Kaydırma için shape-outside
- clip-path Şekillerini Canlandırma
- CSS Maskeleri ve clip-path Karşılaştırması