Facebook‘un kendine has tasarımının en dikkat çekici öğelerinden biri de ‘yükleniyor’ animasyonları. Spinner ve loader diye de tanımlanan bu öğeler CSS ile kolaylıkla hazırlanabilir.
Bu makalemizde klasik bir listeleme (ul) yapısını Facebook’un spinner öğesine çevireceğiz ve bütün bu işlemi sadece birkaç satır CSS kodu ile yapacağız.
(daha&helliip;)
Birkaç hünerli ve hileli CSS satırı ile web sayfanızdaki yazıların üzerini resim ile kaplayabilirsiniz. Daha önce paylaştığımız “CSS ile Yazı Arka Planı : text-fill-color” isimli makalede bu işlemi yapmıştık.
Gelin şimdi bu örneği biraz daha şık hale getirelim. İşin içerisine birkaç satır jQuery kodu ekleyerek yazıya kapladığımız arkaplanın fare imlecini takip etmesini sağlayabiliriz.
(daha&helliip;)
CSS ile artık birçok resim efekti ve filtresi hazırlayabiliyoruz. Daha önceleri filtre efektleri üzerine uzun uzun konuşmuştuk.
Bunların yanısıra perdeleme ve :after seçimlerinin farklı kullanımlarıyla da ilgi çekici tasarımlar oluşturmak mümkün.
Bu dersimizde resimlerin üzerine şık bir gradient efekti uygulayacağız ve bunu sadece CSS ile yapacağız.
(daha&helliip;)
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.
(daha&helliip;)Merhaba arkadaşlar.
Daha önce öğrendiğimiz CSS gölge satırlarını bugün detaylandırıyoruz. Çıkış noktamız yine box-shadow, fakat bu sefer gölgelerde bile boyutlandırma işlemi yapacağız.
Bahsettiğimiz gibi ilk gölgelendirme yazımızda (görüntülemek için tıklayın) temel teknikleri konuşmuştuk. Sonrasında box-shadow kod birimi ile çoklu border sistemini öğrenmiştik. Aslına bakarsanız gölgelendirme üzerine birçok yazımız mevcut. Makalenin en altındaki ilgili konular alanına göz atabilirsiniz.
Şimdi yavaş yavaş başlayalım.
(daha&helliip;)
Klasik altı çizgili yazıları animatif hale getirmeye ne dersiniz? CSS3’ün after tanımlamasıyla birlikte bu işlemi yapmak mümkün.
Bu dersimizde linklerimiz için şık bir hover efekti hazırlayacağız.
(daha&helliip;)
Günümüz tasarımlarında uzun formlar wizardlar sayesinde adımlara bölünüyor, kendi içerisinde kategorize ediliyor ve basitleştiriliyor. Ancak wizard mantığı kullanım kolaylığı sunuyor gibi gözükse de aslında süreyi uzatıyor. Burada anahtar kelime ve çıkış noktası “dikkati yönetmek” olarak gösterilebilir. Öyleyse kullanıcıya uzun formların her bir inputuyla etkileşime geçen tasarımlar sunmak işe yarayabilir.
Bu makalemizde her form öğesiyle birlikte renk değiştiren arkaplan hazırlayacağız. Renklerimizi de Google‘ın yeni ve popüler tasarım trendi Material Design‘dan seçeceğiz.
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.
Google‘ın ses getiren tasarım trendi Material Design ile birlikte görmeye alıştığımız dalgalanma efektini CSS ve jQuery ile hazırlamak mümkün. Bu şık efekt kullanıcıya tıklama hissiyatını vermenin yeni yolu. Özellikle web sayfanızın mobil ekranlarında kullanmanızı önerebileceğimiz bu tasarımın örneğini aşağıdan görüntüleyebilirsiniz.
Bu dersimizde su dalgalanmasını andıran bir tıklama efekti hazırlayacağız.
(daha&helliip;)
Haftada bir düzenli olarak “Slider yapımı hakkında daha fazla konu yazın!” şeklinde tehditkar mailler alıyoruz.
Hal böyle olunca oturup çalıştık, sizler için şık ve kolay hazırlanabilir bir slider tasarladık. Sadece CSS ile çalışan bu slider benzerlerinin aksine yazı ve üzerine gelince durma desteği de sunuyor. Böylece sıradan bir slider için web sayfamıza yüzlerce satır JavaScript yükü bindirmemiş oluyoruz.
Bu makalemizde sizlere CSS3‘ün animation tanımı sayesinde kusursuz bir slider hazırlayacağız.
(daha&helliip;)
Sitenize Kolayca Slider Ekleyin
CSS Renk İsimleri
CSS ile Üzerine Gelince Büyüyen Resimler
Sadece CSS ile Slider Yapımı
CSS ile üzerine gelince açılan kutucuklar oluşturun!
CSS3 ve jQuery ile Google Play Tab
WordPress SEO by Yoast Türkçe Derslerle AdobeWordPress’te!
Preloader.js ile Sayfalarınıza ‘Yükleniyor’ Barı
Ders 3 : Bootstrap İkon Kullanımı