Radyal Renk Geçişi 4

Çoklu Radyal Renk Geçişi Kullanımı

by fatihhayri

HTML

<div id="renkGecisi">

</div>

CSS

#renkGecisi{
    background-image: -moz-radial-gradient(20% 50%, circle contain, #FF0000, #FF9900 95%, transparent), 
    -moz-radial-gradient(50% 50%, circle contain, #FF0000, #FF9900 95%, transparent),
    -moz-radial-gradient(80% 50%,circle contain, #FF0000, #FF9900 95%,transparent); /* FF3.6+ */
    background-image:-webkit-gradient(radial, 20% 50%, 0, 20% 50%, 50, from(#FF0000), colorstop(95%, #FF9900), to(transparent)),
    -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, from(#FF0000), colorstop(95%, #FF9900), to(transparent)),
    -webkit-gradient(radial, 80% 50%, 0, 80% 50%, 50, from(#FF0000), colorstop(95%, #FF9900), to(transparent)); /* Chrome,Safari4+ */
    background-image: -webkit-radial-gradient(20% 50%, circle contain, #FF0000, #FF9900 95%, transparent), 
    -webkit-radial-gradient(50% 50%, circle contain, #FF0000, #FF9900 95%, transparent),
    -webkit-radial-gradient(80% 50%,circle contain, #FF0000, #FF9900 95%,transparent); /* Chrome10+,Safari5.1+ */    
    background-image: radial-gradient(20% 50%, circle contain, #FF0000, #FF9900 95%, transparent), 
    radial-gradient(50% 50%, circle contain, #FF0000, #FF9900 95%, transparent),
    radial-gradient(80% 50%,circle contain, #FF0000, #FF9900 95%,transparent); /* W3C */
    width:500px;
    height:150px;
}