CSS Clip-Path Şekli Nasıl Oluşturulur?

CSS clip-path şekli oluşturmak için bir şekil seçin, daire veya elips kullanıyorsanız boyut ve konumu girin ve CSS parçacığını üretin. Boş alanlar sırasıyla daire, 50 boyut ve merkez konumu varsayılanlarına döner.

CSS clip-path şekli oluşturma

CSS clip-path, bir HTML öğesinin görünür bölümünü belirli bir şeklin sınırları içinde göstermek için kullanılır. Bu araç, seçtiğiniz şekle göre içinde clip-path bildirimi bulunan bir CSS parçacığı üretir. Böylece bir görselin, kartın veya başka bir öğenin görünür alanını daire, elips ya da hazır çokgen biçiminde tanımlamak için başlangıç çıktısı alabilirsiniz.

Kullanımın temel mantığı şekil seçimine dayanır. Daire ve elips biçimlerinde boyut ile konum çıktıya yansır. Üçgen, altıgen, beşgen, yıldız ve baklava biçimleri ise sabit koordinatlara sahip hazır çokgen şablonlarıyla oluşturulur. Bu nedenle aracın hangi alanları şekillendirdiğini bilmek, üretilen CSS parçacığını doğru yorumlamanıza yardımcı olur.

Alanları doldurmak zorunlu değildir. Şekil alanı boş bırakıldığında daire, boyut alanı boş bırakıldığında 50, konum alanı boş bırakıldığında merkez kullanılır. Varsayılanlarla hızlı bir daire çıktısı alabilir veya yalnızca daire ve elips için ilgili değerleri değiştirerek sonucu ihtiyacınıza göre düzenleyebilirsiniz.

Adım adım kullanım

1. Önce şekil için kullanılacak adı seçin veya ilgili alanı boş bırakın. Desteklenen adlar circle, ellipse, triangle, hexagon, pentagon, star ve diamond değerleridir. Alanı boş bırakmak, varsayılan daire davranışını kullanır. Şekil seçerken daire ve elipsin boyut ile konum bilgilerini işlediğini, diğer hazır biçimlerin ise sabit çokgen şablonlarına dayandığını dikkate alın.

2. Daire ya da elips kullanıyorsanız boyut alanına bir değer girin. Dairede bu değer yüzde olarak kullanılır. Elipste ise ilk yüzde doğrudan girdiğiniz boyuttan, ikinci yüzde bu değerin 0,6 ile çarpılmasından oluşur. Örneğin boyut olarak 40 girildiğinde elipsin iki ölçüsü, biri 40 ve diğeri bu değerin 0,6 katı olacak şekilde oluşturulur. Boyut alanını boş bırakırsanız araç 50 değerini kullanır.

3. Daire veya elips için konumu belirtin. Girilen konum, oluşturulan şekil ifadesinde at kelimesinden sonra yerleştirilir. Böylece şeklin konum bilgisi çıktıda açıkça görülebilir. Konum alanını boş bırakırsanız merkez konumu uygulanır. Üçgen, altıgen, beşgen, yıldız ve baklava gibi hazır çokgenlerde boyut veya konum girmeniz, bu şablonların sabit koordinatlarını değiştirmez.

4. Şekil ve gerekiyorsa diğer alanları kontrol ettikten sonra oluşturma işlemini başlatın. Araç, seçime göre clip-path bildirimi içeren bir CSS parçacığı verir. Şekil, boyut veya konum alanlarını boş bıraktıysanız çıktıyı varsayılan değerlerle değerlendirin. Daire ya da elips seçildiğinde, girilen boyutun ve konumun sonuçta karşılık bulup bulmadığını kontrol edin.

5. Oluşturulan parçacığı, görünür alanını sınırlamak istediğiniz öğenin stil tanımında kullanmadan önce metni gözden geçirin. Daire için yüzde değerinin ve at sonrasındaki konumun beklediğiniz girdilerle eşleşmesi gerekir. Elips için iki yüzde değerinden ikincisinin ilk değerden farklı olarak 0,6 çarpanıyla oluştuğunu unutmayın. Hazır çokgenlerde ise değerlendirme ölçütü, seçilen şekle ait polygon yapısının ve sabit yüzde koordinatlarının bulunmasıdır.

Sonucu yorumlama

Sonuç, CSS içinde bir clip-path bildirimi bulunan bir parçacıktır. Bu çıktı, seçilen şeklin görünür alan sınırını tanımlayan ifadeyi içerir. Daire sonucunda boyut, yüzde olarak görünür ve konum at ifadesinden sonra yer alır. Elips sonucunda iki yüzde bulunur: ilki girilen boyutu, ikincisi aynı boyutun 0,6 katını temsil eder.

Hazır çokgenlerde sonuç biçimi farklıdır. Üçgen, altıgen, beşgen, yıldız ve baklava, polygon tabanlı şablonlar olarak üretilir. Bu şablonlarda yüzde koordinatları sabittir. Dolayısıyla bu şekiller için boyut ve konum alanlarını değiştirmek, çokgenin koordinatlarını yeniden hesaplanmış bir biçime dönüştürmez.

Bir sonucu değerlendirirken önce şeklin adını, sonra da yalnızca ilgili şekillerde boyut ve konumun çıktıya nasıl işlendiğini kontrol edin. Daire veya elips kullanıyorsanız iki ölçünün ve konumun beklenen girdilerle ilişkisini inceleyin. Hazır çokgen kullanıyorsanız polygon ifadesini ve sabit koordinatları arayın. Araç bir CSS parçacığı üretir; bu nedenle parçacığı kendi stil tanımınızda kullanmadan önce hedef öğeye ve tasarımınıza uygunluğunu ayrıca değerlendirmeniz gerekir.

Uygulamalı örnek

Bir web kartını yıldız şeklinde göstermek isteyen geliştirici, şekil alanında star seçerek çıktı alır.

Bir kartın görünür alanını yıldız biçiminde sınırlamak için şekil olarak star seçilir ve CSS parçacığı oluşturulur.

Çıktıda clip-path: polygon(...) bildirimi ve sabit yüzde koordinatlarından oluşan bir çokgen şablonu bulunur.

Sınırlamalar

• Boyut ve konumun çıktıya yansıması daire ve elips için tanımlıdır. Hazır çokgenler sabit yüzde koordinatları kullandığından bu alanlar çokgen şablonlarını değiştirmez.

Sık yapılan hatalar

• Şekil alanında desteklenen adlar yerine farklı bir değer kullanmak hatalı şekil seçimine yol açabilir. circle, ellipse, triangle, hexagon, pentagon, star veya diamond adlarından birini seçin; belirli bir şekil gerekmiyorsa alanı boş bırakarak varsayılan daireyi kullanın.

Sık sorulan sorular

Şekil seçmeden CSS clip-path oluşturabilir miyim?

Şekil alanı boş bırakıldığında daire üretilir. Boyut ve konum alanlarını da boş bırakırsanız sırasıyla 50 ve merkez varsayılanları kullanılır.

Daire ve elips için boyut ile konum nasıl uygulanır?

Dairede girilen boyut yüzde olarak kullanılır ve konum at kelimesinden sonra yer alır. Elipste ilk yüzde boyut değeridir; ikinci yüzde ise bu değerin 0,6 ile çarpılmasıyla oluşur.

Hazır çokgen şekillerinde boyut ve konum değişir mi?

Üçgen, altıgen, beşgen, yıldız ve baklava hazır polygon şablonlarıyla oluşturulur. Bu şablonlar sabit yüzde koordinatları kullandığı için boyut ve konum alanları koordinatları değiştirmez.