CSS ile 3D Buton

css3DbuttonCSS3 ile gelen perspektif tanımları sayesinde çok boyutlu tasarımları web tarafına aktarmak fazlasıyla kolaylaştı.

Biz de CSS’in perspective tanımı ile alakalı konuşmaya devam ediyoruz. Bugün sizlerle birlikte, üzerine gelindiğinde arkaya doğru yaslanan bir buton tasarımı hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


CSS ile File Input Tasarımı

css-file-input-designWebkit 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

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

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

HTML5 ile Ne Değişti?

HTML5HTML5‘in ayak sesleri duyulduğunda çok sert bir geçiş sürecinin bizi beklediğiniz düşünmüştük. Fakat korkulan olmadı. Eski elemanlara sağlanan destek yavaşça kesildi ve HTML5’in yenilikleri yerlerini teker teker aldı.

Bu makalemizde HTML5’in beraberinde getirdiği elemanları ve tarihin tozlu sayfalarına gömülecek olan eski kod birimlerini konuşacağız.

İşte karşınızda ilk ve tek tam liste! (daha&helliip;)

Devamını Oku

CSS3 ile Sosyal Ağ Kutucuğu

CSS ile Social Button HazırlamaWordPress ve türevi web sayfaları için bir çok sosyal ağ buttonu mevcut. Bunları daha önce eklentiler kategorisi altında ele almıştık.

Şimdi ise CSS3 ve HTML kodları kullanarak kendi sosyal ağ buttonlarımızı hazırlayacağız. Örnekte Twitter, Facebook ve Google Plus için buttonlar bulunmakta. İstek dahilinde çoğaltılabilmesi gayet basit.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Basılabilen 3 Boyutlu Buttonlar


CSS ile birçok button hazırladık. Fakat yukarıda gördükleriniz basılma hissiyatını en çok verenler.

Box-Shadow ile hem 3 boyut hem de basılma efekti oluşturacağız. Yani buttonu tasarlarken bir yandan da hover için alt yapı oluşturmuş oluyoruz. Bu şu demek oluyor; 50% daha hızlı yüklenen buttonlar ve aynı oranda artan performans.

“Bu makalede hazırlayacağımız buttonlar performans-tasarım açısından en iyiler listemde.”

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

HTML5 ve CSS3 ile Button Örnekleri

Daha önceki yazılarımda HTML5’in yeni elemanlarını tanımıştık. Şimdi onlardan birini, aside’ı kullanarak birkaç button hazırlayalım.

Beraberinde CSS3 ile aramıza katılan çerçeve özgünleştirme özelliklerini de kullanacağız. Ve tabiki :before :after bölümleri ile objelerimizin sol ve sağ taraflarında farklı farklı stiller oluşturacağız.

Aside nasıl kullanılır?

HTML 5 offers a new element to mark additional information that can enhance an article but isn’t necessarily key to understanding it.

Yukarıda da anlatıldığı aside çeşitli metinlere destek amaçlı oluşturulabilecek küçük anlatımlardır. Yazının altında duran alıntı metinler gibi olduğu söylenebilir. Kullanılması zorunlu değildir fakat uzun makalelerde anlaşılabilirliğin arttırılması için tavsiye edilir. Biz ise yeni kod birimini button olarak kullanacağız. HTML5’in temelinde aside’ın button işlevine dair bir anlatım yok. Fakat HTML5’in sunduğu en büyük yenilik özgürlük!

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku