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


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

Ü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

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

CSS Background Nedir? Nasıl Kullanılır?

CSS DersleriCSS‘in Background satırı arka plan görsellerimizin seçimini, yerleşimini, boyutunu ve pozisyonunu yönetmemizi sağlar.

Bu makalemizde web tasarımında kullanabileceğimiz tüm arka plan terimlerini tanıyacağız. Background’a etki edebilecek background-image, background-color, background-repeat, background-attachment ve background-position değerlerini de örneklendireceğiz. (daha&helliip;)

Devamını Oku

Photoshop Arka Plan #1 Renkli Dikişler

RGBPhotoshop derslerimiz arka plan serisiyle devam ediyor. Bu makale dizimizde 1920×1080 boyutlarında gayet şık arka plan çalışmaları yapacağız. Yani bilgisayarınızın veya mobil cihazınızın masaüstünde kullanabileceğiniz yüksek kalitede wallpaperlar hazırlayacağız.

Oluşturacağımız arka plan teknikleri diğer tüm Photoshop derslerinde tekrar karşımıza çıkacaklar.

İlk çalışmamıza “RGB” adını verdik. 3 ana renkten oluşan bu arka plan birbirine kenetlenmiş renk sütunlarından oluşmakta. Endişe etmeyin, hazırlanışı gayet basit. Hadi başlayalım. (daha&helliip;)

Devamını Oku

CSS Background, Background-Size ve Background-Position Artık Çok Kolay!

CSS Arka PlanCSS ile arka plan öğeleri bazen can sıkabiliyor.

Background, background-image, background-size, background-position diye uzayan giden kod satırları insana bildiğini de unutturuyor. Bu yüzden sizler için CSS’in gayet karışık gözüken arka plan yapısını anlatan bir tablo yayınlıyoruz.

Tablo sayesinde arka plan resminin boyutunu, pozisyonunu ve türünü değiştirebileceğiniz kodları test edebilirsiniz. Böylece arka plan resimlerinize tam anlamıyla hakim olabileceksiniz.

Tabloyu görüntülemek için örneğe göz atın.

ÖRNEĞİ GÖRÜNTÜLE

Devamını Oku

Sade Arkaplanla da Kaliteli Tasarımlar Oluşturmak Mümkün

Arkaplan bir websitesinin görselindeki ilk adımdır.Web sitesi tasarlanırken uygun arkaplan belirlenir ve onunla uyumlu renk tonlarında renkler belirlenerek sitenin görseli düzenlenir.Ziyaret ettiğimiz sitelerin çoğunda arkaplanların renkli ve desenli olduğunu farketmişizdir,bu tasarıma ayrı bir hava katar bunu inkar edemem fakat sade arkaplanlarlada çok başarılı tasarımlar oluşturulabileceğimizide bilmemiz gerekmekte.Ben genel olarak renklere Photoshop ile ufak dokunuşlar yapıp sade ve hoş arkaplanı oluştururum fakat düz renkler kullanılarak hazırlanan çok başarılı web siteleriylede karşılaştım.Bunun sizler için bir kaynak olması açısından bu web sayfalarının bazılarını sizlerle paylaşmak istiyorum.

The Red Bowl Challenge

Single Colored Background

(daha&helliip;)

Devamını Oku