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 Üzerine Gelince Dönen Resim

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

iphone6-adobewordpress

Apple’ın Yeni Tasarımı : iPhone 6 ve iPhone 6 Plus

İnsanlığın sonuna sebep olabilecek koca bir meteor hızla dünyaya yaklaşsa bu kadar yer alamaz herhalde medyada. Sadece teknoloji yazarlarının değil, tüm dijital ve yazılı basının ana konusu “iPhone 6” bugünlerde. Biz de Adobewordpress.com ailesi olarak ilk kez bir akıllı telefonu mercek altına alıyoruz. Merak etmeyin, bizim merceğimiz cihazın pil ömrünü, işlemci gücünü veya yazılım kalitesini değil, sadece kullanıcı dostu tasarımını inceleyecek. Bırakalım da Android ve iOS arasındaki kavga süredursun, biz anladığımız şeyden, tasarımdan konuşalım.

Kimileri “Steve Jobs‘ın kemikleri sızlıyor!” dese de beklenen oldu. Apple, eski iPhone’lara kıyasla büyümüş olan iki adet tasarımla karşımıza çıktı. iPhone 6 ve iPhone 6 Plus olarak nitelendirilen bu cihazlar bir önceki model olan iPhone 5’in 4″ olan ekranına kıyasla bizlere daha büyük bir oyun sahası sunacak. Hızlıca Apple’ın yeni çocuklarını eskileriyle kıyaslayalım. (daha&helliip;)

Devamını Oku

Photoshop ile Yuvarlanmış Şehir Efekti

Oval ŞehirMerhaba arkadaşlar.

Bu makalemde Photoshop kullanarak şehir fotoğrafını oval bir hale çevireceğiz.

Özetle; birkaç adımla tamamlayabileceğiniz yuvarlanmış şehir efektini gerçekleştireceğiz. İlk bakışta göz korkutabilen bu efekt sadece iki filtre ve birkaç küçük ayar ile hazırlanmakta. Şimdi detaylı açıklamalarla çalışmamıza başlayalım.

Benzeri bir çalışma hazırlamak için üzerinde çalışabileceğiniz bir görsel seçin. Ben bu efekti oluşturmak için buradaki fotoğrafı kullandım. (daha&helliip;)

Devamını Oku