html

Adobewordpress gururla sunar : “iPhone Mesajlar Ekranı”

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

iphone-mesajlar-css-html
Bugün sizlerle birlikte çok şık ve eğlenceli bir mesaj panosu tasarımı yapacağız.

iPhone‘un şık ve kullanışlı mesajlaşma ekranı hem sadeliği hem de kolay kullanılabilir olması sebebiyle izini sürebileceğimiz başarılı tasarımlardan birisi. Peki bu yapıyı web ortamına nasıl aktaracağız? HTML5 ve CSS3‘ün güçlendirilmiş yeni teknikleri ve jQuery‘nin fonksiyonelitesiyle bu iş sandığınız kadar zor olmayabilir.

Adobewordpress gururla sunar : Karşınızda responsive yapıdaki iPhone mesajlar ekranı tasarımı

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


10 Ücretsiz Material Design HTML Template

Vatanay Özbeyli Yorum yazın Listeler, Öne Çıkanlar

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

Sayfalar: 1 2 3 4 5 6 7 8 9 10

CodePen’de Yapılmış En Etkileyici 10 Çalışma

Vatanay Özbeyli 2 Yorum Haftanın İlham Kaynakları, Öne Çıkanlar

codepen-logoAdobewordpress ailesi olarak CodePen‘i çok seviyoruz ve sık sık örneklerimizi orada oluşturuyoruz. Biz web geliştiriciler için hazırlanmış interaktif bir oyun sahası olan CodePen’de milyonlarca fikri barındırmakta. Ama bunlardan bazıları var ki yaratıcılık ve teknik bilginin birlikte tavan yaptığında ne sonuçlar doğurabileceğini bize gösteriyor.

Bugün sizler için CodePen’in en dikkat çekici 10 çalışmasını derledik. (daha&helliip;)

Devamını Oku

CSS ile iOS Benzeri AÇ/KAPA Düğmesi

Vatanay Özbeyli 1 Yorum CSS3

ios8-switch-cssApple‘ın mobil cihazları için geliştirdiği iOS8‘in bol bol konuşulduğu bugünlerde Adobewordpress olarak biz de işletim sisteminin ayar ekranlarında kullanılan aç/kapa (switch) tasarımını CSS ile hazırlayacağız. Daha önceki checkbox tasarımlarımızda olduğu gibi bunda da input öğesini görünmez kılıp etrafına gizlediğimiz öğelerle uygulamak istediğimiz tasarımı çıkarmaya çalışacağız.

Bu makalemizde sadece CSS ile checkboxlarımızı stilize edeceğiz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Mobil Menü

Vatanay Özbeyli 8 Yorum CSS3, Öne Çıkanlar

Özellikle mobil uygulamalarda gördüğümüz açılıp kapatılabilir menü örnekleri artık web tarafında da fazlasıyla kullanılıyor. Minimalist tasarımın vazgeçilmezi haline gelen bu yapı, genellikle responsive web sitelerin mobil versiyonlarında navigasyon yükünü sırtlıyor.

Bu makalemizde CSS ve biraz da jQuery desteğiyle açılıp kapatılabilir şık bir menü tasarlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Duyarlı Altı Çizgili Yazı

Vatanay Özbeyli Yorum yazın CSS3, HTML5

CSS UnderlineHTML serüvenine başladığımızda kullandığımız bold, underline ve italic gibi tanımlamalar CSS‘in gelişiyle değişime uğradı. Daha önceleri <u></u> elemanı ile yaptığımız altı çizgili yazılar artık CSS’in text-decoration:underline tanımlamasıyla yapılır hale gelmişti. İşlem yapısıyla birlikte yelpazemiz de genişledi. Bu tip yazı elemanlarının CSS’in kontrolü ile gerçekleşir olması, özgünleştirme ayarlarını da beraberinde getirdi.

Bu makalemizde sizlere altı çizgili yazının web üzerindeki son evriminden bahsedeceğiz. Satır çizgisini geçen (kuyruklu, örn: y, ğ, p, j, g) harfleri gizlenmiş bir gölge ile imkansız gibi gözüken tipografik yapıya çevireceğiz. (daha&helliip;)

Devamını Oku

CSS ile SEO ve performans dostu harika resim açıklamaları

Vatanay Özbeyli 3 Yorum CSS3, HTML5, SEO

Merhaba arkadaşlar. Bu makalemizde görsel açıdan olduğu gibi performans ve SEO açısından da inanılmaz başarılı olan bir resim efektini anlatacağız.

Okumakta olduğunuz makalenin türevleri olabilir, fakat tarafımızdan hazırlanan bu CSS kodu yerli ve yabancı kaynaklarda bulabileceğinizin en iyilerinden biri. Neden mi?

  1. Sadece tek division kullanıyor.
  2. Köprü bağlantılar a block veya onclick ile değil, klasik href türünde. Böylece ziyaretçinin browserinin java desteği kapalı olsa bile tam performans ile çalışmakta.
  3. Yukarıda dediğim gibi, kod satırlarının içersinde JS yok. Bu yüzden hızlı ve her kullanıcı tarafından görülebilir.
  4. CSS3 ‘ün yeni teknikleriyle süslü.
  5. Yazılar paragraf içinde, yani tam anlamıyla açıklama metinleri oldular. Böylece arama motorlarının botları görsel arandığında <p> içindeki geniş açıklama metnini yayınlar. Kısaca SEO dostu diyebiliriz.
  6. Yazılar seçilerek kopyalanamaz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Inline ne demektir?

Vatanay Özbeyli 1 Yorum CSS3, Diğer Konular & İpuçları, HTML5, Tasarım Unsurları

Web tasarımında sık sık karşınıza çıkabilecek bir diğer tabir de inline olacaktır. Inline 2 anlama sahiptir. Her ikisi de benzer özellikler gösterir.

CSS‘de display:inline şeklinde atanabilen özellik, öğenin block yapısından çıkmasına, bağlı olduğu kod satırındaki diğer öğelerle beraber gözükmesine sebep olur.

HTML‘de ise <style> ve <script> gibi elemanlar sayfa-içi tanımlamalar da inline CSS ve JS olarak gösterilirler.

Şimdi konuyu biraz detaylandıralım. (daha&helliip;)

Devamını Oku