CSS ile Çoklu Arkaplan ve Animasyon

css-car-movementCSS3‘ün geliştirilen background tanımı sayesinde bir öğeye birden fazla arkaplan tanımlıyabiliyoruz. Bu bize özellikle transparan – png ve gif- görseller kullanmamız halinde çok büyük bir oyun sahası yaratıyor. Gelin bu tekniği kullanarak otoyolda ilerleyen bir araç animasyonu oluşturalım.

Bugün sizlerle sıradan bir div elemanına atayacağımız iki arkaplan ile küçük çaplı bir animasyon hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


css-repating-gradient

CSS ile Spiral ve Çizgisel Arkaplan

Birçok tarayıcı tarafından desteklenmeye başlayan radial ve linear repeating-gradient (tekrarlanan spiral ve çizgisel arkaplan) tanımlaması sayesinde görsel formattaki çizgisel planları 1 satır CSS koduyla yapabiliyoruz.

CSS3 ile gelen geliştirilmiş gradient desteği, bu işlemi PNG ve GIF görseller generate ederek yapan birçok web girişimini de tarihin tozlu sayfalarına işledi.

(daha&helliip;)

Devamını Oku

JavaScript Kütüphanesi ile Etkileşimli Parçacıklar

js-particlesParticles.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.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

jquery-scroll-down

jQuery ile Scroll ve Arkaplan İlişkisi

jQuery‘nin scrollTop tanımı ile birlikte web sayfalarındaki kaydırma çubuğununun seviyesini numerik olarak yakalayabiliyoruz. Hal böyleyken bu yapıyı niye CSS3 ile ilişkilendirip şık tasarımlar hazırlamayalım ki?

Bu dersimizde aşağıya scroll edildikçe büyüyen ve bulanıklaşan arkaplan tasarımı yapacağız. İşlevsellik yükünü jQuery, tasarım yükünü de CSS sırtlayacak. Hazırsanız başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

css-ile-renkli-arkaplan-form

Formlarınızla Etkileşimli Dinamik Arkaplanlar

Günümüz tasarımlarında uzun formlar wizardlar sayesinde adımlara bölünüyor, kendi içerisinde kategorize ediliyor ve basitleştiriliyor. Ancak wizard mantığı kullanım kolaylığı sunuyor gibi gözükse de aslında süreyi uzatıyor. Burada anahtar kelime ve çıkış noktası “dikkati yönetmek” olarak gösterilebilir. Öyleyse kullanıcıya uzun formların her bir inputuyla etkileşime geçen tasarımlar sunmak işe yarayabilir.

Bu makalemizde her form öğesiyle birlikte renk değiştiren arkaplan hazırlayacağız. Renklerimizi de Google‘ın yeni ve popüler tasarım trendi Material Design‘dan seçeceğiz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Ücretsiz 15 Adet Blurred (Bulanık) Arkaplan

photoshop-blur-bgBu yazımızda sizler için hazırladığımız 15 adet bulanık arkaplan resimlerini paylaşacağız. 1920×1080 boyutlarındaki görsellerle ister masaüstünüz isterseniz de web sayfanızın arkaplanını süsleyin. “Bana balık vermeyin, balık tutmayı öğretin!” diyenleriniz de olacaktır.

Eğer bu görselleri nasıl hazırladığımızı öğrenmek istiyorsanız sizi buraya alalım : “Photoshop ile Bulanık Arkaplan Hazırlama” (daha&helliip;)

Devamını Oku

HTML5 ile Arkaplanda Video!

HTML5Günümüzde birçok web tasarımında hareketli arkaplanlar kullanıldığını görüyoruz. Özellikle şeffaf bir perde ile kullanılan bu yapı günden güne popülerleşiyor.

HTML5‘in getirdiği yenilikler, hareketli arkaplanlar hazırlarken Flash’a muhtaç kalmamamıza sebep oluyor. Böylece sadece birkaç satır kod yazarak ilgi çekici ve hareketli arkaplanlar oluşturuyoruz.

Bu dersimizde HTML5’in video oynatıcısını biraz daha yakından tanıyoruz, beraberinde de manipüle ediyoruz. Örneği görüntüleyerek başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Tam Ekran Arkaplan

Full Background

“Cross Browser”, yani tüm tarayıcılarda aynı sonucu veren bir CSS makalesiyle daha beraberiz. Bugün, “CSS ile tüm sayfayı kaplayan arka plan görüntüsünü nasıl oluşturulur?” sorusunu cevaplayacağız. Gelişen web teknolojileri ve tarayıcı tepkileri sebebiyle bu basit tasarım artık daha kolay bir şekilde hazırlanabiliyor. Microsoft’un DXImageTransform elemanlarından kurtulmak bizlerin işini fazlasıyla kolaylaştırmakta.

Hazırlayacağımız tasarım kısaca şunları yapacak :

  • Tüm sayfayı en ufak bir boşluk bırakmadan kaplayacak.
  • Gerekirse görseli küçültüp/büyültecek.
  • Görselin aspect ratio değerini korur.
  • Görseli sayfanın ortasına yerleştirir.
  • Kaydırma çubuğunun görünmesine sebep olmaz.
  • Tüm tarayıcılarda çalışır.
  • Flash ile yapabileceğinizden daha hızlı ve kolay kullanım sağlar.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku