İçeriği özel yollar etrafında sarmalama
Web tasarımcıları uzun süredir dikdörtgenin kısıtlamaları içinde tasarım yapmak zorunda kalıyordu. Dikdörtgen olmayan düzenlerde yapılan çoğu reklam öğesi girişimi hüsranla sonuçlandığından, web'deki içeriklerin çoğu hâlâ basit kutulara hapsolmuş durumda. Bu durum, Chrome 37'den itibaren kullanılabilen CSS Şekilleri'nin kullanıma sunulmasıyla değişecek. CSS Şekiller, web tasarımcılarının içeriği daireler, elipsler ve poligonlar gibi özel yollar etrafına sarmasına olanak tanır. Böylece, dikdörtgenin kısıtlamalarından kurtulabilirler.
Şekiller manuel olarak tanımlanabilir veya resimlerden çıkarılabilir.
Çok basit bir örneğe bakalım.
Şeffaf bölümleri olan bir resmi ilk kez kayan hale getirirken içeriğin sarmalanıp boşlukları doldurmasını beklerken benim kadar saf davranmış olabilirsiniz. Ancak öğenin etrafında dikdörtgen sarmalama şeklinin devam etmesiyle hayal kırıklığına uğramış olabilirsiniz. Bu sorunu çözmek için CSS Şekilleri kullanılabilir.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>
<style>
.element{
shape-outside: url(image.png);
shape-image-threshold: 0.5;
float: left;
}
</style>
shape-outside: url(image.png)
CSS beyanı, tarayıcıya resimden bir şekil çıkarmasını söyler.
shape-image-threshold
mülkü, şekli oluşturmak için kullanılacak piksellerin minimum opaklık düzeyini tanımlar. Değeri 0.0
(tamamen şeffaf) ile 1.0
(tamamen opak) arasında olmalıdır. Dolayısıyla shape-image-threshold: 0.5
, şekli oluşturmak için yalnızca opaklığı% 50 ve üzeri olan piksellerin kullanılacağı anlamına gelir.
Burada float
mülkü önemlidir. shape-outside
mülkü, içeriğin etrafına sarıldığı alanın şeklini tanımlar. Ancak float olmadan şeklin etkilerini görmezsiniz.
Öğelerin float
değerlerinin karşısında bir kayan nokta alanı var. Örneğin, kahve fincanı resmi içeren bir öğe sola kaydırılıyorsa kaydırma alanı fincanın sağında oluşturulur. Her iki tarafı boşluk olan bir resim tasarlayabilseniz de içerik, float mülkü tarafından belirlenen karşı taraftaki şeklin etrafında sarılır (sol veya sağ). Her iki tarafta da sarılmaz.
Gelecekte, CSS hariç tutmalarının kullanıma sunulmasıyla birlikte, sabitlenmemiş öğelerde shape-outside
kullanılabilir.
Şekilleri manuel olarak oluşturma
Şekilleri resimlerden ayıklamanın yanı sıra manuel olarak da kodlayabilirsiniz. Şekil oluşturmak için birkaç işlevsel değer arasından seçim yapabilirsiniz: circle()
, ellipse()
, inset()
ve polygon()
. Her şekil işlevi bir koordinat kümesi kabul eder ve koordinat sistemini oluşturan bir referans kutusuyla eşlenir. Referans kutuları hakkında daha fazla bilgiyi birazdan vereceğiz.
circle() işlevi

Bir daire şekli değerinin tam gösterimi circle(r at cx cy)
şeklindedir. Burada r
dairenin yarıçapı, cx
ve cy
ise X ekseni ve Y eksenindeki daire merkezinin koordinatlarıdır. Daire merkezinin koordinatları isteğe bağlıdır. Bu değerleri atlarsanız varsayılan olarak öğenin merkezi (köşegenlerinin kesişimi) kullanılır.
.element{
shape-outside: circle(50%);
width: 300px;
height: 300px;
float: left;
}
Yukarıdaki örnekte içerik, dairesel bir yolun etrafına sarılır. Tek bağımsız değişken 50%
, dairenin yarıçapını belirtir. Bu durumda, yarıçap öğenin genişliğinin veya yüksekliğinin yarısına eşittir. Öğenin boyutları değiştirildiğinde daire şeklinin yarıçapı etkilenir. Bu, CSS şekillerinin nasıl duyarlı olabileceğine dair temel bir örnektir.
Devam etmeden önce kısa bir not: CSS Şekilleri'nin yalnızca bir öğenin etrafındaki yüzen alanın şeklini etkilediğini unutmayın. Öğenin arka planı varsa bu arka plan şekil tarafından kırpılmaz. Bu efekti elde etmek için CSS maskeleme özelliklerini (clip-path veya mask-image) kullanmanız gerekir. clip-path
özelliği, CSS Şekilleri ile aynı gösterimi kullandığından değerleri yeniden kullanabileceğiniz için çok kullanışlıdır.

Bu dokümanda yer alan görsellerde, şekli vurgulamak ve efektleri anlamanıza yardımcı olmak için kırpma işlemi kullanılmıştır.
Yuvarlak şekle geri dönün.
Çember yarıçapı için yüzdeler kullanıldığında değer aslında biraz daha karmaşık bir formülle hesaplanır: sqrt(width^2 + height^2) / sqrt(2). Bu, öğenin boyutları eşit değilse ortaya çıkacak daire şeklini hayal etmenize yardımcı olacağından bunu anlamanız yararlıdır.
Tüm CSS birim türleri şekil işlevi koordinatlarında kullanılabilir: px, em, rem, vw, vh vb. İhtiyaçlarınıza uygun olan esnek veya katı bir plan seçebilirsiniz.
Dairenin merkezinin koordinatları için açık değerler ayarlayarak dairenin konumunu ayarlayabilirsiniz.
.element{
shape-outside: circle(50% at 0 0);
}
Bu işlem, daire merkezini koordinat sisteminin ortasına yerleştirir. Koordinat sistemi nedir? Bu noktada referans kutularını kullanırız.
CSS Şekilleri için referans kutuları
Referans kutusu, öğenin etrafındaki sanal bir kutudur. Bu kutu, şekli çizmek ve konumlandırmak için kullanılan koordinat sistemini belirler. Koordinat sisteminin başlangıç noktası sol üst köşesidir. X ekseni sağa, Y ekseni ise aşağı doğru bakar.

shape-outside
özelliğinin, içeriğin sarmalandığı yüzen alanın şeklini değiştirdiğini unutmayın. Yüzen alan, margin
mülkü tarafından tanımlanan kutunun dış kenarlarına kadar uzanır. Buna margin-box
denir ve açıkça belirtilmediği takdirde bir şekil için varsayılan referans kutusudur.
Aşağıdaki iki CSS beyanı aynı sonuçlara sahiptir:
.element{
shape-outside: circle(50% at 0 0);
/* identical to: */
shape-outside: circle(50% at 0 0) margin-box;
}
Öğede henüz bir marj ayarlamadık. Bu noktada, koordinat sisteminin orijininin ve daire merkezinin öğenin içerik alanının sol üst köşesinde olduğunu varsayabilirsiniz. Kenarlık ayarladığınızda bu durum değişir:
.element{
shape-outside: circle(50% at 0 0) margin-box;
margin: 100px;
}
Koordinat sisteminin başlangıç noktası artık dairenin merkezi gibi öğenin içerik alanının dışında (100 piksel yukarı ve 100 piksel sola) yer alıyor. Çember yarıçapının hesaplanan değeri de margin-box
referans kutusu tarafından oluşturulan koordinat sisteminin artan yüzeyini hesaba katmak için büyür.


shape-outside
beyanı ile belirli bir zamanda yalnızca bir referans kutusu kullanılabilir. Her referans kutusu, şekli farklı ve bazen de belirsiz bir şekilde etkiler. Daha ayrıntılı bilgi içeren ve CSS şekilleri için referans kutularını anlamanıza yardımcı olan başka bir makale de mevcuttur.
ellipse() işlevi

Elipsler sıkıştırılmış daireler gibi görünür. Bunlar ellipse(rx ry at cx cy)
olarak tanımlanır. Burada rx
ve ry
, X ekseni ve Y eksenindeki elipsin yarıçapları, cx
ve cy
ise elipsin merkezinin koordinatlarıdır.
.element{
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
Yüzdelik değerler, koordinat sisteminin boyutlarından hesaplanır. Burada karmaşık matematik işlemleri yapmanız gerekmez. Elips merkezinin koordinatlarını atlayabilirsiniz. Bu durumda koordinatlar, koordinat sisteminin merkezinden çıkarılır.
X ve Y eksenlerindeki yarıçaplar, anahtar kelimelerle de tanımlanabilir: farthest-side
, elips merkezi ile referans kutusunun en uzaktaki tarafı arasındaki mesafeye eşit bir yarıçap elde eder. closest-side
ise tam tersini ifade eder: Merkez ile bir kenar arasındaki en kısa mesafe kullanılır.
.element{
shape-outside: ellipse(closest-side farthest-side at 50% 50%);
/* identical to: */
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
Bu seçenek, öğenin boyutları (veya referans kutusu) öngörülemeyen şekillerde değişebileceğinde ancak elips şeklinin buna uyum sağlamasını istediğinizde yararlı olabilir.
Aynı farthest-side
ve closest-side
anahtar kelimeleri, circle()
şekil işlevindeki yarıçap için de kullanılabilir.
polygon() işlevi

Daireler ve elipsler çok sınırlayıcıysa poligon şekil işlevi size birçok seçenek sunar. Biçim, bir poligonun her köşesi (noktası) için x y koordinatı çiftlerini belirttiğiniz polygon(x1 y1, x2 y2, ...)
şeklindedir. Bir poligonu belirtmek için gereken minimum çift sayısı üçtür (üçgen).
.element{
shape-outside: polygon(0 0, 0 300px, 300px 600px);
width: 300px;
height: 600px;
}
Köşe noktaları koordinat sistemine yerleştirilir. Duyarlı poligonlar için koordinatların bir kısmında veya tamamında yüzde değerlerini kullanabilirsiniz.
.element{
/* polygon responsive to font-size*/
shape-outside: polygon(0 0, 0 100%, 100% 100%);
width: 20em;
height: 40em;
}
SVG'den içe aktarılan isteğe bağlı bir fill-rule
parametresi vardır. Bu parametre, kendi kendine kesişen yollar veya kapalı şekiller olması durumunda tarayıcıya bir poligonun "içerisinde olma" durumunu nasıl değerlendireceğini bildirir. Joni Trythall, SVG'de fill-rule mülkünün işleyiş şeklini çok iyi açıklıyor. Tanımlanmamışsa fill-rule
varsayılan olarak nonzero
olur.
.element{
shape-outside: polygon(0 0, 0 100%, 100% 100%);
/* identical to: */
shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}
inset() işlevi
inset()
şekil işlevi, içeriği sarmalayacak dikdörtgen şekiller oluşturmanıza olanak tanır. CSS Şekilleri'nin web içeriğini basit kutulardan kurtardığına dair ilk önerme göz önüne alındığında bu durum mantıksız gelebilir. Olabilir. inset()
için, kayan değerler ve kenar boşlukları veya polygon()
ile zaten elde edilemeyecek bir kullanım alanı bulamadım. Ancak inset()
, dikdörtgen şekiller için polygon()
'ten daha okunaklı bir ifade sağlar.
İç içe yerleştirilmiş şekil işlevinin tam gösterimi inset(top right bottom left border-radius)
şeklindedir. İlk dört konum bağımsız değişkeni, öğenin kenarlarından içe doğru olan ofsetlerdir. Son bağımsız değişken, dikdörtgen şeklinin kenarlığı yarıçapıdır. İsteğe bağlı olduğundan bu alanı boş bırakabilirsiniz. CSS'de zaten kullandığınız border-radius
kısaltma gösterimini kullanır.
.element{
shape-outside: inset(100px 100px 100px 100px);
/* yields a rectangular shape which is 100px inset on all sides */
float: left;
}
Referans kutularından şekil oluşturma
shape-outside
mülküne bir şekil işlevi belirtmezseniz tarayıcının öğenin referans kutusundan bir şekil türetmesine izin verebilirsiniz. Varsayılan referans kutusu margin-box
'tür. Şu ana kadar sıra dışı bir şey yok. Kayan nokta sayılar zaten bu şekilde çalışır. Ancak bu tekniği uygulayarak bir öğenin geometrisini yeniden kullanabilirsiniz. border-radius
mülküne göz atalım.
Bu özelliği, yüzen bir öğenin köşelerini yuvarlamak için kullanırsanız kırpma efekti elde edersiniz ancak yüzen alan dikdörtgen olarak kalır. border-radius
tarafından oluşturulan konturu sarmalamak için shape-outside: border-box
ekleyin.

.element{
border-radius: 50%;
shape-outside: border-box;
float: left;
}
Elbette tüm referans kutularını bu şekilde kullanabilirsiniz. Türetilmiş şekillerin başka bir kullanımı da ofset alıntılardır.

Yalnızca float ve margin özelliklerini kullanarak ofset alıntı efekti elde etmek mümkündür. Ancak bunun için HTML ağacında alıntı öğesini, oluşturulmasını istediğiniz noktada konumlandırmanız gerekir.
Aynı ofset alıntı efektini daha fazla esneklikle nasıl elde edebileceğiniz aşağıda açıklanmıştır:
.pull-quote{
shape-outside: content-box;
margin-top: 200px;
float: left;
}
Şeklin koordinat sistemi için content-box
referans kutusunu açıkça belirleriz. Bu durumda, alıntıdaki içerik miktarı, dış içeriğin etrafına sarıldığı şekli tanımlar. margin-top
özelliği, HTML ağacındaki konumundan bağımsız olarak alıntı metnini konumlandırmak (ofset) için burada kullanılır.
Şekil kenar boşluğu
İçeriği bir şeklin etrafına sarmaladığınızda içeriğin öğeye çok yakın bir şekilde sürtündüğünü fark edebilirsiniz. shape-margin
mülkünü kullanarak şeklin etrafına boşluk ekleyebilirsiniz.
.element{
shape-outside: circle(40%);
shape-margin: 1em;
float: left;
}
Bu etki, normal margin
mülkünü kullanırken alıştığınız etkiye benzer ancak shape-margin
yalnızca shape-outside
değerinin etrafındaki alanı etkiler. Yalnızca koordinat sisteminde yer varsa şeklin etrafına boşluk eklenir. Bu nedenle, yukarıdaki örnekte daire yarıçapı %50 yerine %40 olarak ayarlanmıştır. Yarıçap %50 olarak ayarlanmış olsaydı daire, koordinat sistemindeki tüm alanı kaplar ve shape-margin
etkisine yer bırakmazdı. Şeklin nihayetinde öğenin margin-box
(öğe ve çevreleyen margin
) ile sınırlı olduğunu unutmayın. Şeklin boyutu daha büyükse ve taşarsa margin-box
'ye kırpılır ve dikdörtgen bir şekil elde edersiniz.
shape-margin
işlevinin yalnızca tek bir pozitif değer kabul ettiğini unutmayın. Uzun el yazısı notasyonu yoktur. Yuvarlak için shape-margin-top nedir?
Şekillere animasyon ekleme
CSS şekillerini geçişler ve animasyonlar gibi diğer birçok CSS özelliğiyle birlikte kullanabilirsiniz. Bununla birlikte, kullanıcıların metin düzeni okurken değiştiğinde bu durumu çok can sıkıcı bulduğunu vurgulamak isterim. Şekilleri animasyonlu hale getirmeye karar verirseniz deneyime çok dikkat edin.
Tarayıcı tarafından ara değer olarak alınabilecek değerlerle tanımlandıkları sürece circle()
ve ellipse()
şekillerinin yarıçaplarını ve merkezlerini animasyonlu hale getirebilirsiniz. circle(30%)
'ten circle(50%)
'a geçiş yapabilirsiniz. Ancak circle(closest-side)
ile circle(farthest-side)
arasında animasyon yapılması tarayıcıyı tıkar.
.element{
shape-outside: circle(30%);
transition: shape-outside 1s;
float: left;
}
.element:hover{
shape-outside: circle(50%);
}

polygon()
şekillerine animasyon uygularken daha ilginç efektler elde edilebilir. Bunun için poligonun iki animasyon durumu arasında aynı sayıda köşe noktasına sahip olması gerekir. Köşe eklerseniz veya kaldırırsanız tarayıcı bu noktaları ara değerle dolduramaz.
Bir hile, ihtiyacınız olan maksimum sayıda köşe eklemek ve bunları, şeklin daha az algılanan kenarı olmasını istediğiniz animasyon durumunda gruplandırılmış olarak konumlandırmaktır.
.element{
/* four vertices (looks like rectangle) */
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: shape-outside 1s;
}
.element:hover{
/* four vertices, but second and third overlap (looks like triangle) */
shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

İçeriği bir şeklin içine sarmalama

CSS Şekiller spesifikasyonunun ilk taslağında, içeriği bir şeklin içine sarmanıza olanak tanıyan bir shape-inside
özelliği yer alıyordu. Hatta bir süre Chrome ve Webkit'te de uygulandı. Ancak keyfi olarak yerleştirilmiş içeriği özel bir yola sarmalamak, tüm olası senaryoları kapsayacak ve hataları önleyecek çok daha fazla çaba ve araştırma gerektirir. Bu nedenle shape-inside
mülkü CSS Şekiller 2. Seviye'ye ertelendi ve ilgili uygulamalar geri çekildi.
Ancak biraz çaba ve biraz ödün vererek içeriği özel bir şeklin içine sarmalama etkisini yine de elde edebilirsiniz. Bu hile, bir kapsayıcının zıt taraflarına yerleştirilmiş, shape-outside
ile iki yüzen öğe kullanmaktır. Bunun karşılığında, anlamsal anlamı olmayan ancak içinde bir şekil yanılsaması oluşturmak için destek görevi gören bir veya iki boş öğe kullanmanız gerekir.
<div>
<div class='left-shape'></div>
<div class='right-shape'></div>
Lorem ipsum...
</div>
İçeriği çevrelemek için sol ve sağa kaydırılacakları için kapsayıcının üst kısmındaki .left-shape
ve .right-shape
destek öğelerinin konumu önemlidir.
.left-shape{
shape-outside: polygon(0 0, ...);
float: left;
width: 50%;
height: 100%;
}
.right-shape{
shape-outside: polygon(50% 0, ...);
float: right;
width: 50%;
height: 100%;
}

Bu stil, iki yüzen destek sütununun öğe içindeki tüm alanı kaplamasına neden olur ancak shape-outside
özellikleri, içeriğin geri kalanı için yer açar.
CSS Şekilleri tarayıcı tarafından desteklenmiyorsa tüm içeriği aşağı iterek çirkin efektler oluşturur. Bu nedenle, özelliği giderek daha gelişmiş bir şekilde kullanmak önemlidir.
Önceki şekil animasyonu örneklerinde, metnin kaymasının can sıkıcı olabileceğini fark edeceksiniz. Tüm kullanım alanları animasyonlu bir şekli gerektirmez. Ancak, uygun olduğunda efekt eklemek için CSS Şekilleri ile etkileşime geçen diğer özellikleri canlandırabilirsiniz.
CSS Şekiller'in Alice Harikalar Diyarı gösterisinde, içeriğin üst kenar boşluğunu değiştirmek için kaydırma konumunu kullandık. Metin, iki yüzen öğe arasına sıkıştırılmıştır. Aşağı doğru hareket ederken, iki yüzen öğenin shape-outside
değerine göre yeniden düzenlenmesi gerekir. Bu, metnin bir labirentin içine doğru gittiği izlenimi verir ve hikaye anlatma deneyimine katkıda bulunur. İhlale yakın mı? Açmanız gerekebilir. Ancak harika görünüyor.
Metin düzeni tarayıcı tarafından doğal olarak yapıldığından performans, JavaScript çözümü kullanmaya kıyasla daha iyidir. Ancak kaydırma sırasında margin-top değerinin değiştirilmesi çok sayıda yeniden düzen ve boyama etkinliği tetikler. Bu da performansı önemli ölçüde düşürebilir. Dikkatli kullanın. Ancak CSS şekillerini animasyon olmadan kullanmak, performansta belirgin bir düşüşe neden olmaz.
Progresif geliştirme
Tarayıcının CSS Şekilleri desteği olmadığını varsayarak başlayın ve özelliği tespit ettiğinizde bu temele dayanarak devam edin. Modernizr, özellik algılama için iyi bir çözümdür ve 'Temel olmayan algılamalar' bölümünde CSS Şekilleri için bir test vardır.
Bazı tarayıcılar, harici kitaplıklara ihtiyaç duymadan CSS'de @supports
kuralı aracılığıyla özellik algılama sağlar. CSS Şekilleri'ni de destekleyen Google Chrome, @supports
kuralını anlar. Aşağıdakileri kademeli olarak iyileştirmek için bu özelliği nasıl kullanacağınızı öğrenin:
.element{
/* styles for all browsers */
}
@supports (shape-outside: circle(50%)){
/* styles only for browsers which support CSS Shapes */
.element{
shape-outside: circle(50%);
}
}
Lea Verou, CSS @supports kuralının nasıl kullanılacağı hakkında daha fazla yazı yazdı.
CSS hariç tutmalarından kaynaklanan belirsizlikleri giderme
Bugün CSS Şekiller olarak bildiğimiz özellik, spesifikasyonun ilk günlerinde CSS Hariç Tutmalar ve Şekiller olarak adlandırılıyordu. Adlandırmadaki değişiklik önemsiz gibi görünse de aslında çok önemlidir. Artık ayrı bir spesifikasyon olan CSS hariç tutmaları, float özelliğine gerek kalmadan içerikleri keyfi olarak yerleştirilmiş öğelerin etrafına sarmalamaya olanak tanır. İçeriği, mutlak konumlandırılmış bir öğenin etrafına sarmaladığınızı düşünün. Bu, CSS hariç tutmalarının bir kullanım alanıdır. CSS Şekilleri, içeriğin etrafına sarıldığı yolu tanımlar.
Şekiller ve hariç tutmalar aynı şey olmasa da birbirini tamamlar. CSS Şekiller şu anda tarayıcılarda kullanılabilirken CSS hariç tutmaları henüz şekil etkileşimiyle uygulanmamıştır.
CSS şekilleriyle çalışma araçları
Klasik resim oluşturma araçlarında yol oluşturabilirsiniz ancak bu makalenin yazıldığı sırada bu araçların hiçbiri CSS Şekilleri değerleri için gerekli söz dizimini dışa aktarmıyor. Yapabilse bile bu şekilde çalışmak çok pratik olmaz.
CSS Şekilleri, tarayıcıda kullanılmak üzere tasarlanmıştır. Burada sayfadaki diğer öğelere tepki verirler. Şeklin düzenlenmesinin etrafındaki içerik üzerindeki etkilerini görselleştirmek çok yararlıdır. Bu iş akışında size yardımcı olacak birkaç araç vardır:
Brackets: Brackets için CSS Şekil Düzenleyici uzantısı, şekil değerlerini düzenlemek üzere etkileşimli bir düzenleyiciyi yerleştirmek için kod düzenleyicinin canlı önizleme modunu kullanır.
Google Chrome: Google Chrome için CSS Şekil Düzenleyici uzantısı, tarayıcının Geliştirici Araçları'na şekil oluşturma ve düzenleme kontrolleri ekler. Seçilen öğenin üzerine etkileşimli bir düzenleyici yerleştirir.
Google Chrome'daki denetleyici, şekilleri vurgulama için yerleşik destek sunar. Fareyle shape-outside
özelliğine sahip bir öğenin üzerine geldiğinizde öğe ışıldayarak şeklini gösterir.
Resimlerden şekiller: Resim oluşturmayı ve tarayıcıdan bu resimlerden şekiller çıkarmasını tercih ediyorsanız Rebecca Hauck'ın Photoshop ile ilgili faydalı bir eğitimi inceleyebilirsiniz.
Polyfill: Google Chrome, CSS Şekilleri'ni kullanıma sunan ilk büyük tarayıcıdır. Bu özellik, Apple'ın iOS 8 ve Safari 8 sürümlerinde yakında destek görecek. Diğer tarayıcı tedarikçileri bu özelliği gelecekte kullanıma sunabilir. O zamana kadar, temel destek sağlamak için bir CSS Şekiller çoklu dolgu mevcuttur.
Sonuç
İçeriğin çoğunlukla basit kutulara hapsolduğu web'de CSS Şekilleri, web ile basılı tasarım arasındaki doğruluk açığını kapatarak etkileyici bir düzen oluşturmanın bir yolunu sunar. Elbette şekiller kötüye kullanılabilir ve dikkat dağıtıcı olabilir. Ancak şekiller, zevkle ve doğru şekilde kullanıldığında içerik sunumunu iyileştirebilir ve kullanıcının dikkatini kendisine özgü bir şekilde odaklayabilir.
Dikdörtgen olmayan düzenlerin ilginç kullanımlarını gösteren, çoğunlukla basılı kaynaklardan alınmış diğer kişilerin çalışmalarını sizinle paylaşıyorum. Bu makalenin, CSS Şekilleri'ni denemeniz ve yeni tasarım fikirlerini denemeniz için size ilham vermesini umuyoruz.
Bu makaleyi inceleyip değerli bilgiler paylaşan Pearl Chen, Alan Stearns ve Zoltan Horvath'a çok teşekkür ederiz.