Yazar: Samed GÖZÜTOK

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

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 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

 

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 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

 

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 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

 

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 by Samed GÖZÜTOK 1

CSS flex-flow

flex-flow :

Flex-direction ve flex Wrap ın kısayoludur. İki özelliği tek bir tanımla tanımlama imkanı verir.

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

Örnek

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

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
flex-direction kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler. row/row-reverse/column/column-reverse/initial/inherit
flex-wrap İki ve daha fazla satırdan oluşan flexlerin nasıl bir davranış sergileyeceğini belirlemek 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 by Samed GÖZÜTOK 0

CSS flex-direction

flex-direction :

Kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler.

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

Örnek

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

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
row Esnek kutuları soldan sağa sıralar.
row-reverse Esnek kutuları sağdan sola sıralar.
column Esnek kutuları kolon olarak yukarıdan aşağı sıralar.
Column-reverse Esnek kutuları row-reverse gibi ama alttan yukarı sıralar.
İ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 by Samed GÖZÜTOK 0

CSS flex-basis

flex-basis :

Div leri pixel olarak boyutlandırmak için kullanılır.

Not: Elementte flex özelliği yoksa flex-basis etkili olmaz.

Örnek

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

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
number Pixel olarak vereceğimiz değere göre boyutlandırır.
auto Div in boyutunu otomatik olarak ayarlar.
İ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 by Samed GÖZÜTOK 0

CSS background

background :

Objenin arkaplan ayarlarının yapılmasını sağlar ve aşağıdaki özelliklerde kullanılır ve her birinin ayrı parametreleri vardır.

Örnek

p {
  background: blue;
  color: white;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
background-color Arka plan rengini belirlemek için kullanılır.
background-image Arka plana görüntü eklemek için kullanılır.
background-position Arka plandaki görüntünün konumunu belirlemek için kullanılır.
background-size Arka plandaki görüntünün boyutunu belirlemek için kullanılır.
background-repeat Arka plandaki görüntünün tekrar etmesi gerektiğini belirtmek için kullanılır.
background-origin Arka plandaki görüntünün konumlandırılacağı alanı belirtmek için kullanılır.
background-clip Arka plandaki görüntünün boyama alanını belirtmek için kullanılır.
background-attachment Arka plandaki görüntü sayfanın geri kalanında sabit veya hareketli olacağını belirtmek için kullanılır.
İnital
İnherit

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

HTML <dialog> Tag

Örnek

<dialog open>W3TR 'YE HOŞGELDİNİZ</dialog>

Bu etiket bir dialog penceresi tanımlamak için kullanılır.

Codepen Ön izleme

 

Nitelikler

Nitelik Değer Açıklama
open open iletişim kutusunun etkin olduğunu belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <article> Tag

Örnek

<article>
  <h1>w3tr</h1>
  <p>orem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
</article>

Codepen Ön izleme

 

Posted on by Samed GÖZÜTOK 0