Yazar: Samed GÖZÜTOK

CSS3 transform-style

transform-style :

İç içe geçmiş elementleri  nasıl duracağını belirler 3D alanda işlenir.

Örnek

#bir {
    position: relative;
    height: 300px;
    width: 300px;
    margin: 50px;
    padding: 20px;
    border: 1px solid red;
}

#iki {
    padding: 60px;
    position: absolute;
    background-color: green;
    -webkit-transform: rotateY(30deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(30deg);
    transform-style: preserve-3d;
}

#uc {
    padding: 50px;
    position: absolute;
    background-color: red;
    -webkit-transform: rotateY(-30deg); /* Chrome, Safari, Opera */
    transform: rotateY(-30deg);

}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
flat Metni sola hizalar.
Preserve-3D Metni sağa hizalar.
İnital
İnherit

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

CSS3 transform-origin

transform-origin :

Dönüşümün orjin olarak nereye referans alacağını tanımlamamızı sağlar.

Not: Bu özelliğin transform özelliğiyle birlikte kullanılması gerekir.

Örnek

div {
  margin: 50px;
  background: green;
  width: 300px;
  height: 300px;
  color: white;
  -ms-transform: rotate(150deg); /* IE 9 */
  -ms-transform-origin: 50% 50%; /* IE 9 */
  -webkit-transform: rotate(150deg); /* Chrome, Safari, Opera */
  -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
   transform: rotate(150deg);
   transform-origin: 50% 50%;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
x-axis Görünümün x ekseni olarak yerleştirileceğini tanımlar.
y-axis Görünümün y ekseni olarak yerleştirileceğini tanımlar.
z-axis Görünümün z ekseni olarak yerleştirileceğini tanımlar.
length Yüzdeli, px, em, cm gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği

Özellik
Transform(2D) 36.0
4.0-webkit		 16.0
3.5-moz		 10.0
9.0-ms		 9.0
3.2-webkit		 23.0
15.0-webkit
10.5-o
Transform(3D) 36.0
12.0-webkit		 16.0
10.0-moz		 10.0 9.0
4.0-webkit		 23.0
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS3 transform

transform :

2D ve 3D elementleri döndürmek, boyutlandırmak, eğmek gibi eylemleri gerçekleştirmek için kullanılır.

Örnek

div {
    margin: 20px;
    width: 300px;
    height: 300px;
    background-color: red;
    color: white;
    -ms-transform: rotate(150deg); /* IE 9 */
    -webkit-transform: rotate(150deg); /* Chrome, Safari, Opera */
    transform: rotate(150deg);
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Hiç bir değer almaz.
matrix(n,n,n,n,n,n) Parantez içine gireceğimiz altı değere göre 2D dönüşümünü tamamlar.
Matrix3D(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Parantez içine gireceğimiz on altı değere göre 3D dönüşümünü tamamlar.
Translate(x,y) 2D dönüşüm tanımlanır.
Translate(x,y) 2D dönüşüm tanımlanır.
Translate(x,y) 2D dönüşüm tanımlanır.
Translate3D(x,y,z) 3D dönüşüm tanımlanır.
TranslateX(x) Yalnızca x eksenini kullanarak bir dönüşüm tanımlanır.
TranslateY(y) Yalnızca y eksenini kullanarak bir dönüşüm tanımlanır.
TranslateZ(z) Yalnızca z eksenini kullanarak bir dönüşüm tanımlanır.
Scale(x.y) 2D ölçek dönüşümü tanımlanır.
Scale3D(x.y,z) 3D ölçek dönüşümü tanımlanır.
ScaleX(x) X eksenini kullanarak bir ölçek dönüşümü tanımlanır.
ScaleY(y) Y eksenini kullanarak bir ölçek dönüşümü tanımlanır.
ScaleZ(z) Z eksenini kullanarak bir ölçek dönüşümü tanımlanır.
rotate(x,y,z,angle) 3D döndürme tanımlanır.
rotate(angle) Açı parametresine göre 2D döndürme tanımlar.
rotateX(angle) X ekseni boyunca 3D döndürme tanımlar.
rotateY(angle) Y ekseni boyunca 3D döndürme tanımlar.
rotateZ(angle) Z ekseni boyunca 3D döndürme tanımlar.
Skew(x-angle,y-angle) X- Y ekseni boyunca 2D eğme dönüşümü tanımlanır.
SkewX(angle) X ekseni boyunca 2D eğme dönüşümü tanımlanır.
SkewX(angle) X ekseni boyunca 2D eğme dönüşümü tanımlanır.
SkewY(angle) Y ekseni boyunca 2D eğme dönüşümü tanımlanır.
Perspective(n) 3D dönüştürülmüş öğeler için tanımlanır.
İnital
İnherit

Tarayıcı Desteği

Özellik
Transform(2D) 36.0
4.0-webkit		 16.0
3.5-moz		 10.0
9.0-ms		 9.0
3.2-webkit		 23.0
15.0-webkit
10.5-o
Transform(3D) 36.0
12.0-webkit		 16.0
10.0-moz		 10.0 9.0
4.0-webkit		 23.0
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS top

top :

Position: absolute olarak konumlandırılmış elementler için position: relative’li elementin top değerine göre ayarlanır.

Position: relative li elementli nesneler için ise kendi bulunduğu konumuna göre top değerini kazanır.

Not: position: static te hiçbir etkisi yoktur.

Örnek

.relative {
  width: 300px;
  height: 300px;
  position: relative;
  border : 1px solid red;
}
.absolute {
  width: 150px;
  height: 150px;
  position: absolute;
  border: 1px solid green;
  top: 50%;
  margin-top: -75px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
auto otomatik olarak ayarlanır.
length Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
İnital
İnherit

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

CSS text-transform

text-transform :

Metinin harflerinin büyütülmesi veya küçültülmesi için kullanılır.

Örnek

.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform:lowercase;
}
.capitalize {
  text-transform:capitalize;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Hiçbir değişiklik yapmaz.
capitalize Sadece baş harfleri büyük yapar.
uppercase Bütün harfleri büyük yapar.
lowercase Bütün harfleri küçük yapar.
İnital
İnherit

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

CSS3 text-shadow

text-shadow :

Metinlere gölge eklemek için kullanılır.

Örnek

p {
  text-align: center;
  font-size: 50px;
  text-shadow: 5px 5px green;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Hiçbir gölge vermez.
h-shadow zorunlu, Yatay gölge konumu belirtmek için kullanılır. Negatif değerler alabilir.
v-shadow zorunlu, Dikey gölge konumu belirtmek için kullanılır. Negatif değerler alabilir.
Blur-radius isteğe bağlı, Gölgenin bulanıklığını ayarlamak için kullanılır. Varsayılan değer:0.
color isteğe bağlı, Gölgenin rengini ayarlamak için kullanılır.
İnital
İnherit

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

CSS3 text-overflow

text-overflow :

Taşan metnin gizlendiğini kullanıcıya belirtmek için kullanılır.

Örnek

p {
  white-space: nowrap; 
  width: 500px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border : 1px solid red;
  padding: 40px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
clip Metnin taşan kısmını keser.
ellipsis Metnin taşan kısmından itibaren üç nokta koyar.
string
İnital
İnherit

Tarayıcı Desteği
4.0 7.0 6.0 3.1 11.0
9.0-o
Posted on by Samed GÖZÜTOK 1

CSS3 text-justify

text-justify :

Metini iki yana yaslamak için kullanılır.

Örnek

p{
   text-align: justify;
   text-justify: inter-word;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
auto Metin tarayıcıya göre otomatik olarak ayarlanır.
İnter-word Sözcükler arası boşluğu artırmak veya azaltmak için kullanılır.
İnter-ideograph İçerik özel metin(ideografik)le iki yana yaslanır.
İnter-cluster
distribute Harfler ve sözcükler arasındaki mesafeyi artırmak veya azaltmak için kullanılır.
kashida
trim
İnital
İnherit

Tarayıcı Desteği
Desteklenmiyor Desteklenmiyor 5.5 Desteklenmiyor Desteklenmiyor
Posted on by Samed GÖZÜTOK 0

CSS text-indent

text-indent :

Paragrafın  girintisini ayarlamak için kullanılır.

Örnek

p{
  text-indent: 100px;
}

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

CSS text-decoration-style

text-decoration-style :

Eklenecek çizginin stilini belirlemek için kullanılır.

Örnek

p{
    -moz-text-decoration-style: dashed; /*Firefox */
    text-decoration: overline;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
solid Çizgi tek bir satır şeklinde görünür.
double Kalın tek bir çizgi görünür.
dotted Çizgi noktalı bir şekilde görünür.
wavy Çizgi dalgalı bir şekilde görünür.
dashed izgi kesik çizgili şeklinde görünür.
İnital
İnherit

Tarayıcı Desteği
Desteklenmiyor 6.0-moz Desteklenmiyor Desteklenmiyor Desteklenmiyor
Posted on by Samed GÖZÜTOK 0