Question 1

CSS clip-path nedir?

Accepted Answer

CSS clip-path, bir element için kırpma bölgesi tanımlayan bir özelliktir. Yalnızca belirtilen şeklin içindeki içerik görünür, geri kalanı gizlenir. SVG veya ekstra işaretleme gerekmeden resimler, div'ler ve düğmeler gibi elementler için dikdörtgen olmayan şekiller oluşturmak için kullanılır.

Question 2

clip-path ile hangi şekilleri oluşturabilirim?

Accepted Answer

CSS clip-path, polygon (özel çok noktalı şekiller), circle, ellipse ve inset (isteğe bağlı yuvarlak köşelerle dikdörtgen) destekler. Polygon türü en esnektir; üçgenler, elmaslar, altıgenler, oklar ve bir dizi yüzde noktasıyla tanımlanan neredeyse her şekli oluşturmanıza olanak tanır.

Question 3

clip-path'teki yüzde değerleri nasıl çalışır?

Accepted Answer

clip-path'teki yüzde değerleri, elementin kendi boyutlarına göredir. 0% 0% sol üst köşe, 100% 0% sağ üst, 50% 50% merkez ve 100% 100% sağ alt köşedir. Bu, clip-path şekillerinin elementin boyutuna duyarlı olmasını sağlar.

Question 4

clip-path elementin düzenini etkiler mi?

Accepted Answer

Hayır, clip-path yalnızca görüneni etkiler — elementin kutu modelini veya düzenini değiştirmez. Element hâlâ orijinal alanını kaplar. Kırpmayla birlikte düzeni değiştirmeniz gerekiyorsa, metin sarma efektleri için float ile shape-outside kullanmayı düşünün.

Question 5

clip-path'i nasıl animasyonlarım?

Accepted Answer

clip-path, iki uyumlu şekil (örneğin aynı sayıda noktaya sahip polygon) arasında CSS geçişleri veya keyframe animasyonları kullanılarak animasyonlanabilir. Fareyle üzerine gelindiğinde veya durum değiştiğinde pürüzsüz şekil dönüşümü sağlamak için transition: clip-path 0.3s ease ekleyin.

CSS Clip-Path Oluşturucu

Sıkça Sorulan Sorular

Comments & Feedback