İçeriği dolu dolu olan sayfalarda footer her zaman olması gerektiği gibi en alttadır ancak içeriği az olan bir sayfada işler değişebilir. En altta görmek istediğimiz footer’ı, sayfanın ortasında görebiliriz ki bu da can sıkıcı olabilir.
Bahsettiğim konu ciddi bir problem veya sorun değil. Bu yazı, sadece benim gibi ince işçilikle çalışan insanlara çözüm önerisidir.
CSS3′ün getirdiği en güzel özelliklerden biridir kendisi. Bildiğimiz gibi; Bir stilden başka bir stile geçerken, geçişin efektli olmasını sağlar.
transition doğru kullanılmadığında bu efektler yarım kalır (ki genelde yarım kaldığını görüyorum).
Amacım transform: skewX(); özelliğini kullanarak chrome tab ekleme butonunu yapmaktı. “Acaba sekme’yi yapabilir miyim ki ?” ile devam etti ve yaptım. “Madem bunları yaptım şurasını da yapayım”, “dur şunu da ekleyeyim” diyerek devam eden iç ses, sonuç olarak google chrome yapmama neden oldu.
Satır satır kod yazarak anlatmak yerine, kodları yazdığım çalışma ortamının linkini veriyorum.
Bilirsiniz ki bir tasarımcı için dribbble davetiyesi bulmak, bir çocuğun ilk defa bisikleti olması gibi bir şeydir. Bu nedenle, davetiyeye sahip olacak kişi çalışmalarıyla gerçekten bunu hak etmiş biri olsun istiyorum.
Dribbble davetiyesi isteyen kişilerin, çalışmalarını sergilediği portfolyo adreslerini yorum olarak bu konunun altına yazmasını rica ediyorum.
Liffect, listelerinizi etkileyici efektlerle sunmanızı sağlayacak, hazır kod oluşturan bir uygulamadır.
Geliştiricilerin neredeyse hepsi jQuery UI için pek iyi şeyler söylemez. Ama işimize yarayacak kısmını alıp kullanırsak eğer, bence hayat kurtaracaktır.
jQuery kütüphanesinin, kodlanan bütün web sayfalarının olmazsa olmazı olduğu bir gerçek. Hal böyle olunca jQuery’ye makyaj malzemesi jQuery UI’yi kullanmak hiç de sorun olmayacaktır.
Yapacağımız örneğe gelirsek, ürünlerimizin herhangi birini tutup sepete atacağız. Eklenen ürün daha önce sepette varsa, adetini arttıracağız.
Bittiğinde çalışacak hali bu şekilde olacaktır.
-prefix-free, bütün tarayıcılarda ön eksiz (örn: -webkit- olmadan) css özelliklerini kullanmamızı sağlar. Arka planda çalışan bu eklenti, hem zamandan kar etmenizi sağlar hem de gereksiz iş yükünden (amelelikten) kurtarır.
div.box:nth-child(1) {
animation-delay: .2s;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-o-animation-delay: .2s;
}yerine
div.box:nth-child(1) {
animation-delay: .2s;
}yazmak yeterli olsa ve bütün taraycılarda çalışsa nasıl olur ?
Bu artık mümkün. karşınızda prefixfree.js
Her arayüz geliştirici, standartlara uygun biçimde hiyerarşik kod yazmaya çalışsa da, yazdığı kodu arama motorlarına beğendiremez.
Herkes elindeki veriyi ekrana basmak için farklı farklı (html) etiketler kullanır. Bir sitede ürün açıklamasını x geliştirici p etiketi içine yazarken, başka bir sitede ürün açıklamasını y geliştirici div etiketi ile göstermiş olabilir. Bu durumda da, yapılan arama sonucundan ne kullanıcı ne de sonuçları istediği gibi gösteremeyen arama motoru memnundur.
Arama motorlarının siteleri daha düzgün şekilde anlayıp veri tabanına kaydedebilmesi için, bir standarda ihtiyaç duyulmuş ve bu amaçla bir araya gelinerek schema.org kurulmuştur.
Chrome Dev. Tools penceresindeki kod renklerinden sıkılmadınız mı? Farklı temalar kullanmaya veya zevkinize göre renklendirmeye ne dersiniz? Evet, artık bu mümkün.
Chrome geliştiricileri, biz geliştiricilere, tarayıcının görsel ayarlarını özelleştirebilmemiz için imkan sundular. Artık tek bir css dosyasıyla, tarayıcının css değerlerine müdahale edebiliyoruz.
Bir sitenin css dosyasına değişiklik yaptığınızı düşünün. İşte tam olarak böyle bir şey. Yani tarayıcının arayüzünü site gibi düşünüp, arayüzde gördüğümüz elemanların değerleriyle oynayabiliyoruz.
Özelikle yanyana ürün listelemesi yaparken, ürünlerin satır sonundaki elemanında gereksiz margin boşluğu kalır.
Bunun çözümü için video da iki farklı yöntem anlattım.
nth:child() seçicisini kullanarak