Bir sitenin header kısmında ufak bir dokunuşa ihtiyacım vardı, nasıl yapılır diye bakınırken aklıma arka planı gradient hale getirmek geldi. Hemen bir before-after yaparak aradaki devasa farkı görmenizi sağlıyorum ve arka plan rengi üzerine eklediğim tek satırlık css kodu ile bu arka plan renk geçişini nasıl yapabildiğimi paylaşıyorum.
Öncesi:
Bootstrap sağolsun, bütün site tasarımları birbirinin aynısı oldu. Belli ki bu tasarımda bir dokunuşa ihtiyaç var.
Sonrası:
Minik dokunuşlar çok şeyi değiştirir. Header kısmında sol taraftan sağ tarafa doğru doğrusal bir renk geçişi sağlamış olduk. Bunun için bu tasarımdaki topheader alanına eklediğim tek satırlık css gradient geçiş kodu aşağıdaki gibidir:
background-image: linear-gradient(to right, #5d7227, #203f15);
Bu css kodu ile soldan sağa doğrusal geçişli bir gradient renk değişimi elde ettik. Tarayıcı uyumluluğu açısından aşağıdaki webkit css kodunu da eklemenizi tavsiye ederim.
background-image: -webkit-gradient(linear, left top, right top, from(#5d7227), to(#203f15));