HTML5 ile resimlerinizin önceki ve sonraki hallerini gösterebilirsiniz. Bu işlemi range inputuyla süsleyerek kaydırma çubuğuyla before/after işlemi uygulayabiliyoruz.
Özellikle fotoğrafçılık ve fotoğraf manipülasyonu üzerine yayın yapan blog yazarları, bu makalemiz sizleri hedef alıyor. Makalenin devamına göz atmadan önce örneği görüntülemenizi öneririz.
(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;)
Bu makalemizde hem metin hem de görsel içeriklerinizi şık bir şekilde sunmanızı sağlayan akordiyon tasarımı hazırlayacağız. Bu yapı açılabilir/kapanabilir (collapsible) diye de isimlendirilmekte.
HTML5 elemanlarını CSS3 ve jQuery desteğiyle şekillendireceğimiz bu tasarım aynı zamanda liquid yapıda. Yani tüm taşınabilir cihazlara (responsive design) uyum gösteriyor.
(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;)
Web tasarımının klasikleşmiş popup yapıları yerlerini modallara bıraktılar. Sayfa değişimine gerek kalmadan ve yeni sekme açmadan çalışan modal öğeleri web kullanıcılarına büyük kolaylıklar sağlamakta.
İnternette karşılaştığımız neredeyse tüm modal tasarımları da jQuery desteğiyle hazırlanmakta. Ancak gelişen teknolojiler yeni teknikleri de beraberinde getirmekte.
CSS3‘ün :checked selector tanımı sayesinde hiçbir JavaScript kütüphanesine ihtiyaç duymadan hem basit hem de performanslı modal yapısı oluşturabilirsiniz.
(daha&helliip;)
Web tasarımında yer alan en küçük tasarım tiplerinden olan Tooltip öğeleri aslında gözüktüğü kadar basit yapılı değiller. Birçok Tooltip eklentisi büyük bir JavaScript koduyla birlikte fonksiyonel bir hale bürünmekte. Peki ya bütün bu yapıyı minimalize etmek mümkün değil mi?
Adobewordpress sizler için gücünü CSS‘den alan bir Tooltip yapısı hazırladı.
(daha&helliip;)Karşınızda awTooltip
Adobewordpress alarak bir süre önce “Sticky Header” yapımı üzerine detaylı bir makale hazırlamıştık. Bugün de yine benzer bir yapı kullanarak kaydırma çubuğu yukarı sürüklendiğinde beliren bir header tasarlayacağı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;)
CSS3 ile web sayfanızda fareyle seçilmiş alanları bile stilize edebilirsiniz. Kütüphanemize eklenen selection tanımlaması Chrome 4.0, IE 9, Firefox 2.0 (-moz), Safari 3.1, Opera 9.6 ve üzeri tüm tarayıcılarda çalışmakta.
Web sayfanız eğer Adobewordpress gibi uzun yazılardan ve alıntılanması gereken içeriklerden oluşuyorsa siz de sitenizin “seçilen alan rengi” ile oynayın. (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!
Photoshop ile Yazılardan Portre Oluşturmak
Photoshop ile Metalik Yazı Efekti #2
Photoshop Çiçek Patternleri
Ders 2 : Bootstrap Grid (Izgara) Yapısı