Css3 ile slayt gösterisi yapma
Tasarımı canlandırmak adına güzel bir Slayt gösterisi. Yanlarda okları olan ve alt tarafında her bir resim için ayrı bir kutucuğu olan bu script çok kullanışlı. Her browserda çalışmakta olup sadece IE de sorun çıkartmaktadır. Ayrıca bu scripti bir özelliği daha var. Bu özellik bir sonra ki resim tam olarak yeri yerleşmeden %100 görünür olmuyor. Yani resim gelene kadar silik geldiğinde ise görünür hale geçiyor.
41 views
Flip board Page Layout
Bir web sayfanız var ve sürekli yazılar yazıyorsunuz. Bu yazılarda resimler oluyor. Ama bunları bir türlü düzene sokamıyorsunuz. Bu makale ile sitenizi bir düzene sokabilir hatta web sayfanızın gazete görünümü almasını sağlayabilirsiniz. Hatta yazdığınız makaleler ilk başta minik yazılar halinde gözükür üstüne tıkladığınızda ekranı kaplayacak şekilde görünür. Bir buton yardımıyla gazeteye tekrar dönebilirsiniz.
Bu yazının en önemli özelliği sayfaları sürükleyerek geçmektir. Yani sayfadan sayfaya geçerken sayfanın en sağından tutup sola bıraktığınızda bir sonraki sayfaya geçersiniz.
Kelimeler ile fazla yormadan kodları anlatmaya başlıyorum.
28 views
css3 ile accorion effect
Bu yazımda css3 ile bir sayfaya akordeon efekti nasıl verilir onu anlatıcam. Bu efektin gerekliliğinden bahsetmek istiyorum. Bazen bir yazı yazarız. Ve yazdığımız bu yazı kabına sığmaya biliyor. Yani biz tasarım olarak ona belli bir yer ayırmışızdır fakat o yazı tahmin ettiğimizden daha büyük yer kaplamaktadır. Bunun önüne geçmek için akordeon efekti kullanabiliriz. Yazının üzerine geldiğimiz de yazı sağa doğru açılır ve yazının tamamını görmemize olanak sağlar.
Fazla söze dalmadan kodları anlatmaya başlıyorum.
19 views
Enhance Required Fields
Bu yazımızda bir forma sayfası oluşturmayı anlatıcam. Fakat bu form sayfası diğerlerinden biraz farklı olacak. Kullanıcılar siteye üye olmak için illa karşısına bir form sayfası çıkar. Karşılarında doldurmaları gereken bir ton bölüm görürler. Bunların bazıları bizim için önemlidir bazıları sadece profil doldurmak için önemlidir. Bizim için önemli olanların yanına genelde (*) koyulur. Burasını doldurmak zorunlu olduğu için. Bu yazıda biraz kod yazarak bu yıldızdan kurtuluyoruz. Yıldız yerine formu başına bir buton koyuyoruz. Bu buton bize sadece gerekli olan kısımları gösteriyor. Diğerlerini saklıyor yada arka plana atıyor. Eğer sıkıcı form sayfasını biraz görsellik katmak istiyorsanız yazdıklarımı denemelisiniz.
Hadi başlıyalım.
20 views
photo slider ekran görüntüsü
Bu yazımızda dairesel hareket yapan resim galerisi oluşturmayı göstereceğim. Öncelikle belirtmek isterim ki bur da HTML değil PHP kullanacağım. Öncelikle ne yapacağımızdan bahsedeyim. Bir web sayfası yapıcaz. Bu web sayfasında önceden eklenmiş resimler olacak. Bu resimler 2 boyutlu olarak dairesel hareket yapacak. İki ok yardımıyla yada farenin kaydırma tuşu ile bu resimler değiştirilebilir olacak. Resimler arkaya gittikçe buğulanıcak öne geldikçe netleşecek. Ayrıca güzel olsun diye sol tarafa bir fotoğraf makinesi koydum. Fotoğraf makinesi en net resmi fotoğrafını çekecek ve size resmin büyük halini gösterecek.
Biraz malzemelerimizden söz edelim.
Bir resmi yayınlamak istiyorsanız 3 farklı çeşidinin elinizde olması gerek. Bir tane 128X128 dairede durması için. Bu resmi dairenin içine koyacağız ve döndüreceğiz.
Bir tane aynı boyutlarda blur resme ihtiyacımız var. Nedir blur? Blur buğulu demek. Bu resmi dağirenin en arkasına koyacağız böylelikle arkadakı resim buğulu gözükücek.
Son olarak buttona bastığımızda karşımıza gelecek resme ihtiyacımız var. oda istediğiniz boyutlarda olabilir ama fotoğraf makinesi ile uyumlu olması açısından 408X408 uygundur diyorum.
Şimdi kodlara geçelim…
38 views
Social Widgets powered by AB-WebLog.com.