UYARI: CSS3 Camper Firefox’ta şekil olarak,Chrome’da hareketli görüntülenebilmektedir!!! (*)

Geçenlerde işten dönerken otobüste aklıma bir anket sorusu geldi. Henüz anketi yapmadım ama soru şu: “Yaptığınız işin günlük yaşamınıza etkisi ne?”

Benim aklıma ilk gelen cevap, gördüğüm her şeyin satır-sütun , float:left; float:right, list (li) lerden oluştuğunu farketmemdi. Sonra, “bunu bir uygulasam” diye düşündüm. Önce sadece list elemanlarını kullanarak bina yapmak geldi aklıma. Sonra dedim “neden css3 özelliklerini kullanarak başka bir şeyler yapmıyorum?”

Yuvarlak köşeli şeyleri düşünürken de aklıma en sevdiğim arabalardan olan Volkswagen Camper geldi. CSS3′ün border-radius, @font-face, keyframes, animation, transform ve transition özelliklerini kullanarak bu arabayı yaptım. Internet Explorer’la açma gafletinde bulunmayın hayal kırıklığına uğrarsınız:)

Arabayı yapmaya dışından başladım. Dış gövdeyi yaptıktan sonra pencereleri, ardından da kapı çizgilerini yerleştirdim.

border-radius

Sıra geldi tekerlekler ve fara. Tekerleklerin yuvarlaklığının püf noktası verdiğim yüksekliğin yarısı kadar border vermek oldu. Ama burada da dikkat edilmesi gereken bir nokta var. Yaptığım örnekte tekerin yüksekliği 90px, border 15px yani toplam yükseklik 15px(border-top:15px)+90px(height:60px)+15px(border-bottom:15px)=120px. Bu durumda yuvarlak görünüm elde etmek için 120px/2=60px border-radius vermem gerekti.

#tekerlekler{width:600px; height:90px; top:250px;left:90px; position:absolute; }
.teker{border:15px solid #777;-moz-border-radius:60px; -webkit-border-radius:60px}

Arabamızı yaptıktan artık sıra geldi ayrıntılara:) Madem böyle şirin bir arabamız var neden hareket etmesin? Biraz araştırmadan sonra CSS3 ile gelen -muhteşem- keyframes özelliğini kullanarak arabayı 800px ilerletmeyi becerebildim:)

Keyframes & Animation

Keyframes bir animasyonu uygularken başlangıcını ve bitişini belirmemizi sağlıyor ve şimdilik sadece webkit destekli çalışıyor. Bizim yaptığımız örnekte keyframes, arabayı solu başlangıç noktası alıp soldan 800px’e kadar bir şey yapacağımızı belirtiyor. Yapacağımız şeyin ne olduğunu da “move” animasyon adıyla belirliyoruz. Keyframes ile verdiğiniz kullandığınız sınıfta tanımladığınız animasyon adı (-webkit-animation-name) aynı olmalı, bilginize. Kafa karışıklığı olmasın diye kullandığım sınıf ismini de “move” dedim. Bu “move” animasyonu arabanın belirtilen keyframe sınırlarında, 4sn’de 1 kere gitmesini sağlıyor.

@-webkit-keyframes move {
 from { left: 0px; }
 to { left: 800px; }
 }

.move {
 -webkit-animation-name: move;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count:1;
 -webkit-animation-direction: alternate;
 width: 100%;
 position: relative;
 left: 0px;
 }

Keyframes & Transform

Evet arabamız hareket ediyor ama bir şeyler hala eksik! Jantlarımıza Wolksvagen logosunu ekledikten sonra düşündüm ki bu tekerleri döndürmek lazım! O zaman keyframe’le birlikte bu sefer bir başka muhteşem özellik olan transform’u kullanmanın tam sırasıdır:) Animasyon adı olarak “spin”i kullandığım örnekte keyframe adım da spin. Spin’in yaptığı iş, uygulandığı divi 4 sn’de, 360 derece döndürmek.

@-webkit-keyframes spin {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) }
}

.spin {
-webkit-animation-name: spin;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction: alternate;
-webkit-transition: -webkit-transform 3s ease-in;
}

@font-face

Camper’ımız artık tamamlanmak üzere. Ama azıcık üstünü süslemek lazım biraz Hippi bir tarzda:) Dafont‘tan bulduğum Hippy Chick fontuyla yoluma devam ediyorum. O da nesi? Sizin bilgisayarda bu font yok,nasıl göreceksiniz? Paniğe gerek yok, neyseki @font-face var! Kendimi nicer-dicer reklamındaki adam gibi hissettim:) Neyse font-face’i de şöyle uyguluyoruz:

@font-face {
 font-family: 'LMSHippyChickRegular';
 src: url('LMS_Hippy_Chick.eot');
 src: local('LMS Hippy Chick Regular'), local('LMSHippyChick'),
      url('LMS_Hippy_Chick.ttf') format('truetype'),
      url('LMS_Hippy_Chick.svg#LMSHippyChick') format('svg');
}

h1 { font-family: LMSHippyChickRegular, verdana; color:#641F7F; padding-left:10px;}

Artık hem kendisi hem de tekerleri dönen hem de süslü bir Camper’ımız oldu. Aaaa bir şeyi daha unutmuşuz: Korna!

İlkay’ın bulduğu bu tatlı kornayı da ekledikten sonra Camper’ımız test sürüşüne hazır:)

(*) Tarayıcısı desteklemeyenler için sonucun nasıl göründüğünü aşağıdaki videodan görebilirsiniz.

Sonuç

CSS3 ne güzel bir şey:)

Canlı demo

Makalenin kaynak kodları

Bu makale önceden yazdığım yazının güncellenmiş versiyonudur.

Yazar Hakkında:  Merhaba Ben Gözde Berberoğlu. Crema'da user interface developer olarak çalışıyorum. Club Crema'da (X) HTML- CSS, SEO, web standartları hakkında deneyimlerimi ve bilgilerimi paylaşmaya çalışacağım. Beni aynı zamanda kişisel blogumdan ve Friendfeed'den de takip edebilirsiniz. Kod adı: gozde.css :)