CSS3‘ün geliştirilen background tanımı sayesinde bir öğeye birden fazla arkaplan tanımlıyabiliyoruz. Bu bize özellikle transparan – png ve gif- görseller kullanmamız halinde çok büyük bir oyun sahası yaratıyor. Gelin bu tekniği kullanarak otoyolda ilerleyen bir araç animasyonu oluşturalım.
Bugün sizlerle sıradan bir div elemanına atayacağımız iki arkaplan ile küçük çaplı bir animasyon hazırlayacağız.
(daha&helliip;)
CSS3 ile tasarlanmış ilgi çekici yapımları incelemeye devam ediyoruz. Bugün ‘Eclipse’, yani tutulma isimli çalışmayı sizlerle paylaşıyor olacağız.
Yuvarlak cisimlere verilen beyaz, sarı, kahverengi ve kırmızı gölgelerin hareket ettirilmesi sonucunda oluşan bu teknik hem çok yaratıcı hem de çok şık. Evet, büyük ihtimal her web sayfasında yer alabilecek türden bir tasarım değil ama CSS ve biraz pratik zeka ile web tarafında neler yapılabileceğini gösteren örnek bir çalışma.
Örneği görüntüleyerek başlayalım.
(daha&helliip;)
Birçok tarayıcı tarafından desteklenmeye başlayan radial ve linear repeating-gradient (tekrarlanan spiral ve çizgisel arkaplan) tanımlaması sayesinde görsel formattaki çizgisel planları 1 satır CSS koduyla yapabiliyoruz.
CSS3 ile gelen geliştirilmiş gradient desteği, bu işlemi PNG ve GIF görseller generate ederek yapan birçok web girişimini de tarihin tozlu sayfalarına işledi.
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 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.
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;)Yazının bulunduğu günden beri kullanılan ayraçlar web tarafında CSS ile kolaylıkla hazırlanabilmekte.
Bu dersimizde CSS3’ün :after odaklı tanımlamalarıyla şık bir yazı ayıracı hazırlayacağız.
(daha&helliip;)
jQuery‘nin scrollTop tanımı ile birlikte web sayfalarındaki kaydırma çubuğununun seviyesini numerik olarak yakalayabiliyoruz. Hal böyleyken bu yapıyı niye CSS3 ile ilişkilendirip şık tasarımlar hazırlamayalım ki?
Bu dersimizde aşağıya scroll edildikçe büyüyen ve bulanıklaşan arkaplan tasarımı yapacağız. İşlevsellik yükünü jQuery, tasarım yükünü de CSS sırtlayacak. Hazırsanız başlayalım.
(daha&helliip;)
Google‘ın ses getiren tasarım trendi Material Design üzerine konuşmaya devam ediyoruz. Bugün Bennett Feely tarafından CSS ile hazırlanan menü örneğini sizlerle paylaşacağız.
Bennett’in örneği Material Design’ın estetik ve animatif tarafını başarılı bir şekilde yansıtmakta.
Web öğelerinin sadece spesifik kısımlarını CSS ile göstermemizi sağlayan clip-path tanımı da bu tasarımda faydalı bir şekilde kullanılmakta.
Eğer hazırsanız başlayalım.
(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
CSSGram ile Resimlerinize Instagram Filtresi Ekleyin
AdSense’in Yeni Reklam Birimi : Eşleştirilen İçerik (Matched Content)
Photoshop ile Arkaplan Temizleme (Dekupe) ve Fırça Yapımı
Photoshop ile Terk Edilmiş ve Yıkılmış Şehir Efekti