HTML5

IMGRID ile Resimlerinizi Yönetin

Vatanay Özbeyli 1 Yorum CSS3, HTML5, jQuery

imgridIMGRID, sizler için hazırladığımız bir resim grid kütüphanesidir. HTML5 ile oluşturulmuş, CSS3 ile stilize edilmiş tasarım jQuery ile fonksiyonel hale getirilmiştir. Ancak yapının esnekliği sadece teknik bazda değil, kullanıcı arayüzü tarafında da bulunmaktadır. 3 ayrı şekilde boyutlandırmayı tek fonksiyon altından sunan IMGRID tamamıyla responsive olarak geliştirilmiştir.

Bütün işlemlerini client side olarak yürüten IMGRID’ın geliştirmeleri Adobewordpress tarafından versiyonlanarak devam edecektir. Şimdi biraz detaylar ve kullanım üzerine konuşalım. Ama öncesinde örneği test etmek isteyebilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Google Material Design Menu #2

Vatanay Özbeyli 1 Yorum CSS3, HTML5, jQuery

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

CSS ile Responsive Dropdown Menu

Vatanay Özbeyli 2 Yorum CSS3, HTML5

css-dropdown-responsive-menuSadece CSS kodlarıyla açılabilir (dropdown) ve mobil uyumlu menü hazırlanabilir mi? Birkaç sene öncesine kadar bu işi JavaScript desteği olmadan yapmak hayalden öteye geçemezdi. Ancak bugün, CSS3’ün gelişen tanımlarıyla web tarafında neredeyse herşey mümkün!

Ayrıca aç/kapa düğmesiyle bu menüyü taşınabilir cihazlara özel stilize de edebiliyoruz. Evet, yanlış duymadınız. Aç/kapa işlemini bile sıradan bir checkbox öğesini selector gibi kullanarak CSS ile hazırlıyoruz.

Bu makalemizde sadece CSS kodları yazarak responsive yapıda bir dropdown menü hazırlayacağız. Sadece kod tarafında değil, önyüzde de basitliğe yönelerek bu tasarımı yapacağız.

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

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

HTML5 ile Resimlere Before After

Vatanay Özbeyli Yorum yazın CSS3, HTML5

html5-resim-before-afterHTML5 ile resimlerinizin önceki ve sonraki hallerini gösterebilirsiniz. Bu işlemi range inputuyla süsleyerek kaydırma çubuğuyla before/after işlemi uygulayabiliyoruz.

Özellikle fotoğrafçılık ve fotoğraf manipülasyonu üzerine yayın yapan blog yazarları, bu makalemiz sizleri hedef alıyor. Makalenin devamına göz atmadan önce örneği görüntülemenizi öneririz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Responsive Akordiyon (Collapsible)

Vatanay Özbeyli 2 Yorum CSS3, HTML5, jQuery, Öne Çıkanlar

Bu makalemizde hem metin hem de görsel içeriklerinizi şık bir şekilde sunmanızı sağlayan akordiyon tasarımı hazırlayacağız. Bu yapı açılabilir/kapanabilir (collapsible) diye de isimlendirilmekte.

HTML5 elemanlarını CSS3 ve jQuery desteğiyle şekillendireceğimiz bu tasarım aynı zamanda liquid yapıda. Yani tüm taşınabilir cihazlara (responsive design) uyum gösteriyor.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

HTML5 ve CSS3 ile Resim Açıklamaları

Vatanay Özbeyli 3 Yorum CSS3, HTML5

css-html-hover

Bugün sizlerle HTML5 ile gelen figure ve figcaption tanımlarını CSS3‘ün animasyon öğeleriyle süsleyerek şık resim açıklamaları oluşturacağız. Bu işlemi daha önce, HTML5 öğeleri olmadan benzer yollarla “CSS ile SEO ve performans dostu harika resim açıklamaları” başlığı altında hazırlamıştık. Eski makalemizi güncellemektense bu süreçte gelişen teknolojinin nimetlerinden yararlanarak yenisini hazırlamaya karar verdik.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Eskizden Kodlamaya Web Tasarımı

Vatanay Özbeyli 2 Yorum CSS3, HTML5, Öne Çıkanlar

Eğlenceli bir makale ile yine sizlerleyiz. Bugün sizlerle deftere çizeceğimiz bir eskize hayat vereceğiz. Böylece web tasarımının en derinlerine dokunmuş olacağız. Biraz uzun soluklu olsa da gayet eğlenceli. Yukarıdaki gibi deftere karaladığımız tasarımları ilk Photoshop‘a, daha sonra da HTML ve CSS‘e dökeceğiz. Tabii bu işlemleri yaparken bütün bu teknolojilerin en son versiyonlarını ve en güncel tanımlarını kullanacağız. Herşey hazır olduğunda aşağıdakine benzer bir sonuç elde edeceğiz.

eskiz-web-tasarimi

Başlamaden önce malzemelerimizi hatırlayalım :

  • Cetvel
  • Kalem
  • Defter
  • Mac kullanıcıları için TextEdit
  • Windows kullanıcıları için Notepad

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS3 ile Animasyonlu Resim Geçişi

Vatanay Özbeyli 3 Yorum CSS3, HTML5

HTML5 ve CSS3 teknolojilerinin gelişimi ile birlikte önceleri JavaScript desteği olmadan yanından bile geçemediğimiz tasarımları artık kolayca hazırlayabiliyoruz. Özellikle CSS3‘ün animatif tanımları, tasarımın web tarafında slider, galeri ve türevi görsel bazlı öğeleri popüler kılmakta.

Bu yazımızda sadece CSS3’ün animation özelliğiyle bir resim geçişi tasarımı hazırlyacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku