Etiket: column

CSS3 column-width

Colomn-width :

Sütunlar için en uygun genişliği belirtir.

Örnek

.column {
   -webkit-column-width: 200px; /* Chrome, Safari, Opera */
    -moz-column-width: 200px; /* Firefox */  
    column-width: 200px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
auto Sütunlar için genişlik tarayıcı tarafından belirlenir.
length Sütunların alacağı genişliği belirtilen genişlik değeridir.
İnital
İnherit

Tarayıcı Desteği
4.0-webkit 2.0-moz 10.0 3.1-webkit 11.1
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS3 column-span

column-span :

Bir elementin sütun içinde yayılıp yayılmayacağını belirmek için kullanılır.

Örnek

.column {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
     column-count: 3;
  
}

.column h3 {
   -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
1 Sütunlar arasında kalarak 1 sütunluk yer kaplar.
all Sütunlar boyunca uzanarak bütün satırı kaplar.
İnital
İnherit

Tarayıcı Desteği
4.0-webkit 2.0-moz 10.0 3.1-webkit 11.1
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS3 column-rule-width

Colomn-rule-width :

Sütunlar arasındaki kesmenin genişliğini ayarlar.

Örnek

.column {
      /* Chrome, Safari, Opera */
    -webkit-column-count: 5;
    -webkit-column-gap: 60px;
    -webkit-column-rule-style: dotted;
    -webkit-column-rule-width: 3px;

    /* Firefox */
    -moz-column-count: 5;
    -moz-column-gap: 60px;
    -moz-column-rule-style: dotted;
    -moz-column-rule-width: 3px;

    column-count: 5;
    column-gap: 60px;
    column-rule-style: dotted;
    column-rule-width: 3px;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
medium Sütunlar arasındaki kesmenin genişliğini orta olarak ayarlanır.
thin Sütunlar arasındaki kesmenin genişliğini ince olarak ayarlanır.
thick Sütunlar arasındaki kesmenin genişliğini kalın olarak ayarlanır.
length Sütunlar arasındaki kesmenin genişliğini istenilen boyutta ayarlanır.
İnital
İnherit

Tarayıcı Desteği
4.0-webkit 2.0-moz 10.0 3.1-webkit 11.1
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS3 column-rule-style

Column-rule-style :

Stunlar arasındaki kesmenin stilini ayarlar.

Örnek

.column {
      /* Chrome, Safari, Opera */
    -webkit-column-count: 5;
    -webkit-column-gap: 60px;
    -webkit-column-rule-style: dashed;

    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 60px;
    -moz-column-rule-style: dashed;

    column-count: 5;
    column-gap: 60px;
    column-rule-style: dashed;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none sütun çizgisini kaldırır.
hidden sütun çizgisini gizler.
dotted Noktalı bir sütun çizgisi çizer.
dashed Kesik bir sütun çizgisi çizer.
solid Düz bir sütun çizgisi çizer.
double ikili bir sütun çizgisi çizer.
groove 3D grooved(Yivli) sütun çizgisini çizer. Efekt renge göre değişkenlik gösterir.
ridge 3D ridge(Çıkıntılı) sütun çizgisini çizer. Efekt renge göre değişkenlik gösterir.
inset 3D inset sütun çizgisini çizer. Efekt renge göre değişkenlik gösterir.
outset 3D outset sütun çizgisini çizer. Efekt renge göre değişkenlik gösterir.
İnital
İnherit

Tarayıcı Desteği
4.0-webkit 2.0-moz 10.0 3.1-webkit 11.1
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS3 column-rule-color

Column-rule-color :

Sütunlar arasındaki kesmenin rengini ayarlar.

Örnek

.column{
      -webkit-column-count: 3;
    -webkit-column-gap: 30px;
    -webkit-column-rule-style: outset;
    -webkit-column-rule-color: blue;

    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 30px;
    -moz-column-rule-style: outset;
    -moz-column-rule-color: blue;

    column-count: 3;
    column-gap: 30px;
    column-rule-style: outset;
    column-rule-color: blue;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
color Sütunlar arasındaki kesmenin rengini belirlemek için kullanılır
İnital
İnherit

Tarayıcı Desteği
4.0-webkit 2.0-moz 10.0 3.1-webkit 11.1
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS3 column-rule

Column-rule :

 Sütunlar arasındaki kesmenin stilini ve rengini ayarlar.

Örnek

.column{
   -webkit-column-count: 5; /* Chrome, Safari, Opera */
    -moz-column-count: 5; /* Firefox */
    column-count: 5;
    -webkit-column-gap: 60px; /* Chrome, Safari, Opera */
    -moz-column-gap: 60px; /* Firefox */
    column-gap: 60px;
    -webkit-column-rule: 5px solid red; /* Chrome, Safari, Opera */
    -moz-column-rule: 5px solid red; /* Firefox */
    column-rule: 5px solid red;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
column-rule width Sütunlar arasındaki kural genişliğini ayarlar. Varsayılan değer: medium;
column-rule style Sütunlar arasındaki kural stilini ayarlar. Varsayılan değer: none;
column-rule-color Sütunlar arasındaki kural rengini ayarlar. Varsayılan değer: elemanın rengi;
İnital
İnherit

Tarayıcı Desteği
4.0-webkit 2.0-moz 10.0 3.1-webkit 15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS3 Column-fill

Colomn-fill :

Bölünmüş elementin sütun sayısını belirler.

Örnek

.column{
     -webkit-column-count: 5; /* Chrome, Safari, Opera */
      -moz-column-count: 5; /* Firefox */
       column-count: 5;
      -webkit-column-fill: balance; /* Chrome, Safari, Opera */
      -moz-column-fill: balance; /* Firefox */
      column-fill: balance;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
balance Sütunlar dengelidir.
number Sutunlar ardı ardına dolu olan kısım kadar farklı uzunluklara sahip olacaklardır.
İnital
İnherit

Tarayıcı Desteği
Desteklenmiyor 13.0-moz Desteklenmiyor Desteklenmiyor Desteklenmiyor
Posted on by Samed GÖZÜTOK 0