google web fonts için Arama Sonuçları

jQuery ile Farenin Sağ Tuşuyla Açılan Menü

Vatanay Özbeyli 4 Yorum jQuery

jquery-context-menuBildiğiniz gibi web sitelerinde farenin sağ tuşuna bastığımızda contextmenu denilen bir menü açılıyor. jQuery ile de bu menüyü kapatıp yerine başka bir tanımlama yapabiliyoruz. CSS3 desteğiyle hazırlayacağımız modern bir tasarımı bu menüye giydirebiliriz.

Örneği görüntüleyerek başlayabilirsiniz.

Bu makalemizde şık bir menü tasarımı hazırlayıp, yapıyı sağ tuş ile tetiklenebilir hale getireceğiz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Şık Bildirimler

Vatanay Özbeyli 1 Yorum CSS3

CSS Bildirimler

Web sayfanız için özel bildiri kutucukları hazırladınız mı? Cevabınız hayır ise doğru yerdesiniz.

Bugün 4 klasik uyarı için bildiri kutucuğu tasarlayacağız. Hata, uyarı, bilgi ve başarı bildirimleriniz artık daha şık ve kontrol edilebilir olacaklar.

Ekleyeceğimiz inline JavaScript kodları da bu kutucukların kapatılabilir olmasını sağlayacak. Tasarımı daha ilgi çekici hale getirmek için de CSS-transition kullanacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Yazılara Gradient Efekti

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

Bu dersimizde ilk olarak Nick La’nın web sayfasında gördüğüm CSS Text Gradient tekniğini öğreneceğiz.

Bu teknik minik bir hile üzerine kurulu. Web sayfanızın arka plan rengiyle uyumlu gradient dosyaları hazırlayıp onları span halinde yazıların üstüne ekliyoruz.

Nasıl mı? Beyaz bir arka plan, üzerinde siyah bir başlığın olduğu sayfanız var diyelim. Beyazdan 0% opacity e doğru giden bir gradient çizip .PNG uzantısı ile kayıt ediyorum ve yazının üzerine gelecek şekilde yerleştiriyorum. Böylece gayet kullanışlı bir yazı efekti elde ediyorum.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Material Design Iconları

Vatanay Özbeyli 2 Yorum Diğer Konular & İpuçları

google-material-designMaterial Design ile birlikte kullanılan iconlar “Material Design Iconic Font” isimli proje altında bir araya getirildi. Toplamda 744 adet icon vektörel formatta, web tasarımında kullanabileceğiniz şekilde sizleri beklemekte. Diğer popüler icon setleri Glyphicon ve Font Awesome’dan farklı bir ruha sahip bu icon tasarımları günden güne daha da popülerleşecek gibi.

Sergey Kupletsky tarafından hazırlanan bu icon setini ücretsiz bir şekilde kullanabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Ders 1 : Bootstrap nedir?

Vatanay Özbeyli 4 Yorum Bootstrap

BootstrapWeb tasarımını öğrenmek mi istiyorsunuz? CSS ve JavaScript hatta HTML öğrenmek sizi zorluyor mu? Ya da bütün bunlarla uğraşmak için zamanınız yok mu? Doğru yerdesiniz.

Adobewordpress olarak yepyeni bir makale dizisiyle sizlerleyiz.

Karşınızda günümüzün öne çıkan front-end frameworklerinin en popüleri; Bootstrap. Bu makalemizde Bootstrap‘in tam olarak ne olduğu ve ne işe yaradığını konuşacağız, bir HTML iskeleti ile örneğimizi oluşturacağız. (daha&helliip;)

Devamını Oku

Responsive menü nasıl yapılır?

Vatanay Özbeyli 3 Yorum CSS3, HTML5

Responsive Menu

HTML5 ve CSS3 teknolojileriyle her türlü ekran çözünürlüğüne farklı tepki veren tasarımlar oluşturmak mümkün. Özellikle menü ve navigasyon öğeleri için bu tekniği kullanmak neredeyse zorunlu. Daha önce üzerine konuştuğumuz CSS’in @media öğesi sayesinde bu işlem sandığımızdan da kolay.

Bu makalemizde ekran çözünürlüğüne göre 3 farklı şekil alabilen bir navigasyon örneği hazırlayacağız. Örneği görüntüleyerek başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku