5.00 / 1 oy

CSS ile gradient arka plan (background) yapmak

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:

css background color

Bootstrap sağolsun, bütün site tasarımları birbirinin aynısı oldu. Belli ki bu tasarımda bir dokunuşa ihtiyaç var.

Sonrası:

css gradient background color

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));

 

BasParmak

08.02.2020 12:23

Bu soru henüz yanıtlanmamış.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
CSS ile gradient arka plan (background) yapmak

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.