Etiket: rule

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