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