■

BlueMarlin, portfolio siteleri  için kullanışlı  ve en iyilerden diyebileceğim ücretsiz bir  Wordpress  temasıdır.  Slider, portfolio ve service   bölümleri  için ayrı kategori ve yazı oluşturma  bölümü de mevcuttur. Portfolio sayfasındaki yazılar  için içerik filtreleme özelliği  ve resim galeriler  için de  tam ekran resim inceleme özelliği de  bulunuyor. Beş farklı tema düzeni sayesinde  BlueMarlin WordPress portfolio temasını  değişik stillerde kullanabilirsiniz. Devamını oku...

Immersive Slider – jQuery slayt eklentisi

  jQuery slayt eklentilerininin genel amacı içerik kaydırma için kullanılır. Bu kısmı bilmeyen yoktur  sanırım. Çok nadir  jQuery slayt aklentilerinde  farklı özellikler  bulunur. Kodlamaları farklı bile olsa  çoğunun çalışma şekli  aynıdır. Hepsi  birbirinin kopyası gibi  görünür. Bu  seferki jQuery slayt eklentisinin çalışma şekli daha önce  hiç karşılaşmadığım türden. Sağ tarafta  resim, sol tarafta resim açıklaması  bulunuyor. Sağ ve sol ok  tuşlarına tıklayarak yada alt kısımda bulunan küçük noktacıklara tıklayarak içerikler  arası geçiş yapılabiliyor. İşin buraya  kadar  olan kısmı  diğer  bütün slayt  eklentilerinde olduğu gibi  görünüyor. jQuery Immersive slayt eklentisini diğer eklentilerden farklı kılan özellik ise her  slayt geçiş işlemi  sırasında sağ tarafta  bulunan resmin aynısı  ama  daha bulanık hali  slayt çerçevenin... Devamını Oku...

Fashionista – Magazin tarzı ücretsiz kişisel WordPress blog teması

  Magazin tarzı ücretsiz kişisel WordPress Fashionista blog temasını  magazin tarzı  yapan özelliği  sanırım yazı stilleri. Bir magazin teması olabilmesi için slayt yada  özellikli kategoriler  desteği olmasada görüntü olarak magazin tarzı temaları andırıyor.  Yönetim paneli üzerinden yapmanız  gereken birkaç ayar dışında  ayarı bulunmuyor. Favicon ekleme, banner ekleme, anasayfada sadece resim ve başlık görüntüleme ve  anasayfada resim, başlık tam içerik görüntüleme gibi ayarlar  bulunuyor. Anasayfada resmin altında yazı çıktığı zaman tema magazin teması olmaktan çıkıyor gibi. Anasayfada resmin altında  yazılar çıkmasa  sadece başlık ve resim göründüğü zaman görüntü  daha güzel görünüyor... Devamını Oku...

MesoColumn – Adsense kurulu ücretsiz WordPress haber magazin teması

Aslında  Wordpress MesoColumn teması için kullanmam gereken başlık E-commerce ve Buddypress destekli WordPress haber magazin teması olması gerekiyordu ama bu şekilde çok fazla uzun olacağı için direk haber ve magazin teması diye  adlandırdım.  Kullandığım eski WordPress temasında geç farkettiğim bir hata  dolayısıyla yeni tema  arayışlarına girerken bulduğum WordPress MesoColumn haber ve magazin temasındaki özellikleri kendime uygun halde  kullanabilmek  birkaç saatimi aldı. Görüntüsü  oldukça  kullanışlı olduğu halde ayarları düzenlemek bir o kadar da zahmetli... Devamını Oku...  

3D Görünümlü Css3 üst menü örneği

Herhangi bir  resim yada javascript dosyası  kullanmadan hazırladığım bir Css3  üst menü örneği. Aslında yamayı düşündüğüm örnek Css3 perspctive ile  butonların görünüm açısını değiştirmekti. Bu şekilde  3D görünümlü bir Css3 üst menü örneği ortaya çıkacaktı. ama nedenini tam olarak bilmiyorum ama perspective  ile  butonların görünüm açısını değiştirdikten sonra butonlarda  tıklanma özelliği ortadan kalkıyordu. Sanırım  butonun açısı  değiştiği için mouseyi de aynı açıdan butonların üzerinden gezdirmek gerekiyor bu da imkansız birşey  Bilgisayarın içine  girip  eğik görünen butona  düz tarafından bakıp tıklatmak gibi birşey işte. Bu tip  bir menüyü  düşündükten sonra yapmamak ta kötü olurdu. Perspective yerine margin-top kullanarak yukarı çıkmasını sağladık ayrıca buton yukarı çıkarken de alttan biraz  uzuyor ve butonun alt kısmında da gölg efekti görünüyor. Bu gölgenin görünmemesi için de  ufak bi hile kattık Css3 üst menü örneğimize. Css3 üst menü örneğindekii butonların hemen altında bulunan  siyah bölüm sayesindesorunsuz gibi görünüyor. Bu sefer hazırladığım örnekte Css3 geçişleri biraz fazla abarttım gibi  görünüyor. Alt kategorilere  sahip butonların üzerine geldiğinizde alt linklerin olduğu bir pencere  çıkıyor. Linklerin arkaplanı siyah ve mouse ile linklerin üzerine geldiğinizde açık... Devamını Oku...

Css3 scale ile hazırlanmış hover efekti

Biraz  önce  yayınladığım jQuery animasyonlu menü örneği bir  hover  efekti hazırlamak istiyordum ama  son anda aklıma böyle  bir şey geldi ve jQuery kullanmaktan vazgeçtim bu sefer. Sadece Css3  kullanarak  hazırladığım bir hover  efekti. Css kodlara bakarsanız  fazla  özllik olmadığını farkedebilirsiniz. Ama  ortaya  güzelbir görüntü çıkmış bence. Çerçeve içinde  görünen bir resim ve resmin önünde  scale değeri 5 opacity değeri sıfır olduğu için görünmeyen bir  açıklama çerçevesi var. Mousenizi  resimlerin olduğu çerçevelerin içinde gezdirdiğiniz  anda resim 5 kat büyürken opacity değeri sıfır olan açıklama kutusunun opacity değeri 1 oluyor ve ölçek ayarıda 5ten 1 e  düşüyor. Bu işlem sırasında Css3 transform  kullandığım için webkit tarayıcılarında ve Css3 transform desteklyen tarayıcılarda  animasyonlu bir görüntü ortaya çıkıyor. Resim büyürken açıklama küçülüp ekranın ortasına yerleşiyor. Css3 transform  desteklemeyen tarayıcılarda ise herşey bir  anda olup bitiyor... Devamını Oku...

Animasyonlu jQuery Css3 üst menü örneği

jQuery ve Css3  kullanılarak hazırlanmış animasyonlu bir üst menü örneği. Bir  aralar  buna benzer  flash bir menü görmüştüm. Tamam olarak bu şekilde  değil de linklerin üstünde şeffaf  bir baloncuk olan flash menüydü. Nerden aklıma geldiyse  artık böyle  bir  örnek hazırlamak istedim.  İlk  önce  kategori  linklerinin üstüne  opacity değeri 0.5 olan yarı şeffaf bir  perde ekledim. Birde  bu perdeninin arasında kaybolacağı iki tane de çerçeve ekledim. Biri en sağda  diğeri de en solda duruyor. Perdenin genişliği 860px ve bu  boyutta  iki çerçevebin tam ortasını kapatacak genşlikte duruyor. Mouse üst menünün üstüne geldiği  anda jQuery animate  devreye giriyor ve 860px olan perdenin genişliği  0px oluyor.  Perdenin küçülme  hızı 300 milisaniye, tekrar eski haline gelme hızını da 1000 milisaniye olarak ayarladım. Bu hızları jQuery kodlarda  değiştirebilirsiniz... Devamını Oku...