news-list-animated

CSS ile Açılıp Kapanabilen Haber Kutucukları

Bugün sizlerle birlikte görsel ve metinlerinizi bir arada şık bir şekilde sergilemenizi sağlayacak haber kutucukları tasarlayacağız. Mobil cihaz desteği de bulunan bu tasarım Material Design ruhunu da taşımaktadır.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


10 Ücretsiz Material Design HTML Template

google-material-design2014 yılında duyurulan Material Design‘ın günden güne genişleyen kullanım kitlesi ile popülerliği günden güne daha da büyüyor. Android telefonlarımızdan gezdiğimiz web sitelerine kadar her yerde karşımıza çıkan bu tasarım trendini siz de web sitenizde kullanmak ister misiniz?

Merak etmeyin bu iş artık eskisi kadar zor değil. Aşina olduğumuz onlarca web tasarım kütüphanesi artık Material Design skinleriyle birlikte geliyor.

Sizler için en iyi ve ücretsiz 10 Material Design kütüphanesini seçtik.
(daha&helliip;)

Devamını Oku

Google Material Design Menu #2

google-material-design-menu2Google‘ın tasarım devrimi üzerine konuşmaya devam ediyoruz. Material Design’ın günden güne web tarafına uyarlanan örnekleri bizim makalelerimizde de yerini buluyor. Daha önce buradaki makalemizde şık bir Material Design menü örneği hazırlamıştık.

Şimdi de ekranın büyük bir kısmını kaplayan, daha büyük yapıdaki bir başka menü tasarımı konu edeceğiz. HTML5, CSS3 ve jQuery desteğiyle hazırlayacağımız bu tasarım soğuk renklerden oluşuyor.

Bu makalemizde üzerine tıklandığında büyük ölçülerde açılan ve içeriği aksi yöne ittiren şık bir menü tasarımı hazırlayacağız. İkinci Material Design menü örneğiyle sizlerleyiz!

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Material Design Text Input

material-design-inputMaterial Design odaklı tasarımlar üzerine konuşmaya devam ediyoruz. Bugün hazırlayacağımız örnekte statik yapıdaki text inputlarını animatif hale çevireceğiz. CSS3 ve jQuery‘nin hünerlerinden yararlanarak hazırlayacağımız bu şık tasarım sıkıcı hale dönüşebilen formlarınıza renk katacak!

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

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Material Design Iconları

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

Bootstrap Material Design

bootstrap-materialdesignGoogle’ın yeni nesil kullanıcı dostu tasarım prensipleri ile Twitter’ın CSS kütüphanesini bir arada kullanmaya ne dersiniz?

Material Design‘ı mobil ortamda yeni yeni görmeye başlamışken web tarafında işler daha hızlı ilerliyor. Web geliştiricileri günden güne yeni Material Design elemanları paylaşırken şimdi de Bootstrap tarafında hareketlenmeler yaşanmaya başladı. FezVrasta, GitHub sayfasında paylaştığı bu web önyüzüyle son günlerde fazlasıyla popüler. (daha&helliip;)

Devamını Oku

Instagram, Material Design ile Tasarlansaydı?

google-material-designGoogle’ın ses getiren tasarım trendi Material Design ile hazırlanmış konsept tasarımlar günden güne kendini gösteriyor. Tasarımcılar özellikle günlük hayatta bol bol kullandığımız uygulamalara değinmekte.

Bugün de Emmanuel Pacamalan tarafından hazırlanmış Instagram konseptini sizlerle paylaşıyor olacağız.

Başlamadan önce Material Design ile ilgili daha fazla şey öğrenmek isterseniz;

(daha&helliip;)

Devamını Oku

Google Material Design Menu

material-design-menuGoogle‘ın ses getiren tasarım trendi Material Design üzerine konuşmaya devam ediyoruz. Bugün Bennett Feely tarafından CSS ile hazırlanan menü örneğini sizlerle paylaşacağız.

Bennett’in örneği Material Design’ın estetik ve animatif tarafını başarılı bir şekilde yansıtmakta.

Web öğelerinin sadece spesifik kısımlarını CSS ile göstermemizi sağlayan clip-path tanımı da bu tasarımda faydalı bir şekilde kullanılmakta.

Eğer hazırsanız başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Material Design’ın Ripple Efekti

google-material-designGoogle‘ın ses getiren tasarım trendi Material Design ile birlikte görmeye alıştığımız dalgalanma efektini CSS ve jQuery ile hazırlamak mümkün. Bu şık efekt kullanıcıya tıklama hissiyatını vermenin yeni yolu. Özellikle web sayfanızın mobil ekranlarında kullanmanızı önerebileceğimiz bu tasarımın örneğini aşağıdan görüntüleyebilirsiniz.

Bu dersimizde su dalgalanmasını andıran bir tıklama efekti hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku