Gradient Menggunakan CSS3 Indah Sekali

gradien-css3-kodjodesign

fitur yang ada di css3 yaitu gadien langsung aja mulai Cekidot!

1. Linear Gradient

2. Radial Gradient

3. Color Stop

4. Repeating Linear dan Repeating Radial Gradient

 

Ok Kita bahas Satu-satu

1. Sintax Linear Gradient

DEMO LINEAR GRADIEN

#grad1
{
height:100px;
background: -webkit-linear-gradient(0deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(0deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(0deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, red, blue); /* Standard syntax (must be last) */
}

2. Sintax Radial Gradient

DEMO RADIAL GRADIENT

#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) */
}

3. Sintax Color Stop

DEMO COLOR STOP

#grad1
{
height:200px;
background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* For Firefox 3.6 to 15 */
background: linear-gradient(red 10%, green 85%, blue 90%); /* Standard syntax (must be last) */
}

4.Sintax Repeating Linear dan Repeating Radial Gradient

DEMO REPEATING LINEAR

#grad1
{
height:200px;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Safari 5.1 to 6.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Opera 11.1 to 12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Firefox 3.6 to 15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Standard syntax (must be last) */
}

Leave a Reply