CSS3 font-stretch

font-stretch :

Bu font özelliği metni daha geniş veya dar yapmanıza olanak verir.

Örnek

.font {
  font-stretch: condensed;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/PPrjRN/'>font-stretch</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
ultra-condensed	Metni ultra daraltır.
extra-condensed	Metni extra daraltır.
condensed	Metni daraltır.
semi-condensed	Metni normalden biraz daha daraltır.
normal	Metne normal değerini verir.
semi-expanded	Metni normal değerden biraz daha genişletir.
expanded	Metni genişletir.
extra-expanded	Metni extra genişletir.
ultra-expanded	Metni ultra genişletir.
İnital
İnherit

Tarayıcı Desteği


Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor

Posted on 26 Kasım 2015 by Samed GÖZÜTOK 0

CSS3 font-size-adjust

font-size-adjust :

Web tarayıcısı ilk fontu okumadığı zaman ikinci fonta geçer ve font boyutunda önemli ölçüde değişimlere neden olabilir. Bu durumu önlemek için bu özellik her font un aynı boyutta gözükmesini sağlar.

Örnek

.font1 {
  font-family: 'arial',sans-serif;
  font-size-adjust : 1.0;
}
.font2 {
    font-family: 'verdana',sans-serif;
     font-size-adjust : 1.0;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/KdjqXq/'>font-size-adjust</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
number	Alacağı değeri belirlemek için kullanılır.
none	Değer almaz.
İnital
İnherit

Tarayıcı Desteği


desteklenmiyor	3.0	desteklenmiyor	desteklenmiyor	desteklenmiyor

Posted on 26 Kasım 2015 by Samed GÖZÜTOK 0

CSS font-size

font-size :

Yazının boyutunu ayarlar.

Örnek

.font {
  font-size: 45px;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/GpbEqK/'>font-size</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
medium	Orta boy metin tanımlamak için kullanılır. Varsayılan değerdir.
xx-small	Ekstra ekstra küçük boy metin tanımlamak için kullanılır.
x-small	Ekstra küçük boy metin tanımlamak için kullanılır.
small	Küçük boy metin tanımlamak için kullanılır.
large	Büyük boy metin tanımlamak için kullanılır.
x-large	Ekstra büyük boy metin tanımlamak için kullanılır.
xx-large	Ekstra ekstra büyük boy metin tanımlamak için kullanılır.
smaller	Küçük boy metin serisi tanımlamak için kullanılır.
larger	Büyük boy metin serisi tanımlamak için kullanılır.
length	Sabir bir değer tanımlamak için kullanılır.(12px, 1.5em, 100% gibi)
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	5.5	1.0	7.0

Posted on 26 Kasım 20152 Eylül 2016 by Samed GÖZÜTOK 0

CSS font-family

font-family :

Bir eleman için yazı ailesini belirtir. Birden çok yazı fontu içerisine yazabilirsiniz. Bu sayede tarayıcı birinci fontu desteklemiyorsa bir sonrakine geçer.

Örnek

.font{
  font-family: 'arial',sans-serif;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/RWzpmx/'>font-family</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
family-name generic-family	Birincisi ana font olarak alınır sonrakiler ise bağlı olduğu aileden farklı fontlardır.
flex-basis	Flex-basis de flex-grow gibi boyutlandırma yapar,ama bu px gibi değer alarak yapar.
flex-shrink	Flex-shrink değeri kadar o element diğerlerine göre fazladan daralacaktır.Varsayılan değeri 1 dir
auto	ayarı 1 1 e otomatik olarak ayarlar.
none	ayarı 0 0 a otomatik olarak ayarlar.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	3.5

Posted on 26 Kasım 2015 by Samed GÖZÜTOK 1

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

See the Pen <a href="http://codepen.io/w3tr/pen/BogWOx/">font-face</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

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 26 Kasım 2015 by Samed GÖZÜTOK 0

CSS font

font :

Font özellikleri sayfalarımızdaki metinlerin font ailesini, kalınlık ayarlarını, boyutunu, büyük-küçük harf olmasını ve stilini değiştirmemizi sağlar.

Örnek

.font{
     font: italic bold 20px/24px arial, serif;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/pjXeWq/">font</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Css Sözdizimi

Değer	Açıklama
font-variant	Metnin küçük/büyük harf ile gösterilmesini belirler.
Font-weight	Font un kalınlık incelik durumunu belirler. 100(ince)-900(kalın) arasında bir değer alabildiği gibi bold ve normal değerlerini de alır.
Font-style	Metnin italik olup olmayacağını belirlemek için kullanılır.
Font-size	Metnin boyutunu ayarlamak için kullanılır.
Line-height	Satır yüksekliğini ayarlamak için kullanılır.
Font-family	Metinlerde kullanacağımız font ailesini belirlemek için kullanılır. Birden fazla font ailesi kullanılırsa aralarına virgül konur.
icon	İcon lar tarafından kullanılan yazı tipini kullanır.
Menu	Açılan menüler tarafından kullanılan yazı tipini kullanır.
Message-box	İletişim kutuları tarafından kullanılan yazı tipini kullanır.
Status-bar	Durum çubuğu tarafından kullanılan yazı tipini almak için kullanılır.
caption	Kontroller tarafında kullanılan yazı tipini kullanır. (like buttons, drop-downs, etc.)
small-caption	caption yazı tipi nin küçük bir versiyonudur.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	3.5

Posted on 26 Kasım 20155 Mayıs 2016 by Samed GÖZÜTOK 0

CSS float

float :

Bir elementin diğerlerinden bağımsız olarak sağ ya da solda gösterip, elementin gerisinde kalan alanları (aşağı ya da yukarı gibi) boşluk olarak değerlendirip oraları da kullanabileceğimiz sayfalar yapabiliriz.

Not: position :absolute li elementleri yok sayar.

Örnek

.floatRight {
   float: right;
}
.floatLeft {
   float: left;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/meZWRW/">float</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Css Sözdizimi

Değer	Açıklama
none	Elementi hiçbir yöne yaslamaz. Bulunduğu yer nereyse orda kalır.
left	Elementi sola yaslamak için kullanılır. Diğer elementler bu elementin sağında kalır.
right	Elementi sağa yaslamak için kullanılır. Diğer elementler bu elementin solunda kalır.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	7.0

Posted on 26 Kasım 201518 Ağustos 2016 by Samed GÖZÜTOK 0

CSS flex-wrap

flex-wrap :

İki ve daha fazla satırdan oluşan esnek kutuların nasıl bir davranış sergileyeceğini belirlemek için kullanılır.

Not: elementin flex özelliği yoksa ,flex-wrap etkili olmaz.

Örnek

.flex {
    width: 150px;
    height: 150px;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;
    flex-wrap: wrap;
    background: red;
    color: white;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/QjXpKr/'>flex-wrap</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
nowrap	Tek satırda flex ler soldan sağa sıralaması için kullanılır.
wrap	İki veya daha fazla satırda flex ler soldan sağa sıralaması için kullanılır.
Wrap-reverse	iki veya daha fazla satırda esnek kutular sağdan sola sıralaması için kullanılır.
İnital
İnherit

Posted on 26 Kasım 201531 Ağustos 2016 by Samed GÖZÜTOK 0

CSS flex-shrink

flex-shrink :

Flex element içindeki diğer elementleri göre göreceli olarak nasıl büzüleceğini belirler.

Not: elementin flex özelliği yoksa ,flex-shrink etkili olmaz.

Örnek

.flex {
    width: 200px;
    height: 200px;
    display: -webkit-flex; /* Safari */
    display: flex;
    background: red;
    color: white;
    -webkit-flex-shrink: 3; /* Safari 6.1+ */
    flex-shrink: 3;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/OyepXj/'>flex-shrink</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
number	Elementin diğer elementlere göre ne kadar büyüyüp/küçüleceğini sayısal olarak belirtmek için kullanılır.
İnital
İnherit

Tarayıcı Desteği


29.0 21.0-webkit	28.0 18.0-moz	11.0 10.0-ms-	6.1-webkit	12.10

Posted on 26 Kasım 201531 Ağustos 2016 by Samed GÖZÜTOK 0

CSS flex-grow

flex-grow :

Bu özellik sayesinde kutular kendi aralarında belirlenen oranlarda esnek olarak genişleyip küçülecektir.

Not: elementin flex özelliği yoksa ,flex-glow etkili olmaz.

Örnek

.flex{
    width: 200px;
    height: 200px;
    display: -webkit-flex; /* Safari */
    display: flex;
    background: red;
    color: white;
    -webkit-flex-grow: 5;
     flex-grow: 5;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/bVPqEY/'>flex-grow</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
number	Elementin diğer elementlere göre ne kadar büyüyüp/küçüleceğini sayısal olarak belirtmek için kullanılır.
İnital
İnherit

Tarayıcı Desteği


29.0 21.0-webkit	28.0 18.0-moz	11.0 10.0-ms-	6.1-webkit	12.10

Posted on 26 Kasım 201531 Ağustos 2016 by Samed GÖZÜTOK 1

HTML, CSS

font-stretch :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

font-size-adjust :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

font-size :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

font-family :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

@font-face :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

font :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

float :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

flex-wrap :

Örnek

Codepen Ön izleme

Css Sözdizimi

flex-shrink :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

flex-grow :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği