css3-resim-gecisi

CSS3 ile Animasyonlu Resim Geçişi

HTML5 ve CSS3 teknolojilerinin gelişimi ile birlikte önceleri JavaScript desteği olmadan yanından bile geçemediğimiz tasarımları artık kolayca hazırlayabiliyoruz. Özellikle CSS3‘ün animatif tanımları, tasarımın web tarafında slider, galeri ve türevi görsel bazlı öğeleri popüler kılmakta.

Bu yazımızda sadece CSS3’ün animation özelliğiyle bir resim geçişi tasarımı hazırlyacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


Kolay ve işlevsel slider : Fotorama!

fotorama-slider

Merhaba arkadaşlar. Yayınladığımız slider konulu makalelere gösterdiğiniz alaka sebebiyle aynı konuyu tekrar işlemeye karar verdik. Bugün sizlere kolay kullanımı ve gelişmiş özellikleriyle Fotorama Slider‘ı tanıtacağız. Yapımcıların yorumu şöyle :

“Basit, şaşırtıcı, jQuery ile hazırlanmış gülçlü bir resim galerisi.”

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Yazı Arka Planı : text-fill-color

text-fill-colorCSS3 ile yelpazeye dahil olan text-fill-color ile alışılagelmiş color arasındaki farkları inceleyeceğimiz bir makaleyle devam ediyoruz.

Sol tarafta görmekte olduğunuz gibi bu teknik ile fotoğrafları rahatlıkla metin üzerine yerleştirebiliyoruz. Sadece fotoğrafları değil, gradient (renk geçişleri) de bu teknik ile kullanılabilmekte. (daha&helliip;)

Devamını Oku

the_post_thumbnail ile Öne Çıkarılmış Görselleri Çekelim

the_post_thumbnail, WordPress konularımızda eklediğimiz öne çıkarılmış görselleri direkt olarak çekmemize yarayan bir fonksiyondur.

Özellikle tema yapımı ve düzenlenmesiyle ilgileniyorsanız özel listelemeler için bu etiketi kullanmanız kaçınılmaz.

Sizlere bu fonksiyonun array desteğinden bahsedeceğiz. Böylece paylaşacağımız değerleri kullanarak çektiğiniz görseli boyutlandırabilir, sağa-sola yaslayabilir, alt  title değerini değiştirebilirsiniz. (daha&helliip;)

Devamını Oku

Görsellerinize Büyüteç ile Bakın

CSS Büyüteç

Günümüzde neredeyse çoğu grafik sitesi görselleri için büyüteç tekniğini kullanmakta. Hatta sık sık ziyaret ettiğimiz alışveriş siteleri bile ürünlerini daha iyi sunmak için bu tekniği kullanmakta.

Peki nasıl oluyorda imleci görsellerin üzerine getirince bir mercek içinden bakabiliyoruz? Bu makalemde bu soruyu birlikte cevap arayacağız.

Biraz CSS, biraz HTML ve biraz da jQuery… Hadi başlayalım!

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Photoshop ile Grunge Fotoğraf Efekti

Etkileyici Fotoğraf EfektiGrunge tasarımın özündeki eskitme özelliğini önceki çalışmalarımızda bol bol kullandık.

Okumakta olduğunuz derste ise gölgeleri biraz abartıp küçük renk değişiklikleri yapacağız. Tasarımın çıkış noktası grunge değil fakat ortaya çıkan şey başka bir kategori altında listelenemez diye düşünüyorum.

Ben buradaki görsel üstünde çalışacağım. Üzerinde çalışmak için bir görsel seçtiyseniz derse başlayabiliriz. (daha&helliip;)

Devamını Oku