Css3′ün birkaç yaygın özelliğini kullanarak, resim kullanmadan interaktif bir Duvar takvimi hazırladım. Bu takvimin css3 & jquery kodlanma sürecini bu makalede anlatarak, çok basit bir iki komutla neler yapabileceğimizi göstermeye çalışacağım. Çalışma sonunda tüm dosyaları indirebilir, linkten de demo Takvimi görüntüleyebilirsiniz. Anlaşılır bir dille yazmaya özen gösterdim, umarım faydalanırsınız.
Yapılacakları belirleyelim Aşama-1
Basit bir duvar takvimi olacağı için ister siz de çizebilirsiniz, isterseniz benim gibi hazır bir tasarımda kullanabilirsiniz. Ben iconfinder’den butakvimi örnek aldım kodlarken.
Masa takviminde özellikle css3 le yapacağımız kısımlar, demo çalışmaya bakarsanız Takvimi tutan 2 kanca var. Bu kancaları resim kullanmadan yapacağız. Yine background’da bazı efektler var onlarda aynı mantıkla kodlanacak.
Takvim de aylar arası geçişi de yapmalıyız. css3 ile biraz zor ama yapılabilir ben yapabildiğim kadarıyla örnek çalışmada yaptım. Beyaz butona tıkladığınızda Transform yaparak Ocak ayını yan tarafa atıyor, şubat ayı görünür oluyor. Flip efekti vermek için çok sayıda jquery eklentisi var. Fakat bu efektte sadece transform kullanarak benzetmeye çalıştım.
Javascript ve jquery ile bazı basit işlemler yapacağız. For döngüsüyle ay sayılarını, bir ayda kaç gün olduğunu, mevcut Ay sınıflarına yerleştireceğiz. Örnek çalışma da sadece Ocak ve Şubat aylarını ekleyeceğiz.
Aşama-2
Bu aşama da takvimin daha çok görünüm(html css) üzerine detaylandıracağız. Ben her zaman ilk olarak HTML’i kodlarım. Bu yüzden HTML ile başladım. Takvimi incelediğimizde bizim temelde 2 ana kapsayıcıya ihtiyacımız var. Birisi tepe kısım(.takvim_head) diğeri de hem tepe kısmı kapsayan hem de günlerin listeleneceği içerik kısmını kapsayan olacak(#takvim).
.takvim_head içinde takvimi tutan 2 kanca ve içinde ki 2 yuvarlak yer alacak.
Görünüm;
2 kancaya ihtiyacımız var bu yüzden 2 farklı ID oluşturalım. (Tek ID ile de yapılabilir.)
1. Kanca = #cubuk
2. Kanca = #cubukSol
Bu ID’lere sadece Yerleşimini sağlayacak komutları yazacağız. Ek olarak .radial isminde bir class ekleyerek Kanca görünümünü almasını sağlayacağız. CSS3 komutlarımız da bu class’ta tanımlanacak.
<div class="takvim_head"> <div id="cubuk" class="radial"></div> <div id="cubukSol" class="radial"></div> <ul> <li></li> <li></li> </ul> </div>
Alt kısımda da #ocak ve #subat isminde Aylarımız var. Bunların içine günleri Jquery append kullanarak ekleteceğiz.
Ayrıca .tasiyici classına sahip bir butonumuz var. Buna tıklandığında ise aktif olan ayı CSS3 Transform ile yan tarafa taşıyacağız.
<ul id="ocak" class="tumu"></ul> <ul id="subat" class="tumu"></ul> <div class="tasiyici"></div>
Daha sonra jquery ile #ocak ya da #subat’ın Li lerine tıklandığında, diğer tüm sınıfların opacity değerini düşürüp, background’u beyaz yapıp tıklanan Li’nin REL=”"‘inde bulunan metni divin içine basacağız.(Rel’in içinde takvim için günün sözü vs olabilir, Javascript ile içi söz dolu bir array oluşturup, her rel’e ayrı ayrı sözler dağıtabiliriz..)
Görünüm;
Html’i tamamladık. Son hali;
<div id="takvim"> <div class="takvim_head"> <div id="cubuk" class="radial"></div> <div id="cubukSol" class="radial"></div> <ul> <li></li> <li></li> </ul> </div> <ul id="ocak" class="tumu"></ul> <ul id="subat" class="tumu"></ul> <div class="tasiyici"></div> </div>
Aşama – 3
Bu aşamada CSS kısmında ki müdahalelerimizden bahsedeceğim. Ama sadece CSS3 komutları ile yaptıklarımızdan. Standart yerleşim ve boyutla alakalı tanımlamaları yaptığımız sınıfları anlatmayacağım.
İlk olarak Hem tepe alanda(.takvim_head) hem de onun altında kalan alanda görünecek kısmı(#takvim) linear efektiyle background oluşturuyoruz. Biz bunu background’a linear-gradient tanımlayarak yapacağız. Linear-gradient ile yapılabilecekler hakkında ve kullanım detayları, önekleriyle alakalı okuyabileceğiniz bir kaynak.
Ana kapsayıcı #takvim’in linear gradient içeriği şöyle;
background: linear-gradient(141deg, rgb(37, 227, 204) 7%, rgb(74, 140, 236) 66%)
Üst kısımın(.takvim_head) background’da yer alan linear gradient ise şöyle;
background:linear-gradient(#0787FD,#0057AD);-
Burda temelde yaptığımız Photoshop’ta linear efektli bir resim oluşturmaktan farksız. En basit şekliyle (.takvim_head) başlangıç ve bitiş rengini hex ya da rgb olarak tanımlıyoruz. Bu sayede bir renkten diğerine geçiş yapıyor. Buna %, left, right gibi komutlar vererek istediğimiz rengin istediğimiz yerde başlayıp, bitmesini de sağlayabiliyoruz. Bu sayede linear efektini CSS3 ile yapmış olduk.
Ayrıca kanca görünümü de resim kullanmadan Linear-gradient ile oluşturduk. Çeşitli araçlar ile çok daha kolay şekilde CSS3 ile bu tür görünümler oluşturabilirsiniz.
Kanca görünümü sağlayan .radial sınıfının css3 içeriği :
background: linear-gradient(to right, #d8e0de 0%,#aebfbc 21%,#99afab 41%,#48544d 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 97%);
Ayrıca hem ana kapsayıcı da hem tepe alanda border-radius ve box-shadow kullandık. Border-radius ile ovallik verip, box-shadow ile gölge yaptık.
#takvim divinin diğer css3 içeriği :
box-shadow: 1px 5px 5px 1px #666666; border-radius:10px;
// yazdığımız px’lerle Soldan ve Yukarıdan uzaklığı, Efektin yoğunluğunu ve renk kodunu tamamladık.
// tüm köşelerine 10′ar pixellik ovallik verdik.
.takvim_head ul li ‘de de border-radius kullandık.
Box-shadow ve Border-radius kullanımıyla alakalı kaynaklar. 1 2
Bu uygulama da ek olarak kullandığım bir başka cs33 komutu da @font-face’di. Direkt Google Fonts’tan çektim fontu ve css’i. Uygulama dosyasını indirip inceleyebilirsiniz. Kullanıpta anlatmadığım tek bir css3 komutu kaldı. O da Transform. Onu da altta jQuery kısmında kullandığımız için orda anlattım. Bir önce ki CSS3 yazımızda anlattığım keyframes ile bu takvime çok daha güzel birşeyler eklenebilir. Cs33 keyframes yazısını okumanız önerilir.
Css3 dışı diğer css komutlarını anlatmadım ve uzun olduğu için buraya eklemedim. Buradan ya da proje dosyasını aşağıdan indirirerek inceleyebilirsiniz.
Aşama-4
Bu aşama da Jquery ile bazı düzenlemeler yapacağız. Şu elemana tıklandığında bunu yap, ay divlerinin içerisine günleri list halinde yazdır gibi düzenlemeler.
Hızlıca bakacak olursak;
Öncelikle O ayın kaç gün olduğunu aşağıda ki şekilde tanımladık.
var ocak = 31; var subat = 28;
Şimdi for döngüsü ile #ocak divinin içerisine ocak değişkenine eşit olan sayı kadar li ekleyip, her seferinde bir arttıralım.
for (i=1;i<=ocak;i++) {
$("#ocak").append("<li rel=""+i+"">"+i+"</i>");
}
.append sayesinde for döngüsünden aldığımız çıktıyı #ocak divinin içerisine yazdırdık.
Şimdiyse #ocak ya da #subat divi içerisinde yer alan günlere tıklandığında neler olacağını yapalım. Yukarıda bahsetmiştim günlere tıklanıldığında ref’in içerisinde yer alan bir metni ön plana çıkarabiliriz.(Günün sözü, sorusu vs.)
Tıklandığında tüm diğer css’lerin opacity’lerini düşürüyoruz, zemin rengini beyaz, font rengini siyah yapıyoruz. Bu gibi detaylar. Aşağıda ki tam kodları incelerseniz nasıl değişiklikler yaptığımızı görebilirsiniz.
Ayrıca jquery .attr ile rel’in içeriğini tıklanan alana .append yapıyoruz.
Tam kodlar;
$("#ocak li, #subat li").click(function(){
var rel = $(this).attr('rel');
$(this).css("width","364px");
$(this).css("height","240");
$(this).css("background","white");
$(this).css("color","#000");
$(this).css("font-size","15px");
$(this).css("margin","-20px 0 0 -20px");
$(this).css("position","absolute");
$(this).css("text-shadow"," 1px 0 1px #ccc");
$("li").css("opacity","0.1");
$(this).css("opacity","1.0");
$(this).append(rel);
});
Şimdi .tasiyici divine tıklanıldığında Flip efektini vermeye çalıştığımız css3 transform’un kullanımına geldik. Yukarıda bahsetmiştim bu özellik tıklanıldığında aktif olacağı için jquery .css ile tıklanıldığı an ekliyoruz.
Css3 transform ile beraber transition-duration ile de transform özelliklerinin kaç saniyede uygulanacağını belirttik.
$("#ocak").css("transform","rotateX(180deg) rotateY(-180deg) translateX(382px) translateY(-96px)");
$("#ocak").css("transition-duration","10s");
Transform’un oldukça detaylı bir kullanımı var. Türkçe bu adresten bilgi edinebilirsiniz.
Bizim kullandığımız kısımları tanımlayacak olursam;
rotateX(180deg) rotateY(-180deg) translate(382px) translateY(-96px)
X ve Y ekseninde kaç derecelik açılarla div’i ne kadar hareket ettireceğimizi belirttik.
#ocak divi transform olmaya başladığı an yerine #subat’ın görünmesi için tıklanıldığında position:absolute eklettik ve zemin rengini değiştik.
Tam kodlar:
$(".tasiyici").click(function(){
$("#ocak").css("margin","20px 0 0 16px");
$("#ocak li").css("opacity","1.0");
$("#ocak").css("transform","rotateX(180deg) rotateY(-180deg) translate(382px) translateY(-96px)");
$("#ocak").css("transition-duration","10s");
$("#ocak").css("background","#ccc");
$("#ocak").css("position","absolute");
$(".tasiyici").css("margin","0px 14px 0 0");
});
Final
Tüm yapacaklarımız bu kadardı. Kendi bilginiz doğrultusunda yeni birşeyler ekleyebilirsiniz. Bunun üzerine çok sayıda özellik katılabilirdi fakat anlatmak istediğim kısımlar için yeterince geliştirdiğimi düşünüyorum takvimi. Dosyaları buradan indirebilirsiniz. Demo’yu da buradan inceleyebilirsiniz.
Soru ve görüşlerinizi yorum olarak iletirseniz çok sevinirim.