"Karartı" CSS3 Blogger Teması


12Enİyi.com için hazırladığım tasarımda sadece sadeliğe ve şıklığa önem vermiş, kenarlıklardan ve gölgelerden mümkün olduğunca arındırılmış bir flat design örneği haline getirmiştim.

Bu sefer ise biraz farklı bir şeyler denemeye karar verdim ve 12eniyi'de yer vermediğim gölgelendirmeleri,kenarlıkları yeni blogger temamın en önemli unsurlarından biri haline getirdim. Ayrıca 12Enİyi'de kullandığım jquery kütüphanesini kaldırıp daha önce sadece javascript ile denenmiş bazı görsel izlenimleri ilk kez sadece css3 kullanarak oluşturdum.

Javascriptten mümkün olduğunca arındırılmış olan, "Karartı" isimli bu blogger teması daha önce kimsenin denememiş olduğunu düşündüğüm bazı unsurlar barındırıyor. Umarım tema, bu farklılıklar yüzünden bazı gözlere "aşırı farklı" görünmez. Lafı daha fazla uzatmadan Tasarımı sizlerin değerlendirmesine sunuyorum:





"Karartı" Tasarımı Ana Ekran





 İlk açılışta ziyaretçilerin yayın akışı, etkileşimli menü, rastgele seçilen iki yayından oluşan galeri ve 27 ayrı sosyal paylaşım butonunun bulunduğu paylaşım menüsü ile karşılaştığı Karartı teması ziyaretçiyi doğrudan içerikle etkileşime geçmeye yöneltiyor. Ziyaretçilerin sitede mümkün olduğunca uzun vakit geçirmesi için son derece sade bir görünüme sahip Karartı temasının pek de simetrik olmamasının ise oldukça haklı bir sebebi var. "Sosyal Ağlar", "Popüler Yayınlar" ve "İletişim" sayfaları yarı saydam gövdenin sola doğru kayması ile ekrana geliyor. Yani ziyaretçileriniz sayfadan ayrılmaya ve yeni sayfanın yüklenmesini beklemeye gerek bile duymadan, doğrudan tek bir sayfa üzerinden sitenizde gezebiliyorlar.




  Belki şimdi daha iyi anlayabilirsiniz. Karartı temasının iki önemli özelliği var. İlki Ziyaretçinin doğrudan içeriğe, ve sadece istediği içeriğe, vakit kaybetmeden ulaşmasını sağlaması. İkincisi ise barındırdığı görsel sürprizlerle ziyaretçilerizi sitenizde kalmaya zorlaması ve sitenizde harcanan vakti bir kayıp olmaktan çıkartıp bir eğlenceye dönüştürmesi. Dilerseniz şimdi tasarımdaki bu "görsel sürprizler"e değinelim.


CSS3 Temelli "Fareden Kaçan Gölge" Efekti

 Bu efekte bayılacağınıza eminim. Daha önce Zachary Johnson tarafından hazırlanmış benzer bir gölge efekti birkaç amatör sitede kullanılmıştı ve çok büyük ilgi toplamıştı. Ancak Zachary tarafından hazırlanmış efekt içeriği tamamen karartıyordu ve kullandığı javascript kodlar sebebiyle hem sayfayı yavaşlatıyor hem de pek kullanıcı dostu olmayan bir görüntü oluşturuyordu. Kullandığı yöntem için ise kesinlikle akıl kârı denemezdi. Bu nedenle sadece mouse hareket kontrolü yapan birkaç satır javascript kod kullanıp geri kalan tüm işi css3'e bırakarak, kolayca düzenlenebilir ve çok daha hafif, etkili bir gölge efekti elde ettim. Bu gölge efekti sayesinde pek çok ziyaretçiniz sitenizde daha çok oyalanacak ve siteden ayrıldıklarında ise akıllarında "sitenizin ne kadar şık olduğu"ndan başka bir şey olmayacak.


Kayarak Açılan Sosyal Ağ Kutuları


 Yine genelde uzun javascript kodları veya ağır jquery kütüphanesi kullanarak yapılacak bir başka efekt. Ancak sadece 2 satırlık "css3 geçişleri" tekniği ile oluşturulduğu için ziyaretçilerinizin ilgisini çekmenizin karşılığında sayfa yükleniş süresinden ödün vermenize gerek kalmıyor ve en ufak bir javascript kodu dahi gerektirmiyor.



Diğer Css3 Efektleri


 Tasarımda yer verdiğim diğer css3 efektlerinin başında webkit tarayıcılara özel(chrome, safari vesaire) resim filtresi bulunuyor. Yine en ufak bir javascript kodu barındırmadığı ve "ultra hafif" olduğu için "ay süper!" denilmeyi hakeden bu basit resim efekti anasayfadaki ve Popüler Yayınlar sayfanızdaki resimlerin varsayılan olarak sepya filtresiyle görünmesini ve mouse ile üzerlerine gelindiğinde hoş bir animasyonla gerçek renklerine kavuşmasını sağlıyor.




Diğer Özellikler


Tasarımın barındırdığı tüm özellikleri burada sıralayamayacağım. Ancak "Site İsmi" gibi bölümleri ve galeriyi düzenlemenize dahi gerek duymayacaksınız çünkü bu tür bölümlerin tamamı otomatik olarak blogunuza göre şekilleniyor. Site İsmi bölümünde sitenizin adı, Galeri bölümünde yayınlarınız kendiliğinden görünüyor.Sağda görmüş olduğunuz paylaşım butonları ise asenkronize yüklendiği için site hızınızı kesinlikle düşürmüyor. Tasarımın diğer özelliklerini aşağıdaki demo sayfasından inceleyebilir, satın almak için ise bana google.com/+MeteErturk adresinden ulaşabilirsiniz.



Demo SayfasıBana Ulaşın



"Karartı" Blogger Teması "Karartı" Blogger Teması
$25.00 In stock
CSS3 efektleriyle sade flat tasarım. Karartı isimli özel Blogger teması.



Sonraki

0 yorum:

Yorum Yap

Yorumlar

Şunlar da ilginizi çekebilir:

Ara

Reklam