CSS #id Seçicisi

#id Seçicisi

HTML’ de atadığımız id’leri belirtelerek özellik atamak için kullanılır.

VERSİYON: CSS1

Örnek

#w3tr {
  background: yellow;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/bEByWK/">#id Seçici</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Tarayıcı Desteği


EVET	EVET	EVET	EVET	EVET

Posted on 31 Aralık 20159 Ocak 2016 by Samed GÖZÜTOK 0

CSS .class Seçicisi

.class Seçicisi

html atadığımız sınıfları belirterek özellik atamak için kullanılır.

VERSİYON: CSS 1

Örnek

.w3tr {
  background: red;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/zroQNO/">.class seçici</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Tarayıcı Desteği


EVET	EVET	EVET	EVET	EVET

Posted on 31 Aralık 20159 Ocak 2016 by Samed GÖZÜTOK 0

CSS3 backface-visibility

backface-visibility :

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

Örnek

div {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: green;
    -webkit-transform: rotateY(180deg);  /* Chrome, Safari, Opera */
    transform: rotateY(180deg);
    color: white;
}
.bir {
   -webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */
    backface-visibility: hidden;
}
.iki {
    -webkit-backface-visibility: visible;  /* Chrome, Safari, Opera */
    backface-visibility: visible;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/VvoYZw/'>backface-visibility</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
visible	element görünür.
hidden	element görünmez.
İ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 28 Kasım 2015 by Samed GÖZÜTOK 1

CSS3 animation-timing-function

animation-timing-function :

Animasyonda bir hız eğrisi belirler.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
    color: white;
     position: relative;
    -webkit-animation-name: mymove; /* Chrome, Safari, Opera */
    animation-name: mymove;
    -webkit-animation-duration: 5s;  /* Chrome, Safari, Opera */
    animation-duration: 5s;
    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/rOXNEZ/">animation-timing-function</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Css Sözdizimi

Değer	Açıklama
linear	Animasyon baştan sona aynı hıza sahiptir.
ease	Yavaş bir başlangıç ardından hızlanır ve yine yavaş bir şekilde sonlanır.
animation-timing-function	Animasyonda bir hız eğrisi belirler.
ease-in	Sadece başlangıç yavaştır.
ease-out	Sadece bitiş yavaşlar.
ease-in-out	Yavaş bir başlangıç hızlanmadan normal bir akış ardından yavaş bir son.(Yine çevirmeye bakalım)
cubic-bezier(n,n,n,n)	Hızlanma ve yavaşlama noktalarını belirlersiniz.
İnital
İnherit

Tarayıcı Desteği


43.0 4.0-webkit	16.0 5.0-moz	10.0	9.0 4.0-webkit	30.0 12.0-o 15.0-webkit

Posted on 28 Kasım 2015 by Samed GÖZÜTOK 1

CSS3 animation-play-state

animation-play-state :

Animasyonu çalışıp durmasını sağlar. İstediğiniz durumda animasyonu durdurmanızıda sağlar.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
    color: white;
     position: relative;
    -webkit-animation-name: mymove; /* Chrome, Safari, Opera */
    animation-name: mymove;
    -webkit-animation-duration: 5s;  /* Chrome, Safari, Opera */
    animation-duration: 5s;
    -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/GpVRbo/'>animation-play-state</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
paused	Animasyonu durdurur.
running	Animasyonu çalıştırır.
İnital
İnherit

Tarayıcı Desteği


43.0 4.0-webkit	16.0 5.0-moz	10.0	9.0 4.0-webkit	30.0 12.0-o 15.0-webkit

Posted on 28 Kasım 2015 by Samed GÖZÜTOK 1

CSS3 animation-name

animation-name :

Animasyon ismini belirlemek için kullanılır.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
    color: white;
     position: relative;
    -webkit-animation-name: mymove; /* Chrome, Safari, Opera */
    animation-name: mymove;
    -webkit-animation-duration: 5s;  /* Chrome, Safari, Opera */
    animation-duration: 5s;
   -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
    animation-iteration-count: 3;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/KdOKYy/'>animation-name</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/GpVRBg/'>animation</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
keyframename	Animasyon ismi
none	Değer almaz.
İnital
İnherit

Tarayıcı Desteği


43.0 4.0-webkit	16.0 5.0-moz	10.0	9.0 4.0-webkit	30.0 12.0-o 15.0-webkit

Posted on 28 Kasım 2015 by Samed GÖZÜTOK 1

CSS3 animation-iteration-count

animation-iteration-count :

Bir animasyonun oynama (tekrar) sayısını belirler.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
     color: white;
      position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
    animation-iteration-count: 3;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/zvgYbm/'>animation-iteration-count</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
Number	Tekrar sayısını belirtilir. Hiç bir sayı yazılmasa 1 olarak kabul edilir.
infinite	Animasyonu sürekli olarak tekrarlatır.
İnital
İnherit

Tarayıcı Desteği


43.0 4.0-webkit	16.0 5.0-moz	10.0	9.0 4.0-webkit	30.0 12.0-o 15.0-webkit

Posted on 28 Kasım 2015 by Samed GÖZÜTOK 0

CSS3 animation-fill-mode

animation-fill-mode :

Animasyon tamamlandığında veya gecikme olduğunda obje için bir stil (konum, basamak) belirler.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
     color: white;
      position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-duration: 4s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/zvgYeJ/'>animation-fill-mode</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
none	Herhangi bir değer almaz.
forwards	animation-iteration-count ile yenileme miktarı belirlenir. Obje son karede (animasyon basamağında) durur.
backwards	Obje animasyon bitince veya donduğunda i ilk kareye (animasyon basamağına) döner.
animation-delay	Animasyonun yapılacağı süreyi belirler. Gecikme süresi de denilebilir.
both
İnital
İnherit

Tarayıcı Desteği


43.0 4.0-webkit	16.0 5.0-moz	10.0	9.0 4.0-webkit	30.0 12.0-o 15.0-webkit

Posted on 28 Kasım 2015 by Samed GÖZÜTOK 0

CSS3 animation-duration

animation-duration :

Animasyon döngüsünün süresini belirler.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
     color: white;
      position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-duration: 4s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/vNoYbY/'>animation-duration</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
time	Animasyonu bitirmek için gereken süreyi belirler.
İnital
İnherit

Tarayıcı Desteği


43.0 4.0-webkit	16.0 5.0-moz	10.0	9.0 4.0-webkit	30.0 12.0-o 15.0-webkit

Posted on 28 Kasım 2015 by Samed GÖZÜTOK 2

CSS3 animation-direction

animation-direction :

Bir animasyonun yön özelliğidir. Ters yönde veya alternatif yönde oynamasını belirler.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
     color: white;
      position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation-direction: alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/xwvxQm/'>animation-direction</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
normal	Animasyonu normal şekilde oynatır.
reserve	Animasyonu ters yönde oynatır.
alternate	Animasyonu tekrar geriye doğru oynatır. Yaptığı hareketleri geriye doğru aynısı tekrarlar.
alternate-reserve	Animasyonu önce ters yönde başlayarak hareketlerini daha sonra geriye doğru tekrar eder.
İnital
İnherit

Tarayıcı Desteği


43.0 4.0-webkit	16.0 5.0-moz	10.0	9.0 4.0-webkit	30.0 12.0-o 15.0-webkit

Posted on 28 Kasım 2015 by Samed GÖZÜTOK 1

HTML, CSS

#id Seçicisi

Örnek

Codepen Ön izleme

Tarayıcı Desteği

.class Seçicisi

Örnek

Codepen Ön izleme

Tarayıcı Desteği

backface-visibility :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

animation-timing-function :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

animation-play-state :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

animation-name :

Örnek

Codepen Ön izleme

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

animation-iteration-count :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

animation-fill-mode :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

animation-duration :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

animation-direction :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği