Bir önceki yazımızda instagram üzerinden api kodu ve kullanıcı id öğrenmeyi anlatmıştık. Api kodu ve kullanıcı idesi kullanarak belli bir instagram hesabından çeşitli veriler çekiliyor. Şuradaki yazımızda Css3 hover efekti ile hazırlanmış bir örnek paylaşmıştık. Yine aynı örneği instagram üzerinden yayınlanan fotoğrafları çekerek kullanıcaz. Bu şekilde instagram üzerinden websitenize fotoğraflarınızı çekebilirsiniz.... Devamını oku →
İnstagram api kodu alma ve kullanıcı id öğrenme
Bu güne kadar instagram kullanmadığım için ve kullanmayacağım için hiç işim düşmedi bu instagram sitesine. Kullanmayacağım dedim çünkü fotoğrafçılıkla pek alakası olmayan biriyim. Gel gelelim bu instagrama dünyada kaç küsür insan kullanır onuda bilmem ama alexa sıralamasına bakınca milyar insan tarafından kullanıldığı kesin bir site. Webtasarım örnekleri paylaştığımız için ara... Devamını oku →
BouncingBorder- Çerçevelere border efekti ekleme
Başlık eklemek için en çok zorlandığım örneklerden bir tanesi. Böyle bir örneğe nasıl bir başlık gider diye az düşünmedim. Mouse ile resimlerin üzerine geldiğinizde resimlerin border kısmı için hazırlanmış hover animasyonu devreye giriyor ve resimlerin etrafındaki border (çizgi) bir anlık incelip kalınlaşıyor. Sanki zıplıyormuş gibi bir görüntü çıkıyor ortaya. Zıplama... Devamını oku →
Least.js – Fotoğraf inceleme uygulaması
Kamil Czujowski ve Sergej Müller tarafından Html5, Css3 ve Lazyload kullanılarak hazırlanmış bir resim galeri uygulaması. Şimdiye kadar karşılaştığım resim galeri örneklerine baktığımda bu galeri örneği bana pek görmeye alışık olmadığım türden gibi geliyor. Tamamen farklı bir fikir üretmişler. Bildiğiniz galeri örneklerinde ya slayt geçişler olur yada lightbox tarzı pencerelerden açılır. Least.js... Devamını oku →
Css ile Ok işaretleri yapılışı
Ok işaretlerini gördüğümde aklıma ilk gelen örnek Fontawesomeydi. Bu örnekte de Fontawesome kullanılmış olabilir diye düşünüyordum. Ama kodları incelediğinizde herhangi bir resim dosyası bulamazsınız. Tamamen Css3 kullanılarak hazırlanmış. Bazı tasarımcılar gördüğünüz gibi Css3 teki yaratıcı yetenekleri sayesinde resim kullanmadan bile çok güzel görüntüler ortaya koyabiliyorlar. Css de content: ‘ ‘;... Devamını oku →
Üç aşamalı üyelik paneli
Genelde üyelik formlarında tek sayfalık form örnekleri kullanılır birçok web sitesi tarafından. Kimi websiteleri fazla bilgi istediğinden form sayfasının fazla uzun olmaması için üyelik formunu bir kaç sayfa halinde kullanırlar ve bundan dolayı ziyaretçi tek sayfa yerine üç sayfadan oluşan sıkıcı üyelik formları ile başetmek zorunda kalıyor. Bazı sitelerde kullanıcılar... Devamını oku →
Colorful onay kutusu tasarımı
Guhe Louis tarafından Fontawesome kullanılarak hazırlanmış Css3 animasyonlu checkbox örnekleri. Bütün checkbox örneklerinin şekli aynı olsada farklı farklı renkler kllanılarak hazırlanmış. İşaretleyeceğiniz checkbox alanlarında görünmesi gereken okey işareti animasyonlu bir şekilde adeta kalemle yazarmış gibi görüntüleniyor. Checkboxların görünümü Fontawesome kullanılarak biraz farklı şekilde görünüyor. Bunun için label içeriği onay kutusu dediğimiz... Devamını oku →
Bootstrap uyumlu 3D buton tasarımları
Matt Wisniewski tarafından Css3 box-shadow ve border-radius kullanılarak hazırlanmış buton örnekleri. Bu butonları Bootstrap frameworkuyla beraber kullanabildiğiniz gibi yanlız başınada kullanabilirsiniz. Üzerine mouse ile geldiğiniz butonlar hafif yukarı doğru çıkıyor ve tıkladıktan sonrada içeri batıyormuş gibi 3D şeklinde görünüyor. Butonlarda active özelliğide ayarlandığı için tıklanmış butonu active kullanarak tekrar butonun dışarı çıkmasını... Devamını oku →
Inputa virgülle eklenmiş kelimeleri etikete dönüştürme
Facebook üzerinden yeni bir yazı paylaştığınız zaman input alanında yazdığınız yazı içine kişi isimlerini yazdığınızda arkadaş listenizdeki kişileri otomatik bulup yazıya etiketleyebiliyorsunuz. Ayrıca wordpress kullanan kişilerde bilirler yazıya etiket eklemek için input alanına virgül ile girilen kelimeler yazıya etiket olarak atanıyordu. Her bir etiket virgüller sayesinde tespit ediliyor. jQuery Tags... Devamını oku →