CSS3 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.
(daha&helliip;)
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.
(daha&helliip;)
Sadece CSS3‘ün geçiş efektlerini ve Font Awesome’ın şık ikonlarını kullarak etkileyici butonlar tasarlamak mümkün. Adobewordpress, üzerlerine gelince istediğiniz yönde animasyon geçişleri yapan bu butonları olabildiğince basit ve performanslı olarak sizler için hazırladı.
(daha&helliip;)
Apple‘ı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.
Bu dersimizde Photoshop ile 3 boyutlu yuvarlak butonlar hazırlıyoruz.
(daha&helliip;)
HTML5‘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;)
Merhaba arkadaşlar. Bu makalemde etkileyici bir Twitter sosyal ağ buttonu hazırlayacağız. Hiç vakit kaybetmeden CSS3 ve HTML5 uyumlu buttonumuzu hazırlamaya başlayalım.
(daha&helliip;)
WordPress 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.
(daha&helliip;)
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.
(daha&helliip;)“Bu makalede hazırlayacağımız buttonlar performans-tasarım açısından en iyiler listemde.”
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.
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!
(daha&helliip;)
WordPress Kullanıcılarının En Sık Karşılaştığı Hatalar ve Çözümleri
Sitenize Kolayca Slider Ekleyin
Photoshop’u Türkçe Yapma, Türkçeleştirme
Kolayca fotoğraflarınızın kalitesini arttırın!
CSS Renk İsimleri
Yukarı Scroll Edildiğinde Gözüken Header
CSS ve jQuery ile Dönen Menü
Photoshop ile Mavi Parçacıklar Efekti
Photoshop ile Neon Yazı Efekti