Etiket: css

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

CSS3 Column-count

Column-count :

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

Örnek

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

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
number Elementin içeriğe uygun sütun satısı belirlenir.
auto Elementin sütun sayısı otomatik belirlenecektir.
İ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

CSS color

Color :

color özelliği metnin rengini belirler.

Örnek

.color {
  color: blue;
}
.color strong {
  color: red;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
color Metnin rengini belirtir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 3.0 1.0 3.5
Posted on by Samed GÖZÜTOK 0

CSS clip

Clip :

Bu özellik absolute konumlandırılmış bir elemente bir dikdörtgen belirlemenizi sağlar. Dirtdörtgen elementin sol üst köşesinden başlayarak 4 köşeli bir koordinat yazılırak kırpılır.

Örnek

img{
   position: absolute;
   clip: rect(0px,150px,150px,0);
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
auto Resime kırpma uygulanmaz.
shape Klip uygulanacak koordinatlar yazılır. rect (üst , sağ, alt , sol)
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 8.0 1.0 7.0
Posted on by Samed GÖZÜTOK 0

CSS clear

clear :

float değerlerinden etkilenmemesi için kullanılır. Genellikle aynı element içindeki bir başka objeye float değeri aldğı zaman diğer objeler bu değerden etkilenebilir. Bunu önlemek için kullanılır. (Float dalgalanmalarını önlemek için kullanılır.)

Örnek

p{
  float: left;
}
.clear{ 
  clear: both;
}

Codepen Ön izleme

 

 

Css Sözdizimi

Değer Açıklama
none Her iki taraf için float değerini temizlemez.
left Sol taraf için float değerini temizlenir.(Yüzen elemanlara izin verilmez.).
right sağ taraf için float değerini temizlenir.(Yüzen elemanlara izin verilmez.).
both Her iki taraf için float değerini temizler.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 5.0 1.0 6.0
Posted on by Samed GÖZÜTOK 0

CSS caption-side

caption-side :

Tablo başlığının  konumu belirtmek için kullanılır.

Örnek

table {
  caption-side: bottom;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
top Tablo başlığını üste yerleştirir.
bottom Tablo başlığını alta yerleştirir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 8.0 1.0 4.0
Posted on by Samed GÖZÜTOK 0

CSS box-sizing

Box-sizing :

Bu boyutlandırma özelliği ile elemente verdiğiniz sınır değerleri kesindir. Pading gibi iç boşluk değerlerinden etkilenmez. Böylelikle elementinizi kesin boyutlandırmanızı sağlar.

Örnek

.sizing{
     width: 200px;
    height: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
content-box Width ve height özellikleri ( ve min / max özellikleri) marjin ve dolgu(padding) sınırı etkiler.
Border-box Width ve height özellikleri ( ve min / max özellikleri) marjin ve dolgu(padding) sınırı etkilemez.
İnital
İnherit

Tarayıcı Desteği
10.0
4.0-webkit		 29.0
3.2-moz		 8.0 5.1
3.1-webkit		 9.5
Posted on by Samed GÖZÜTOK 0

CSS box-shadow

Box-shadow :

Bir elemente bir veya birden fazla gölge ekler.

Örnek

.shadow{
   box-shadow: 10px 10px 5px blue;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Gölge değeri almaz.
h-shadow Yatay gölge konumunu ayarlar. Negatif değerler alabilir.
v-shadow Dikey gölge konumunu ayarlar. Negatif değerler alabilir.
blur İsteğe bağlı bulanıklık ayarı.
spread İsteğe bağlı gölgenin boyutunu ayarlar. Negatif değerlere izin verilir.
color İsteğe bağlı gölge rengidir. Varsayılan değer siyahtır. Fakat safaride değer belirtmezseniz hiç gösterilmez.
inset İsteğe bağlı iç ve dış gölge ayarını yapmanıza olanak sağlar.
İnital
İnherit

Tarayıcı Desteği
10.0
4.0-webkit		 4.0
3.5-moz		 9.0 5.1
3.1-webkit		 10.5
Posted on by Samed GÖZÜTOK 1

CSS bottom

Bottom :

Position: absolute olarak konumlandırılmış elementler için position: relative’li elementin bottom  değerine göre ayarlanır.

Position: relative li elementli nesneler için ise kendi bulunduğu konumuna göre bottom değerini kazanır.

Örnek

.relative{
  position: relative;
  border: 1px dotted red;
}
.apsolute{
  position :absolute;
  left: 25%;
  bottom:10px;
  border: 1px solid blue;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
auto otomatik olarak ayarlanır.
length Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 5.0 1.0 6.0
Posted on by Samed GÖZÜTOK 0

CSS border-width

Border-witdh :

Elementin kenarlık kalınlığını belirlemek için kullanılır.

Örnek

#border{
    border-style: DOTTED;
    border-width: 5px;
    padding: 10px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
medium Kenarlık genişliğini orta olarak ayarlar.
thin İnce bir kenarlık olacağını belirtir.
thick Kalın bir kenarlık olacağını belirtir.
length Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 2