Daha önce kolon yüksekliklerini eşitlemek için Aksak Kolonlar(Faux Column) yazımda bir çözüm önerisi vardı.

Bu çözümlere bir tane daha ekliyorum.

CSS Renk Geçişleri (Gradients) yazısında renk geçişlerinden bahsetmiştik. Renk geçişlerini tanımlarken genelde yüzdesel tanımlasak ta aslında piksel’de kullanabiliyoruz. Bu kullanım bize aksak kolonların çözümünü sağlıyor. Peki renk geçişi diyorsun ama bize tek renkli ardalan renkleri lazım diye sorarsanız. Renk geçişinde ilk rengin bitişi ile diğer renge geçişin olduğu yerleri aynı durma noktası yaparsak ardalan rengi tek renk olur. Örnekten daha iyi anlayacağız.

Yukarıdaki örnekte görüldüğü gibi sol kolon kesik kalıyor. Bunu düzeltmek için.

Dikkat edeceğimiz kod;

background-image linear-gradient(left, #ccc 284px, #fff 284px, #fff 100%)

Yukarıdaki kodlamada olduğu gibi değeri piksel cinsinden verdiğimiz gibi yüzde cinsinden de verebiliriz.

Diğer yöntemden farkı resim kullanmadan bu işi yapıyor olmamız. Buda bize esneklik sağlıyor. Bu yöntemin tek eksiği belki ie9 ve öncesi için desteğinin olmaması. Eğer müşteri çok ısrar ederse ie8 ve ie9 için resimli diğer yöntemi kullanabiliriz.

Kalın sağlıcakla.

Kaynaklar

Sublime Text'te dosya tipine göre hızlı erişim

Son haftalarda Visual Studio Code ile kod yazıyorum. Güzel yanları var ama Sublime Text'in hızını bulamadım. Henüz Sublime'a geri dönmüş ...… Devamını oku

Responsive design patterns principles

13 January 2017 tarihinde yayınlandı.

jQuery DOM manipülasyonu metotlarında callback kullanmak

12 January 2017 tarihinde yayınlandı.