Kali ini saya akan melanjutkan dari postingan saya kemarin, sekarang kita membuat gradient radial.kemarin kita sudah membuat gradient linear dan sekarang kita membahas tentang membuat gradient radial.langsung saja kita mulai ke contohnya.

CSS3 Gradient Radial

Radial Gradient - Evenly Spaced Color Stops



Secara default, bentuknyae lips, ukuran terjauh-sudut,dan posisi adalah pusat

Dan ini Kodenya: 
#grad {
  background: -webkit-radial-gradient(red, green, blue);
  background: -o-radial-gradient(red, green, blue); 
  background: -moz-radial-gradient(red, green, blue);
  background: radial-gradient(red, green, blue); 
}

Dan contoh lain
Sebuah gradien radial dengan warna berbeda berhenti spasi:

Radial Gradient - Differently Spaced Color Stops



Set Bentuk

Parameter bentuk mendefiniskan bentuk. Hal ini dapat mengambil lingkarang nilai atau elips. Nilai default adalah elips.
Contohnya:

Radial Gradient - Shapes

Ellipse (this is default):


Circle:


Dan ini kodenya: 
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(red, yellow, green); /* For Fx 3.6 to 15 */
    background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
}

#grad2 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(circle, red, yellow, green); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(circle, red, yellow, green); /* For Fx 3.6 to 15 */
    background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */
}


Penggunaan Kata kunci Ukuran Berbeda
Parameter Ukuran mendefinisikan ukuran gradien. Hal ini dapat mengambil empat nilai:


  • terdekat sisi
  • terjauh-side
  • terdekat-sudut
  • terjauh-sudut

Contohnya:

Radial Gradients - Use of different size keywords


closest-side:

farthest-side:

closest-corner:

farthest-corner (this is default):

Dan ini kodenya: 
#grad1 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
    background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}

#grad2 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
    background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}

#grad3 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
    background: radial-gradient(closest-corner at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}

#grad4 {
    height: 150px;
    width: 150px;
    background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
    background: radial-gradient(farthest-corner at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}
Dan itulah membuat gradient radial sederhana dari saya semoga bermanfaat dan jangan lupa mencobanya