CSS background-repeat

background-repeat:

Arkaplanın Dikey ve Yatay olarak tekrar ettirmemizi sağlar. Tanımlanan obje içerisinde yatay olarak tekrarlanması sağlanmış olur.

Örnek:

body {
    background-image: url('http://lorempixel.com/200/200/city/');
    background-repeat: repeat-x;
}

See the Pen ZbmWwz by W3TR (@w3tr) on CodePen.

Css Sözdizimi

Değer Açıklama
repeat-y Sadece dikey olarak tekrar etmesi için alabileceği değer.
repeat-x Tekrar etmemesi için alacağı değer.
repeat Her yöne tekrar etmesi için alacağı değer.
no-repeat Tekrar etmemesini sağlar.
İnital
İnherit

Tarayıcı Desteği

1.0 1.0 4.0 1.0 3.5

CSS background-color

background-color:

Objeye arkaplan rengi vermemizi sağlar. Örnek kullanım aşağıdaki gibidir.

Örnek:

div {
    height: 250px;
    width: 250px;
    background-color: #b0c4de;
    text-align: center;
    line-height: 250px;
}

See the Pen MazyrR by W3TR (@w3tr) on CodePen.

Css Sözdizimi

Değer Açıklama
color Arkaplan rengini belirlemek için kullanılır.
transparent Arkaplanın şeffaf olmasını sağlar

Tarayıcı Desteği

 

1.0 1.0 4.0 1.0 3.5

CSS backface-visibility

backface-visibility:

Bir objenin rotate ile döndürülmüş durumda iken görünür olup olmama durumunu belirlememizi sağlar.

Örnek:

div {
    position: relative;
    height: 60px;
    width: 60px;
    background-color: red;
    -webkit-transform: rotateY(180deg);  /* Chrome, Safari, Opera */
    transform: rotateY(180deg);
}

#div1 {
    -webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */
    backface-visibility: hidden;
}

#div2 {
    -webkit-backface-visibility: visible;  /* Chrome, Safari, Opera */
    backface-visibility: visible;
}

 

See the Pen JYeGLz by W3TR (@w3tr) on CodePen.

Css Sözdizimi

Varsayılan değer: visible;
backface-visibility: visible|hidden|initial|inherit;

Değer Açıklama Örnek
visible Arkaplan görünür.
hidden Arkaplan görünmez.
inital
inherit

 

Tarayıcı Desteği

36.0
12.0 -webkit
10.0 -moz
16.0
10.0 9.0
4.0 -webkit
13.0
15.0 -webkit

CSS align-self

align-self:

Obje içindeki seçilen nesnenin uyumunu (konumunu) belirler.

Örnek:

#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: flex-start; /* Safari 7.0+ */
    display: flex;
    align-items: flex-start;
}

#main div {
    -webkit-flex: 1; /* Safari 6.1+ */
    flex: 1;
}

#mavi {
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
}

 

See the Pen GpYOoY by W3TR (@w3tr) on CodePen.


CSS Sözdizimi

Değer Açıklama Örnek
auto Öğe ana objeye sığacak kadar uzatılır.
stretch Öğe ana objeye sığacak kadar uzatılır.
center Öğe ana objenin merkezine konumlandırılır.
flex-start Öğe ana objenin başında konumlandırılır.
flex-end Öğe ana objenin sonunda konumlandırılır.
baseline Öğe ana objenin başında konumlandırılır. .
inital Varsayılan değerine bu özelliğini ayarlar.
inherit Bir üst elementinin değerini alır.(Kalıtsallık)

Tarayıcı Desteği

 

21.0 -webkit 28.0 11.0 7.0 -webkit 12.10

CSS align-items

align-items:

Obje içindeki nesneleri kenarlardan itibaren dikey ortalama yapar.

Örnek:

div {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

 

See the Pen RWyOOJ by W3TR (@w3tr) on CodePen.

CSS Sözdizimi

 

Değer Açıklama Örnek
stretch  Öğeler ana objeye sığacak kadar uzatılır.
center  Öğeler ana objenin merkezine konumlandırılır.
flex-start  Öğeler ana objenin başında konumlandırılır.
flex-end  Öğeler ana objenin sonunda konumlandırılır.
Baseline  Öğeler ana objenin başında konumlandırılır. .
initial  Varsayılan değerine bu özelliğini ayarlar.
inherit  Bir üst elementinin değerini alır.(Kalıtsallık)

Tarayıcı Desteği

 

21.0 20.0 11.0 7.0 -webkit 12.1