Взгляд на CSS3 градиент Перейти к статье наXoZblog.ru
div { /*Основной синтаксис*/ background-image: linear-gradient(top, #ff5a00, #FFAE00); /*Кроссбраузерность*/ background-image: -webkit-linear-gradient(top, #ff5a00, #FFAE00); background-image: -moz-linear-gradient(top, #ff5a00, #FFAE00); background-image: -o-linear-gradient(top, #ff5a00, #FFAE00); background-image: -ms-linear-gradient(top, #ff5a00, #FFAE00); }
div { /*Основной синтаксис*/ background-image: linear-gradient(45deg, #ff5a00, #FFAE00); /*Кроссбраузерность*/ background-image: -webkit-linear-gradient(45deg, #ff5a00, #FFAE00); background-image: -moz-linear-gradient(45deg, #ff5a00, #FFAE00); background-image: -o-linear-gradient(45deg, #ff5a00, #FFAE00); background-image: -ms-linear-gradient(45deg, #ff5a00, #FFAE00); }
div { /*Основной синтаксис*/ background-image: linear-gradient(top, #ff5a00 50%, #FFAE00 50%); /*Кроссбраузерность*/ background-image: -webkit-linear-gradient(top, #ff5a00 50%, #FFAE00 50%); background-image: -moz-linear-gradient(top, #ff5a00 50%, #FFAE00 50%); background-image: -o-linear-gradient(top, #ff5a00 50%, #FFAE00 50%); background-image: -ms-linear-gradient(top, #ff5a00 50%, #FFAE00 50%); }
div { /*Основной синтаксис*/ background: radial-gradient(circle, #FFF, #FFAE00); /*Кроссбраузерность*/ background-image: -moz-radial-gradient(circle, #FFF, #FFAE00); background-image: -webkit-radial-gradient(circle, #FFF, #FFAE00); background-image: -o-radial-gradient(circle, #FFF, #FFAE00); background-image: -ms-radial-gradient(circle, #FFF, #FFAE00); }
div { /*Основной синтаксис*/ background: radial-gradient(230px 50px, ellipse closest-side, white, blue); /*Кроссбраузерность*/ background-image: -moz-radial-gradient(230px 50px, ellipse closest-side, white, blue); background-image: -webkit-radial-gradient(230px 50px, ellipse closest-side, white, blue); background-image: -o-radial-gradient(230px 50px, ellipse closest-side, white, blue); background-image: -ms-radial-gradient(230px 50px, ellipse closest-side, white, blue); }
div { /*Основной синтаксис*/ background: radial-gradient(230px 50px, ellipse farthest-side, white, blue); /*Кроссбраузерность*/ background-image: -moz-radial-gradient(230px 50px, ellipse farthest-side, white, blue); background-image: -webkit-radial-gradient(230px 50px, ellipse farthest-side, white, blue); background-image: -o-radial-gradient(230px 50px, ellipse farthest-side, white, blue); background-image: -ms-radial-gradient(230px 50px, ellipse farthest-side, white, blue); }
div { /*Основной синтаксис*/ background-image: linear-gradient(top, rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%); /*Кроссбраузерность*/ background-image: -moz-linear-gradient(top, rgba(255,90,0,0.5) 0%, rgba(255,174,0,0.5) 100%); background-image: -webkit-linear-gradient(top, rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%); background-image: -o-linear-gradient(top, rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%); background-image: -ms-linear-gradient(top, rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%); }
div { /*Основной синтаксис*/ background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); /*Кроссбраузерность*/ background-image: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background-image: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background-image: -ms-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); }
div { /*Основной синтаксис*/ background-image: repeating-radial-gradient(red, blue 20px, red 40px); /*Кроссбраузерность*/ background-image: -moz-repeating-radial-gradient(red, blue 20px, red 40px); background-image: -webkit-repeating-radial-gradient(red, blue 20px, red 40px); background-image: -o-repeating-radial-gradient(red, blue 20px, red 40px); background-image: -ms-repeating-radial-gradient(red, blue 20px, red 40px); }