Web tasarımının iskeleti HTML kodları ise bu yapıyı saran ve ayakta tutan kas dokuya da CSS desek pek yanlış olmaz herhalde. Bizler de bu organizmayı daha anlaşılır kılmak için işin web tarafında, tasarımın temelini oluşturan CSS kodları üzerine açıklayıcı makaleler yayınlıyoruz.
Önceleri sadece rötuşun bir parçası olan CSS artık yeni tanımlamaları sayesinde fonksiyoneliteyi de beraberinde getiriyor.
CSS gelişimini sürdüredursun, gelin bizler de 15 soruda CSS bilgimizi hızlıca sınıyalım.
Bu dersimizde sadece CSS3 tanımlarını kullanarak üzerine gelindiğinde parlayan görseller oluşturacağız. Bu işlemi yaparken efekti barındıracak bir çerçeve ve beraberinde de küçük çaplı bir animasyon tanımı hazırlayacağız.
Örneği incelediyseniz derse başlayalım.
(daha&helliip;)
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;)
IMGRID, 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.
Web sayfanızda kendi hazırladığınız bir resmi fare imleci olarak kullanmak ister misiniz? CSS’in cursor tanımı ile bunu yapmak mümkün. Hem de gayet basit.
Detaylar için makalemizin devamına göz atabilirsiniz. (daha&helliip;)
Bu makalemizde CSS ve jQuery desteğiyle farenin sağ tuşuna basıldığında açılan bir menü tasarımı yapacağız. Bu menüyü diğerlerinden ayıran özelliği de ekrana eğik olarak gelmesi.
Bir zamanlar tipografik animasyonlarda bol bol gördüğümüz ‘öğeleri çevirerek kadraja alma’ tekniği temel anlamıyla bu tasarımda da yer almakta. Gelişen web teknolojileri sayesinde de bu tasarımı web tarafında oluşturmak gayet basit.
Örneği görüntüleyerek başlayabilirsiniz.
Google‘ı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!
(daha&helliip;)
Material Design odaklı tasarımlar üzerine konuşmaya devam ediyoruz. Bugün hazırlayacağımız örnekte statik yapıdaki text inputlarını animatif hale çevireceğiz. CSS3 ve jQuery‘nin hünerlerinden yararlanarak hazırlayacağımız bu şık tasarım sıkıcı hale dönüşebilen formlarınıza renk katacak!
Örneği görüntüleyerek başlayabilirsiniz.
(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 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.
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!
CSS ile Form Tasarımı
iPhone’da “Mesajlara Girilmiyor” hatası nasıl çözülür?
Photoshop ile Yazıları Resimle Kaplama
After Effects Ders 1 : Giriş