CSS3‘ün geliştirilen background tanımı sayesinde bir öğeye birden fazla arkaplan tanımlıyabiliyoruz. Bu bize özellikle transparan – png ve gif- görseller kullanmamız halinde çok büyük bir oyun sahası yaratıyor. Gelin bu tekniği kullanarak otoyolda ilerleyen bir araç animasyonu oluşturalım.
Bugün sizlerle sıradan bir div elemanına atayacağımız iki arkaplan ile küçük çaplı bir animasyon hazırlayacağız.
Bugün sizlerle sıradan bir div elemanına atayacağımız iki arkaplan ile küçük çaplı bir animasyon hazırlayacağız.
CSS ile bir öğeye birden fazla arkaplan nasıl eklenir?
İlk olarak yapmamız gereken görselleri temin etmek. Burada önemli faktör özellikle otomobil görseli için transparan destekleyen bir format kullanıyor olmak. Eğer Adobewordpress‘in sizler için hazırladığı görselleri kullanmak isterseniz aşağıdan indirebilirsiniz.
Yol Görseli
Araç Görseli
HTML Kodları
Sıradan bir div bizim için yeterli olacaktır.
Sıradan bir div bizim için yeterli olacaktır.
PHP Kod:
<div class="road"></div>
CSS Kodları
Bu kısımda oluşturduğunuz yol görselinin en kısa kenarı genişliği ve uzunluğunda bir kutu oluşturmanızda fayda var. Yukarıdaki örnek resim 310×508 piksel büyüklükte. Dolayısıyla 310×310 boyutundaki bir kutu içerisine bu yol resmini koyabilirim. Araç mı? O zaten yerini otomatik olarak bulacaktır.
Bu kısımda oluşturduğunuz yol görselinin en kısa kenarı genişliği ve uzunluğunda bir kutu oluşturmanızda fayda var. Yukarıdaki örnek resim 310×508 piksel büyüklükte. Dolayısıyla 310×310 boyutundaki bir kutu içerisine bu yol resmini koyabilirim. Araç mı? O zaten yerini otomatik olarak bulacaktır.
Kod:
.road{
width:310px;
height:310px;
background:url('car.png') no-repeat center 0, url('road.png') no-repeat top center;
transition:background 1s;
}Virgül kullanarak gördüğünüz gibi road classına sahip elemana birden fazla background atadık. Sonrasında no-repeat ile arkaplanların tekrar etmesini engelledik, center ile ortaladık, top center ile de en üstten ve ortadan başlayacak hale getirdik. Transition ise animasyon geçişimizin 1 saniyede olmasını sağladı.
Şimdi üzerine gelince oluşacak yapıyı hazırlayalım.
Şimdi üzerine gelince oluşacak yapıyı hazırlayalım.
PHP Kod:
.road:hover{
background:url('car.png') no-repeat center 310px, url('road.png') no-repeat bottom center;
}
Bu sefer 310px tanım yaparak arabanın kadraj dışına çıkmasını sağladık. Yolunda top olan konumunu bottom yaparak hareket etmesini sağladık.
Kapanış
Sadece bu yapıyı kullanarak hareket animasyonları dışında da birçok geçiş efekti hazırlayabilirsiniz. Bu tasarladığımız örnek sadece küçük bir konsept.
