Yazar: Samed GÖZÜTOK

CSS position

position :

Elementin pozisyonunu belirlemek için kullanılır.

Örnek

p{
  position: relative;
  left: 50%;
  top: 100px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
static Elementin yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
absolute Elementin yerinin pencere esas alınarak belirlenmesini sağlar.
fixed Elementin sabit bir şekilde konumlandırılmasında kullanılır.
relative Elementin yerinin bir önceki elemente esas alınarak belirlenmesini sağlar.
İnital
İnherit

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

CSS3 perspective-origin

perspective-origin :

Elemanın perspektif görüntüsünün açısını değiştirir. x ve y değerleri alır. Başlangıç değeri kapsayıcının orta noktası olan 50% 50%’dir.

Not: Bu özellik perspektif özelliğini ile birlikte kullanılması gerekir ve yalnızca 3D dönüştürülmüş elementleri etkiler.

Örnek

.div1 {
    position: relative;
    height: 150px;
    width: 150px;
    margin: 50px;
    padding: 10px;
    border: 1px solid black;
    -webkit-perspective: 100px; /* Chrome, Safari, Opera  */
    perspective: 100px;
    perspective-origin: 50% 50%;
  
}
.div2 {
    padding: 50px;
    position: absolute;
    border: 5px solid red;
    background-color: green;
    -webkit-transform: rotateX(50deg); /* Chrome, Safari, Opera  */
    transform: rotateX(50deg);
    color: white;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
x-axisy Görünümün x eksenine yerleştirildiği tanımlamanın olası değerleri: left/center/right/lenght/%
y-axisy Görünümün y eksenine yerleştirildiği tanımlamanın olası değerleri: left/center/right/lenght/%
İnital
İnherit

Tarayıcı Desteği
36.0
12.0-webkit		 16.0
10.0-moz		 10.0 9.0
4.0.3-webkit		 23.0
15.0-o
Posted on by Samed GÖZÜTOK 0

CSS3 perspective

perspective :

Perspective özelliği elemanların görüntüsünün bakış açısını değiştirmek(derinlik hissi) için kullanılır. perspective özelliği 3 Boyutlu Dönüştürme işlemleri için önemli bir özelliktir. perspective özelliği kolay kullanımı vardır, tabi karışık yapılı  alanlardaki kullanımı hariç.

Not: perspektif özelliği yalnızca 3D dönüştürülmüş öğeleri etkiler !İpucu: 3D elemanları alt konumunu değiştirmek için izin verir.  perspective-origin özelliğiyle birlikte kullanın.

Örnek

.div1 {
    position: relative;
    height: 150px;
    width: 150px;
    margin: 50px;
    padding: 10px;
    border: 1px solid black;
    -webkit-perspective: 100px; /* Chrome, Safari, Opera  */
    perspective: 100px;
  
}
.div2 {
    padding: 50px;
    position: absolute;
    border: 5px solid red;
    background-color: green;
    -webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera  */
    transform: rotateX(45deg);
    color: white;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Hiç bir değer almaz.
length px, cm, % gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği
36.0
12.0-webkit		 16.0
10.0-moz		 10.0 9.0
4.0.3-webkit		 23.0
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS page-break-before

page-break-before :

Basılacak dökümanın öncesinden ne kadar kenar boşluğu verileceğini belirlemek için kullanılır.

Örnek

@media print {
    h1 {page-break-before: always;}
}

 

Css Sözdizimi

Değer Açıklama
auto Üretilen çerçeveden önce/sonra/içinde bir sayfa kesmesini ne yasaklar ne de zorlar
always Üretilen çerçeveden önce/sonra bir sayfa kesmesi daima yapılır.
avoid Üretilen çerçeveden önce/sonra/içinde bir sayfa kesmesini yasaklar.
left Sonraki sayfanın bir sol sayfa olarak biçimlenmesini sağlamak için üretilen çerçeveden önce/sonra bir veya iki sayfa kesmesi yapılır.
right Sonraki sayfanın bir sağ sayfa olarak biçimlenmesini sağlamak için üretilen çerçeveden önce/sonra bir veya iki sayfa kesmesi yapılır.
length px, cm, % gibi değerler alabilir.
İnital
İnherit

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

CSS page-break-after

page-break-after :

Basılacak dökümanın sonuna ne kadar kenar boşluğu verileceğini belirlemek için kullanılır.

Not:Bu özelliği boş bir  < div > veya position:absolute elementler üzerinde kullanamazsınız.

Örnek

@media print {
    footer {page-break-after: always;}
}

 

Css Sözdizimi

Değer Açıklama
auto Üretilen çerçeveden önce/sonra/içinde bir sayfa kesmesini ne yasaklar ne de zorlar
always Üretilen çerçeveden önce/sonra bir sayfa kesmesi daima yapılır.
avoid Üretilen çerçeveden önce/sonra/içinde bir sayfa kesmesini yasaklar.
left Sonraki sayfanın bir sol sayfa olarak biçimlenmesini sağlamak için üretilen çerçeveden önce/sonra bir veya iki sayfa kesmesi yapılır.
right Sonraki sayfanın bir sağ sayfa olarak biçimlenmesini sağlamak için üretilen çerçeveden önce/sonra bir veya iki sayfa kesmesi yapılır.
length px, cm, % gibi değerler alabilir.
İnital
İnherit

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

CSS padding-top

padding-top :

Bir elementin üst tarafından iç boşluk vermek için kullanılır.

Örnek

div {
  width: 200px;
  border : 1px solid red;
  padding-top: 50px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
length px, cm, % gibi değerler alabilir.
İ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 padding-right

padding-right :

Bir elemente sağ tarafından iç boşluk vermek için kullanılır.

Örnek

div {
  width: 100px;
  border: 1px solid red;
  padding-right: 50px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
length px, cm, % gibi değerler alabilir.
İ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 padding-left

padding-left :

Bir elementin sol tarafından iç boşluk vermek için kullanılır.

Örnek

div {
  width: 300px;
  border: 1px solid red;
  padding-left: 50px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
length px, cm, % gibi değerler alabilir.
İ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 padding-bottom

padding-bottom :

Bir elementin alt tarafından iç boşluk vermek için kullanılır.

Örnek

div {
  width: 300px;
  border : 1px solid red;
  padding-bottom: 50px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
length px, cm, % gibi değerler alabilir.
İ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 padding

padding :

Bir elemente iç boşluk vermek için kullanılır.

Örnek

div {
  border: 1px solid green;
  width: 200px;
  padding: 50px;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
length Yüzdeli, px, em, cm gibi değerler alabilir.
İnital
İnherit

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