Etiket: css3

CSS3 @font-face

@font-face :

Her web sayfasının bir font’a ihtiyacı vardır. Tanımlanmadığı durumlarda bunu her web tarayıcısı farklı yorumlayabilir. Burada örnekte göreceğiniz ilk değer geçerli olan fonttur. O fontun web tarayıcısı tarafından okunamadığı yada tanımlanamadığı durumlarda ikinci font devreye girecektir.

Örnek

 @font-face {
    font-family: 'robotomedium';
    src: url('http://www.w3tr.com/file/roboto-medium_0-webfont.eot');
    src: url('http://www.w3tr.com/file/roboto-medium_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.woff2') format('woff2'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.woff') format('woff'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.ttf') format('truetype'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;

  }

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
font-family Gerekli. Yazının adını tanımlar.
src Gerekli. yazının bulunduğu konumu belirtmek için kullanılır.
font-stretch Yazı tipi renginin nasıl olması gerektiğini belirtmek için kullanılır. Varsayılan değer “normal” dir.
font-style Yazı tipi stilinin nasıl olacağını belirtmek için kullanılır. Varsayılan değer “normal” dir.
font-weight Fontun kalınlığını belirlemek için kullanılır. Varsayılan değer “normal” dir.
unicode-range Yazı karakter aralığını belirtmek için kullanılır. Varsayılan değer “U+0-10FFFF” dir.
İnital
İnherit

Tarayıcı Desteği
TTF/OTF 4.0 3.5 9.0 3.1 10.0
WOFF 5.0 3.6 9.0 5.1 11.1
WOFF2 36.0 35.0 desteklenmiyor desteklenmiyor 26.0
SVG 4.0 desteklenmiyor desteklenmiyor 3.2 9.0
EOT desteklenmiyor desteklenmiyor 6.0 desteklenmiyor desteklenmiyor
Posted on by Samed GÖZÜTOK 0

CSS counter-increment

counter-increment :

Bir veya birden fazla sayaç arttırma değeridir. Genellikle counter-reset property ve content özellikleriyle birlikte kullanılır.

Örnek

h3 {
  counter-increment: section;
}
h2 {
   counter-increment: subsection;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none hiç bir sayaç artırılmaz.
id Hangi saçların arttırılacağını belirtir. Hangi sayacın ne kadar arttırılacağını belirtilir. Gecikme zamanı 1 veya negatif değerlere izin verilir. Başlangıç değeri girilmemiş ise varsayılan değer 0 olarak alınır.
Column-count Sütun sayısı belirtir.
İnital
İnherit

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

CSS content

Content :

Bir elementin öncesine(before) veya sonrasına(after) css ile bir içerik oluşturmak için kullanılır. Content: ‘’ şeklindeki ifadenin içerisi doldurularak yada boş bırakılarak oluşturmak mümkün olacaktır. Oluşturacağımız içeriğe göre değişkenlik gösterir.

Örnek

p a:after {
  content:" (" attr(href) ")";
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
auto Belirtilirse hiçbir özellik kazanmaz. Varsayılan değeridir.
none Belirtilmiş içeriğe hiçbir değer vermez.
counter
attr Elementin attr’sini seçilebilir olmasını sağlar.
string Belirlediğimiz metnin içeriğini belirler.
Open-quote Belirlediğimiz elementi ya da metni tırnak başlangıç noktasını belirler.
Close-quote Belirlediğimiz elementi ya da metni tırnak bitiş noktasını belirler.
No-open-quote Belirtilmişse içerikten açılış teklifi kaldırır
url Elementin öncesine veya sonrasına bir url değişkeni yükler. Yani resim atmanıza imkan sağlar.
İnital
İnherit

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

CSS3 columns

Columns :

Sütunlar hem genişlik hemde sayısını ayarlamak için kestirme bir özelliktir.

Örnek

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

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
auto Sütunların hem genişliği hem de sayısı otomatik ayarlanır.
Column-width Sütun genişliği belirtir.
Column-count Sütun sayısı belirtir.
İnital
İnherit

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

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