Css3 Kolonlama Sistemi
Css

Css3 Kolonlama Sistemi

Merhaba arkadaşlar. Bu makalemizde sizlere css3 ile birlikte gelen bir özelliğe değineceğim. Genel adıyla columns sayesinde gazete ve dergilerdeki gibi metinlerimizi görüntülerken kolonlar ile ayırarak görüntüleyebiliyoruz. Çoklu kolonlarımızı düzenlemek için 8 adet özelliğimiz bulunmaktadır. Bu özellikler vasıtasıyla kolonumuzun yapısını, genişliğini ve kolonlar arası mesafesini düzenleyebiliyoruz.Bu özellikler şunlardır;
» column-count
» column-width
» columns
» column-gap
» column-rule
» column-break ya da break-*
» column-span
» column-fill
Burada column-count, column-width, column-gap, column-rule özellikleri internet explorer dışında tüm yeni nesil tarayıcıların desteklediği özelliklerdir. Columns, column-break yada break-*, column-span ve column-fill gibi özellikleri sadece webkit tabanlı tarayıcılar desteklemektedir. Şimdi kısa bu özelliklerden bahsedelim.

column-count
Kolon sayısını belirtmemizi sağlar.

#kolonlunesne{
width:800px;
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox 1.5+

column-width
Nesnemizi kolonlara bölmek için ikinci bir yöntem diyebiliriz. Belirttiğimiz genişlikte otomatik kolonlar oluşturulur. Dipnot olarak belirtmeliyimki column-width ile column-count aynı anda kullanılabilirler.
#kolonlunesne{
column-width:250px;
-moz-column-width:250px;
-webkit-column-width:250px;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox 1.5+
Mobil Tarayıcı Desteği :Chrome 36+ | Android 2.1+ | Safari 3.2+

columns
Column-count ve column-width özelliklerini birlikte kullanmamızı sağlar.
#kolonlunesne{
columns: 250px 3;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox Destek Yok

column-gap
Kolonlar arasına boşluk koymak için kullanılıyor.
#kolonlunesne{
column-gap: 25px;
-webkit-column-gap: 25px;
-moz-column-gap: 25px;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox 1.5+
Mobil Tarayıcı Desteği :Chrome 36+ | Android 2.1+ | Safari 3.2+

column-rule
Column-rule ile kolonlar arasına çizgi koyabiliyoruz.
#kolonlunesne{
column-rule: 2px solid #333
-webkit-column-rule: 2px solid #333;
-moz-column-rule: 2px solid #3333;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox 1.5+
Mobil Tarayıcı Desteği :Chrome 36+ | Android 2.1+ | Safari 3.2+

break-before, break-inside ve break-after
break-before : Çoklu kolon özelliği kullanılmış bir nesnenin içindeki bir elemanın öncesinde kolonun bölünmesini veya bölünmemesini sağlar. auto, left, rightalways, avoid-page, avoid-column, avoid, page ve column değerleri ile kullanılmaktadır.
break-inside : Çoklu kolon özelliği kullanılmış bir nesnenin içinde bulunan elementin kolondaki durumunu düzenlemek için kullanılır. auto, avoid-page, avoid, avoid-column değerleri ile kullanılmaktadır.
break-after : Çoklu kolon özelliği kullanılmış bir nesnenin içindeki bir elemanın sonrasında kolonun bölünmesini veya bölünmemesini sağlar.auto, left, right, page, column, always, avoid, avoid-page ve avoid-column değerleri ile kullanılmaktadır.
#kolonlunesne h1{
-webkit-column-break-after:always;
margin:10px 0;
font-size:14px;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox Destek Yok

column-span
Kolonlarımıza başlıklar koymak istiyorsak ve başlıkları tüm kolonlarımıza yaymak istiyorsak bu özelliği kullanabiliriz. All ve none şeklinde iki değer alır. Yada kolon sayımızı belirterek o kolonu işleme almasını sağlayabiliriz.
#kolonlunesne h1{
column-span:all;
-webkit-column-span:all;
-moz-column-span:all;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox Destek Yok

column-fill
Çoklu kolon kullanımında tarayıcılar yüksekliklerini otomatik ayarlarlar. Bu özelliği kolon yüksekliklerini ayarlamak için kullanabiliriz. Balance ve auto değerlerini alır.
balance : Her kolonun yüksekliği eşit olacak şekilde ayarlamak için bu özelliği kullanabiliriz.
auto : Kolonları sırayla doldurur. Bu özelliğimiz yükseklik tanımı yapılması halinde işleme alınır. Belirtilen yükseklik değerini göre içeriği doldurur.
#kolonlunesne{
column-fill:auto;
-webkit-column-fill:auto;
-moz-column-fill:auto;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox Destek Yok

İlerleyen zamanlarda çok kullanacağımız bir özellik olacağına inanıyorum. Sonraki makalelerde görüşmek üzere...


author

Aykut Erdoğan

css3, column-count, column-width, column-gap, column-rule

  • Bu Yazılara da Gözat:

    0 Yorum

    Cevapla