Adobewordpress ailesi olarak CodePen‘i çok seviyoruz ve sık sık örneklerimizi orada oluşturuyoruz. Biz web geliştiriciler için hazırlanmış interaktif bir oyun sahası olan CodePen’de milyonlarca fikri barındırmakta. Ama bunlardan bazıları var ki yaratıcılık ve teknik bilginin birlikte tavan yaptığında ne sonuçlar doğurabileceğini bize gösteriyor.
Bugün sizler için CodePen’in en dikkat çekici 10 çalışmasını derledik. (daha&helliip;)
Particles.JS, birden çok etkileşimli parçacığı oluşturan bir JavaScript kütüphanesi.
Kullanıcılarınızın ilgisini çekebilecek bu partikül yapısı birçok JavaScript kütüphanesinin aksine web sayfanızda ağır bir performans kaybına sebep olmuyor.
Örneği görüntüleyerek başlayabilirsiniz.
(daha&helliip;)
Bir tasarım üzerine son sürat çalışırken karşınıza küçük bir engel çıkar ve saatlerinizin boş yere uçup gitmesine sebep olur. Bu makalenin çıkış noktası da bu minik sorunlardan birinin çözümü ile alakalı.
Web sayfanız açıldığında overflow tanımlı bir öğenizin kaydırma çubuğunun (scroll) en altta olmasını istiyorsanız doğru makaledesiniz.
Örneğin bir chat sistemi hazırladığımızı varsayalım. Yeni yazılan mesajlar bir div’in içerisine otomatik olarak ekleniyor. Yukarıdan aşağıya doğru eskiden güncele bir listeleme yapılıyor. Kullanıcılar bu chat sistemine girdiğinde o div’in en üstündeki eski mesajı değil, en alttaki güncel mesajı görüntülemeli. İşte sizlerle birlikte hazırlayacağımız JavaScript kodu da tam olarak bu işlevi görüyor. (daha&helliip;)
Onlarca sebepten ötürü tasarımcılar web sayfalarında Video Player (oynatıcı) kullanmakta. Hazırlanmış onlarca Flash, HTML ve JavaScript ile hazırlanmış onlarca video oynatıcı kullanılmak için beklemekte.
Liste bu kadar genişken Adobewordpress olarak detaylı bir liste hazırlamaya karar verdik. Hangi oynatıcı web sayfanız için daha uygun? Seçimi size bırakıyoruz. (daha&helliip;)
Divlerin veya herhangi bir elemanın görünürlüğünü açıp kapatmak için JavaScript ile birkaç satır kod karalamanız gerekmekte. Fakat bu makalemizde size küçük bir sır vereceğiz.
Bildiğiniz gibi form öğesi olan checkbox‘ın işaretlenip işaretlenmediğini CSS ile denetleyebiliyoruz. Kafanızda bir ampul yandı mı? Hadi konuyu biraz detaylandıralım.
(daha&helliip;)
Web sayfanıza renkli geçişlere sahip etkileyici bir menü hazırlamak ister misiniz? Hem de sadece CSS kullanarak… Aşağıdaki css menü örneğini test ederek başlayabilirsiniz.
(daha&helliip;)
Merhaba arkadaşlar. Bugün JavaScript ile rastgele veri üreten bir döngü hazırlayacağız. Bu işlem için rasgele veri yayınlayan bir fonksiyon ve gösterilmesini istediğimiz kayıtları hazırlayacağız. Bunu hazırlarken Dave Rupert’ın eğlenceli örneği üzerinden gideceğiz.
Bir proje üzerine yoğun bir şekilde çalışırken sizi arayarak dışarı çağıran arkadaşlarınız artık sorun değil. Mazeret üretici hizmetinizde !
(daha&helliip;)
Merhaba arkadaşlar.
Bu makalemde içerisinde maksimum ve minimum karakter limiti barındıran bir form öğesi hazırlayacağız. Böylece oluşturduğumuz form alanlarına ziyaretçilerin minimum ve maksimum kaç karakter girebileceğini belirleyebileceğiz.
Bu işlem için jQuery desteği almamız gerekecek. Çünkü anlık olarak yazılan karakter sayısını belirtmemiz gerekiyor. Ben jQuery.min.js kullanacağım. Versiyon olarak ise 1.5.1 ve daha günceli yeterli olacaktır. Şimdi arkanıza yaslanın ve formumuzu hazırlamaya başlayalım.
(daha&helliip;)
Çok değil, birkaç yıl önce sağdaki animasyonun dosya tipinin ne olduğunu sorsalardı SWF veya herhangi bir video formatı olduğunu iddia ederdim.
Günümüzdeki kod sistemleriyle bu tarz sunumları hazırlamak için çok fazla çaba sarfetmenize gerek yok. Birkaç satır JavaScript kodu ve tasarım unsurlarına az da olsa hakim olmanız neredeyse yeterli. Nasıl mı? Hadi derse başlayalım.
(daha&helliip;)
CSS’in transition (geçiş) özelliği ile nasıl animasyonlar hazırlayacağımızı öğrenmiştik. Bu makalemde ise JavaScript desteği ile sayfaya girildiğinde otomatik olarak renklenen başlıklar hazırlayacağız. İşin güzel kısmı ise bunu hiçbir görsel kullanmadan yapacak olmamız.
(daha&helliip;)
WordPress Kullanıcılarının En Sık Karşılaştığı Hatalar ve Çözümleri
Sitenize Kolayca Slider Ekleyin
Photoshop’u Türkçe Yapma, Türkçeleştirme
Kolayca fotoğraflarınızın kalitesini arttırın!
CSS Renk İsimleri
Sadece CSS ile Slider Yapımı
Tüm Detaylarıyla SEO Plugin by SQUIRRLY
Photoshop’a Alternatif 10 Resim Editörü
Photoshop ile Gün Doğumu