Yazar: Samed GÖZÜTOK

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

CSS border-top-width

border-top-width:

Elementin üst kenarlık genişliğini  ayarlamak  için kullanılır.

Not: Her zaman için önce border-top-width  özelliklerini ayarlayınız. Rengi değiştirmek için önce border elementiniz olması gerekir.

Örnek

#borderTop{
    border-style: dotted;
    border-top-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 sağ kenarlık belirtir.
thick Kalın bir sağ kenarlık 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

CSS border-top-style

Border-top-style :

Elementin üst kenarlık stilini  ayarlamak  için kullanılır.

Örnek

#borderTop{
    border-style: dashed;
    border-top-style: dotted;
    padding: 10px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Kenarlık stilinin olmadığını belirtir.
hidden Kenarlığı gizlemek için kullanılır.
dotted Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
dashed kesik çizgili bir kenarlık olduğunu belirtir.
double çift kenarlıklı bir kenarlık olduğunu belirtir.
solid düz bir kenarlık olduğunu belirtir.
groove düz kenarlıklı bir kenarlık olduğunu belirtir.
inset 3D gömme kenar tanımlar. Efekt border-color değerine bağlıdır.
ridge 3D oluklu kenar tanımlar. Efekt border-color değerine bağlıdır.
outset 3D outset kenar tanımlar. Efekt border-color değerine bağlıdır.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 5.5 1.0 9.2
Posted on by Samed GÖZÜTOK 1