metin

CSS ile Üzerine Gelince Dönen Resim

Vatanay Özbeyli 6 Yorum CSS3

css-ile-donen-resimBildiğiniz gibi artık web tasarımında perspektif planlama yapabiliyoruz. Ayrıca transform tanımıyla da tasarımlarımızı istediğimiz yönde çevirebiliyoruz. Bu teknikler önceleri Flash desteğiyle yaptığımız animatif etkileşimleri HTML5 ve CSS3 ile çok daha hızlı ve performanslı yapmamızı sağlıyor. Daha önceleri de bol bol konuştuğumuz geçiş efektleri sayesinde bu animasyonları daha yumuşak hale de getirebiliyoruz.

Bu dersimizde bütün bu teknikleri bir arada kullanarak güzel bir hover efekti oluşturduk.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


CSS ile SEO ve performans dostu harika resim açıklamaları

Vatanay Özbeyli 3 Yorum CSS3, HTML5, SEO

Merhaba arkadaşlar. Bu makalemizde görsel açıdan olduğu gibi performans ve SEO açısından da inanılmaz başarılı olan bir resim efektini anlatacağız.

Okumakta olduğunuz makalenin türevleri olabilir, fakat tarafımızdan hazırlanan bu CSS kodu yerli ve yabancı kaynaklarda bulabileceğinizin en iyilerinden biri. Neden mi?

  1. Sadece tek division kullanıyor.
  2. Köprü bağlantılar a block veya onclick ile değil, klasik href türünde. Böylece ziyaretçinin browserinin java desteği kapalı olsa bile tam performans ile çalışmakta.
  3. Yukarıda dediğim gibi, kod satırlarının içersinde JS yok. Bu yüzden hızlı ve her kullanıcı tarafından görülebilir.
  4. CSS3 ‘ün yeni teknikleriyle süslü.
  5. Yazılar paragraf içinde, yani tam anlamıyla açıklama metinleri oldular. Böylece arama motorlarının botları görsel arandığında <p> içindeki geniş açıklama metnini yayınlar. Kısaca SEO dostu diyebiliriz.
  6. Yazılar seçilerek kopyalanamaz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Photoshop ile Yazılardan Oluşan Resim

Vatanay Özbeyli 3 Yorum Efektler, Photoshop Dersleri, Yazı Efektleri

Photoshop ile Metinlerden Resim OluşturmaPhotoshop ile yapılabilecek yüzlerce yazı efektinin en dikkat çekicilerinden birisi de kelimelerden oluşturan resimler olmuştur.

Bu makalemde sıradan bir görseli yazılardan oluşturacağız. Bu tasarım web üzerinde logo ve banner gibi alanlarda kullanılabileceği gibi poster tasarımcılarının da işine yarayabilir. Lafı fazla uzatmadan konumuza gelelim.

İlk olarak yazının üzerine işleyeceğiniz paragrafları hazırlamalısınız. Elimin altında hazır metin yok diyorsanız buradan Lorem Ipsum sitesine girip kendiniz için istediğiniz oranda metin hazırlayabilirsiniz. (daha&helliip;)

Devamını Oku

CSS ve jQuery Yardımıyla Resimlere Caption

Vatanay Özbeyli Yorum yazın CSS3, jQuery, Tasarım Unsurları

Merhaba arkadaşlar. Bu yazımda CSS ve jQuery yardımıyla görsellerimiz için açıklama metinleri oluşturacağız. Bu işlemi yaparken jquery-1.8.3.min.js dosyasına ihtiyaç duyacağız.

Dosyayı buradan indirebilirsiniz veya direkt olarak aşağıda gösterdiğim gibi çağırabilirsiniz.

Bu işlem içerisinde JS kodları barındırsa da performans olarak problem yaratabilecek nitelikte değil. Yani hiç düşünmeden kullanabilirsiniz.

JavaScript‘in replace koduyla çalışmakta. Sayfa içerisindeki altyazı classına sahip tüm görsellerin title değerini örnekte gördüğünüz gibi göstermekte. (daha&helliip;)

Devamını Oku

CSS ile Etiketlenmiş (Ribbon) Kutu

Vatanay Özbeyli 1 Yorum CSS3, Tasarım Unsurları

Merhaba arkadaşlar, önceden GIF veya PNG yardımıyla zar zor hazırlayıp hizaladığımız etiketli kutucuklar (ribbon boxes) artık CSS ile çok kolay!

Border kod satırının hünerleri ile etiketimizi, birkaç gölge efekti ile de dikkat çekici tasarımlar hazırlayabiliriz. Tabi uyumlu renk tonları da bu işin küçük sırrı.

Sizin yapmanız gereken kutunun içine yazacağınız yazıyı ve etiket ismini belirlemek, bu kadar…

(daha&helliip;)

Devamını Oku