CSS3 Transition Özelliği: Genişlik ve Gölgelendirme Ayarları

Daha önce sizlere şu yazımda CSS3 Transition özelliğinden yararlanarak Hover ve Opaklık ayarlamalarını göstermiştim.Bugün ki yazımız da ise Genişlik ve Gölgelendirme ayarlamalarını göstereceğim.

Genişlik Değiştirme Özelliği

.kutu{
    -webkit-transition: width 2s;
    -moz-transition: width 2s;
    -o-transition: width 2s;
    transition: width 2s;
    background-color:#000;
    width:50px;
    height:50px;
    position:absolute;
    top:50px;
    left:200px;
}
.kutu:hover{
    -webkit-transition: width 2s;
    -moz-transition: width 2s;
    -o-transition: width 2s;
    transition: width 2s;
    width:200px;
}

Kodlarımız arasında bulunan:

Genişlik özelliğini değiştirirken hover ayarlamasında olduğu gibi fare imlecimi stilsin üzerinden çektiğim zaman birden eski halini almasını değilde animasyon şeklinde eski haline dönmesini sağlayacağız.

Gölgelendirme Özelliği

.kutu:hover{
  /*Transition*/
    -webkit-transition: box-shadow 1s;
    -moz-transition: box-shadow 1s;
    -o-transition: box-shadow 1s;
    transition: box-shadow 1s;
  /*Gölge*/
    -moz-box-shadow: 0px 0px 15px #333399;
    -webkit-box-shadow: 0px 0px 15px #333399;
    box-shadow: 0px 0px 15px #333399;
}

Kodlarımız arasında bulunan:

Diğer kodlarımızdan sadece box-shadow kodunu değiştirmem yeterli oluyor.Tabii bunun yanında gölge efektinin rengini de seçeceğiz.

CSS3 Transition özelliğini çeşitlendirmemiz mümkün.Ancak temelleri bunlar.Daha farklı yerlerde daha güzel bir şekilde kullanacağınızdan eminim.

Bir sonraki yararlı ve güzel CSS yazımızda görüşmek üzere, esen kalın.