Etiket: css

CSS unicode-bidi

unicode-bidi :

Eğer aynı sayfa da hem soldan sağa hem sağdan sola metin kullanma ihtiyacınız varsa unicode-bidi özelliğini kullanmanız gerekmektedir. unicode-bidi ile  birden fazla yazılma yönü oluşturabiliriz.

Örnek

.unicode {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
normal Eleman, çift yönlülük algoritması ile ilgili olarak ek bir iç içelik seviyesi açmaz. Satır içi seviyeden elemanlar için yeniden sıralama eleman sınırları boyunca örtük olarak çalışır.
embed Eğer eleman bir satır içi seviyeden elemansa çift yönlülük algoritması ile ilgili olarak ek bir iç içelik seviyesi açılır. Bu iç içelik seviyesinin yönü direction niteliği ile belirtilir. Elemanın içinde yeniden sıralama örtük olarak yapılır.
bidi-override Eğer eleman, sadece satır içi seviyeden elemanlar içeren bir satıriçi veya blok seviyesinden bir elemansa bu bir üstün gelme durumu oluşturur. Yani, elemanın içindeki yeniden sıralama kesin olarak direction niteliği ile belirtilen yöne göre yapılır; algoritmanın örtük kısmı yok sayılır.
İnital
İnherit

Tarayıcı Desteği
2.0 1.0 5.5 1.3 9.2
Posted on by Samed GÖZÜTOK 0

CSS3 transition-timing-function

transition-timing-function :

Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır.

Örnek

div {
  background: green;
  width: 200px;
  height: 20px;
  -webkit-transition-property: height; /* Safari */
   transition-property: height;
  -webkit-transition-duration: 3s; /* Safari */
   transition-duration: 3s;
   transition-timing-function: ease;
}
div:hover {
  height: 100px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
ease Animasyonun yavaş başlayıp hızlanması ve yavaş bitmesi ile sonuçlanan animasyon tipidir.
linear Başlangıç ve Bitiş hızı aynı olan geçiş tipidir.
Ease-in Animasyonun yavaş başlamasını sağlayan geçiş tipi.
Ease-out Animasyonun yavaş bitmesini sağlayan geçiş tipi.
Ease-in-out Yavaş başlayıp yavaş biten cublic-bezier eş değer bir geçiş tipi.
Cublic-bezier Manuel olarak ayarladığımız geçiş tipidir.0 ve 1 arasında değerler alabilir.
İnital
İnherit

Tarayıcı Desteği
26.0
4.0-webkit		 16.0
4.0-moz		 10.0 6.1
3.1-webkit		 12.1
10.5-o
Posted on by Samed GÖZÜTOK 0

CSS3 transition-property

transition-property :

Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için transition-property özelliğini kullanırız.

Not: Her zaman geçiş özelliğinin süresini belirtin yoksa varsayılan süre o olduğu için hiçbir geçiş göremezsiniz.

İpucu: Bir geçiş özelliği bir elementin üzerinin üzerindeyken genellikle kullanıcı elementin üzerine gelmeden hiçbir geçiş gözükmez.

Örnek

div {
  background: green;
  width: 200px;
  height: 20px;
  -webkit-transition-property: height; /* Safari */
   transition-property: height;
  -webkit-transition-duration: 3s; /* Safari */
   transition-duration: 3s;
}
div:hover {
  height: 100px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Hiçbir geçiş efektinin gözükmemesini sağlar.
all Tüm özellikleri almış bir geçiş efekti uygulanır.
property Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için transition-property özelliğini kullanırız.
İnital
İnherit

Tarayıcı Desteği
26.0
4.0-webkit		 16.0
4.0-moz		 10.0 6.1
3.1-webkit		 12.1
10.5-o
Posted on by Samed GÖZÜTOK 1

CSS3 transition-duration

transition-duration :

Geçiş efektlerini uygularken verdiğimiz efektin ne kadar süre ile devam edeceğini belirlemek için kullanılır.

Örnek

div {
  background: green;
  width: 200px;
  height: 20px;
  transition: height;
  -webkit-transition: height; /* Safari 3.1 to 6.0 */
  -webkit-transition-duration: 3s; /* Safari */
   transition-duration: 3s;
}
div:hover {
  height: 100px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
Time Geçiş efektinin ne kadar saniye veya milisaniye devam edeceğini belirtir. Varsayılan süre 0s olduğu için süre ayarı yapılmazsa hiçbir geçiş gözükmez.
İnital
İnherit

Tarayıcı Desteği
26.0
4.0-webkit		 16.0
4.0-moz		 10.0 6.1
3.1-webkit		 12.1
10.5-o
Posted on by Samed GÖZÜTOK 0

CSS3 transition-delay

transition-delay :

Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirler. Belirlenen zamana kadar animasyonu durdurur ve sonra animasyon başlar. Geçiş-gecikme değeri saniye (s) veya milisaniye (ms) tanımlanır.

Örnek

div {
  background: green;
  width: 200px;
  height: 20px;
  transition: height 2s;
  -webkit-transition: height 2s; /* Safari 3.1 to 6.0 */
  -webkit-transition-delay: 3s; /* Safari */
   transition-delay: 3s;
}
div:hover {
  height: 100px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
Time Geçiş efekti başlamadan önce beklenecek saniye ya da milisaniye sayısını belirlemek için kullanılır.
İnital
İnherit

Tarayıcı Desteği
26.0
4.0-webkit		 16.0
4.0-moz		 10.0 6.1
3.1-webkit		 12.1
10.5-o
Posted on by Samed GÖZÜTOK 0

CSS3 transition

transition :

Geçiş efektleri uygulamak için kullanılır.

Örnek

div {
  background: green;
  width: 200px;
  height: 20px;
  transition: height 2s;
  -webkit-transition: height 2s; /* Safari 3.1 to 6.0 */
}
div:hover {
  height: 100px;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
transistion-property Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için bu özelliği kullanırız.
Transistion-duration Geçiş efektlerini uygularken verdiğimiz efektin ne kadar süre ile devam edeceğini ayarlamak için kullanılır.
Transistion-timing-function Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır.
Transistion-delay Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirler. Belirlenen zamana kadar animasyonu durdurur ve sonra animasyon başlar.
İnital
İnherit

Tarayıcı Desteği
26.0
4.0-webkit		 16.0
4.0-moz		 10.0 6.1
3.1-webkit		 12.1
10.5-o
Posted on by Samed GÖZÜTOK 0

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