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 Yokcolumn-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 Yokcolumn-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 Yokcolumn-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...
0 Yorum