Google Material Design Menu #2

google material design menu2 Google Material Design Menu #2Google‘ı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


haftalik-ucretsiz-tema-1

Haftanın İlham Kaynakları #1

Beynimiz, çalışma prensibinden ötürü milyonlarca fotoğrafı hafızasında barındırır. Bu görsel öğeler bir düzen içerisinde harmanlanır, belirli yerlerde kullanılmak üzere istiflenir. Bu kişi bir sanatçı, bankacı, ev hanımı, madenci, yazar veya astronot olabilir. O fotoğraflar bir şekilde kişinin ürettiklerinde yer alacaklardır. Bir yazısında, söylevinde, resminde veya bir tutumunda…

(daha&helliip;)

Devamını Oku

mobile-app-design

Mobil Uygulama Tasarımı

Mobil uygulamalar için tasarım hazırlarken nelere dikkat etmeli? Hangi programlar elimizin altında bulunmalı? Hangi boyutlarda çalışılmalı? Hangi renklerden kaçınılmalı? Yeni trendler neler?

Uzun bir aradan sonra video dersleri ile yine sizlerleyiz. Karşınızda uzun soluklu bir mobil uygulama tasarımı rehberi.

(daha&helliip;)

Devamını Oku

Material Design Text Input

material design input Material Design Text 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

CSS ile File Input Tasarımı

css file input design CSS ile File Input TasarımıWebkit devreye girmeden önce ne yazık ki işin CSS tarafında file inputlarına müdahale edemiyorduk. Bu yüzden birçok tasarımcı, perdeleme yöntemiyle file inputun üzerine şık bir tasarım koyup asıl çalışan fonksiyonu altta gizliyordu. Ancak pseudo seçicileri sayesinde artık bu mümkün. Birçok güncel tarayıcının desteklediği bu selector tanımları Internet Explorer tarafında desteği 9+ versiyonlarda buluyor.

Bu makalemizde -webkit-file-upload-button ve -ms-browse tanımları sayesinde input[type=file] bir öğeye stil atayacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

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

jquery context menu1 jQuery ile Farenin Sağ Tuşuyla Açılan MenüBildiğ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

Material Design Iconları

google material design Material Design IconlarıMaterial 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