CSS Gradient-Renk geçişi

Doğrusal renk geçişleri soldan sağa, yada yukarıdan aşağı geçiş yapmamızı sağlar.
Tarayıcılar için farklı kodlar yazmamız gerekebilir.

#renkGecisi{
background: -moz-linear-gradient(#fff, #f8b500); /* Firefox+ */
background: -webkit-linear-gradient(#fff,#f8b500); /* Chrome,Safari5*/
background: -o-linear-gradient(#fff,#f8b500); /* Opera */
background: -ms-linear-gradient(#fff,#f8b500); /* IE+ */
width:300px;
height:150px;
}
 

Renk geçişine yön verebiliriz.

background-image: linear-gradient(270deg,#fff,#f8b500);

Renk geçişlerinde saydamlık uygulayabiliriz.

background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);

Bir elemana birden fazla renk geçişi verebiliriz.

background-image: linear-gradient(left top, #FF9900, #FF0000, transparent),
-moz-linear-gradient(right top, #FF9900, #FF0000, transparent);

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir