Yazar: Samed GÖZÜTOK

CSS background-clip

background-clip:

Obje arkaplanın boyanacak bölümünü belirler.

Örnek:

#background-clip {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: padding-box;
}

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

Css Sözdizimi

Değer Açıklama
padding-box Arkaplan görüntüsü kenarlığın tam sol üst köşesinden boyar.
border-box Arkaplan görüntüsü kenarlığı yok sayarak tam objenin köşesinden boyar. Yani border yokmuş gibi davranır.
content-box Arkaplan görüntüsü iç boşluğunun sol üst köşesinden boyar.
initial
inherit

Tarayıcı Desteği
4.0 4.0 9.0 3.0 10.5
Posted on by Samed GÖZÜTOK 0

CSS background-origin

background-origin:

Arkaplan görüntüsünün içeriğin neresinden başlayacağını belirtir.

Örnek:

#background-orgin {
    border: 2px solid black;
    height: 400px;
    width: 50%;
    background: url(http://lorempixel.com/400/200/city/);
    background-repeat: no-repeat;
    background-origin: content-box;
}

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

Css Sözdizimi

Değer Açıklama
padding-box Arkaplan görüntüsü kenarlığın tam sol üst köşesinden başlar.
border-box Arkaplan görüntüsü kenarlığı yok sayarak tam objenin köşesinden başlar. Yani border yokmuş gibi davranır.
content-box Arkaplan görüntüsü iç boşluğunun sol üst köşesinden başlatır.
initial
inherit

Tarayıcı Desteği
4.0 4.0 9.0 3.0 10.5
Posted on by Samed GÖZÜTOK 0

CSS background-size

background-size:

Bir arkaplan görüntüsünün boyutunu ayarlamamızı sağlar.

Örnek:

.background-size{
   background: url('http://lorempixel.com/80/60/city/');
    background-size: 80px 60px;
    background-repeat: no-repeat;
    height: 80px;
}

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

Css Sözdizimi

Değer Açıklama
auto Arkaplan boyutunu otomatik ayarlar.
length ilk değer ve ikinci değer genişliği ikinci değer yüksekliği ayarlar. Girilmeyen değer auto olarak tanımlarnır.
percentage yüzde olarak değerverilebilir. İlk değer genişlik ikinci değer yüksekliktir. Girilmeyen değer auto olarak alınır.
cover Arkaplan görüntüsünü tamamen kaplar. Fakat bazı görünmeyen bölgeler olacaktır. Ayrıca resmin küçük olması bu kaplamanın görüntüsünü bozabilir.
contain Arkaplan resmini cover gibi kaplar fakat belirtilen objenin içine sığacak en büyük haline getirir.
initial
inherit

Tarayıcı Desteği
4.0
1.0-webkit		 4.0
3.6-moz		 9.0 4.1
3.0-webkit		 10.5
10.0-o
Posted on by Samed GÖZÜTOK 0

CSS background-position

background-position :

Arka plandaki görüntünün pozisyonunu belirlemek için kullanılır.

Örnek

.position {
  height: 17px;
  background-image: url('http://www.w3tr.com/file/html5.png');
  background-repeat: no-repeat;
  background-position: center;
}

Codepen Ön izleme

 

Css Sözdizimi

 

Değer Açıklama
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom 		Eğer tek bir değer verirseniz alacağı diğer değer otomatik olarak “center” olacaktır.
x% y% İlk değer yatay pozisyon ve ikinci değer dikey . Sol üst köşesi 0% 0 % ‘dir. Sağ alt köşede % 100 % 100’dür. Eğer tek bir değer belirtirseniz , diğer değer % 50 olacaktır . . Varsayılan değer : 0 % 0%
xpos ypos İlk değer yatay pozisyon ve ikinci değer dikey . Sol üst köşesi 0px 0px ‘dir. Sağ alt köşede % 100 % 100’dür. Eğer tek bir değer belirtirseniz , diğer değer % 50 olacaktır.
initial
inherit

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

CSS background-attachment

background-attachment:

Nesneye verilen arkaplanın sabitlik durumunu ayarlamamızı sağlar.

Örnek:

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

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

Css Sözdizimi

Değer Açıklama
scroll obje ile beraber arkaplan kayar. (Bu varsayılan değerdir.)
fixed Arkaplan görünüm açısından sabitlenir.
local Öğenin içeriği ile birlikte arkaplan kayar.
inital
inherit

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

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
Posted on by Samed GÖZÜTOK 0

CSS background-image

background-image:

Objeye arkaplan resmini atamamızı sağlar.

Örnek:

.background-image {
    height: 200px;
    width: 400px;
    background-image: url('http://lorempixel.com/400/200/city/');
}

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

Not: Bu şekilde vermemiz durumunda kendini sürekli olarak hem sağa hemde aşağıya doğru o obje içinde tekrarlayacaktır. Bunuda  ‘background-repeat’ başlığı altında kısıtlamanız mümkün olacaktır. Ayrıca resmin konumunu ayarlamak içinde ‘background-position’ başlığını ve boyutunu değiştirmek içinde ‘background-size’ başlıklarını incelemenizi öneririz.

Css Sözdizimi

 

Değer Açıklama Örnek
none Arkaplanı sıfırlar.
initial
inherit

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

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

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
Posted on by Samed GÖZÜTOK 0

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
Posted on by Samed GÖZÜTOK 0