CSS3 ile Metni Sütunlara Bölme


Twitter'da Paylaş Favorilerime Ekle

Metni Sütunlara Ayırma

CSS3 column-count özelliğini kullanarak web sayfamızdaki istediğimiz metnin sütunlar halinde gösterilmesini sağlayabiliriz. Tek yapmamız gereken column-count özelliği ile metnin kaç sütuna ayrılacağını belirtmektir. 

Tarayıcıların eski versiyonları için -webkit- ve -moz- ön ekleri kullanılmalıdır.

.haber{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
}

Yukarıdaki örnekte haber class'ı uygulanan elemanlar içindeki metnin 3 sütuna ayrılması sağlanmıştır.

Sütunlar Arasındaki Boşluğu Ayarlama

Metin sütunlara ayrılmış ise bu sütunlar arasında bırakılacak boşluk miktarını column-gap özelliği ile belirleyebiliriz.

.haber{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-gap: 45px;
-webkit-column-gap: 45px;
-moz-column-gap: 45px;
}

Sütunların Genişliğini Ayarlama

Sütunların genişliğini column-width özelliği ile belirleyebiliriz.

.haber{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
-webkit-column-width: 150px;
column-width: 150px;
}

Sütunlar Arasına Çizgi Koyma

Sütunlar arasında varsayılan olarak çizgi olmayacaktır. Çizgi kullanmak istiyorsak column-rule-style özelliği ile çizginin stilini, column-rule-width özelliği ile de kalınlığını belirleyebiliriz.

.haber{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-rule-style: solid;
-webkit-column-rule-style: solid;
 -moz-column-rule-style: solid;
column-rule-width: 1px;
-webkit-column-rule-width: 1px;
 -moz-column-rule-width: 1px;
}

Ayrıca column-rule-color özelliği kullanılarak sütunlar arasındaki çizginin rengi belirlenebilir.

Bu üç özellik column-rule özelliği ile tek satırda da belirtilebilir.

column-rule: 2px solid gray;

İstenilen Yerlerde Sütunları Birleştirme

Sütunlara ayrılmış bir metnin içindeki bazı elemanların birden fazla sütunluk yer kaplaması istenebilir. Örneğin metin içindeki başlıkların sütunlara bölünmeden tam satır halinde gösterilmesi, ardından metnin tekrar sütunlar halinde devam etmesi sağlanabilir.

Aşağıdaki örnekte div elemanı içindeki metin 3 sütuna bölünmüş, h1, h2 etiketlerinin ise tüm satırı kaplaması yani sütunlara ayrılmaması sağlanmıştır.

All değeri o elemanın tüm sütunları kaplamasını sağlar.

h1, h2 {
    -webkit-column-span: all;
    column-span: all;
}
 
.haber{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
}
Bu örneğin çalışan halini Konu Örnekleri kısmında görebilirsiniz.

 

html web sayfasında css ile metni sütunlara ayırma, css ile html metni 2 sütuna ayırma, web sayfasındaki yazıları sütunlar halinde gösterme

KONU İLE İLGİLİ ÖRNEKLER

Css metni sütunlara ayırma örneği Kendin Dene

YORUMLAR



CSS Dersine Ait Diğer Konular: