Градиенты на CSS

Во всех браузерах будет работать код, где цвет изменяется от белого к черному:
background-image: -moz-linear-gradient(#ffffff, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000); 
background-image: -o-linear-gradient(#ffffff,#000000);

И горизонтально:
background-image: -moz-linear-gradient(0deg,#ffffff, #000000);
background-image: -webkit-gradient(linear, left bottom, right top, from(#ffffff), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000); 
background-image: -o-linear-gradient(left,#ffffff,#000000);

В дальнейшем я не буду затрагивать фильтр IE.

Для автоматизированного составления кода удобно использовать этот инструмент.

Наведение курсора мышки на белые прямоугольники позволит понять разницу между значениями свойства.

Линейный градиент linear-gradient

Синтаксис линейного градиента:
background-image: -XXX-linear-gradient(позиция, цвет %, цвет %);
  • два цвета
    Один цвет находится сверху, другой снизу, а между ними переходные оттенки.

background: -moz-linear-gradient(#FFF, #000);
background: -ms-linear-gradient(#FFF, #000);
background: -o-linear-gradient(#FFF, #000);
background: -webkit-linear-gradient(#FFF, #000);
  • три цвета
    Перемешиваются только два рядом стоящих цвета. Белый и голубой не объединяются.

background: -moz-linear-gradient(#FFF, #000, #42aaff);
background: -ms-linear-gradient(#FFF, #000, #42aaff);
background: -o-linear-gradient(#FFF, #000, #42aaff);
background: -webkit-linear-gradient(#FFF, #000, #42aaff);
  • прозрачность
    Для прозрачности можем применить функции RGBA

background: -moz-linear-gradient(#FFF, rgba(0,0,0,.3), #42aaff);
background: -ms-linear-gradient(#FFF, rgba(0,0,0,.3), #42aaff);
background: -o-linear-gradient(#FFF, rgba(0,0,0,.3), #42aaff);
background: -webkit-linear-gradient(#FFF, rgba(0,0,0,.3), #42aaff);
  • % цвета
    Цвета распределяются пропорционально, но через пробел мы можем сами определить их местонахождение.

background: -moz-linear-gradient(#FFF 10%, #000 30%, #42aaff);
background: -ms-linear-gradient(#FFF 10%, #000 30%, #42aaff);
background: -o-linear-gradient(#FFF 10%, #000 30%, #42aaff);
background: -webkit-linear-gradient(#FFF 10%, #000 30%, #42aaff);

  • top left
    позиция указывает где начинается градиент и состоит из вертикального(top, center, bottom) и горизонтального(left, center, right) значения.

background: -moz-linear-gradient(top left, #FFF 10%, #000 30%, #42aaff);
background: -ms-linear-gradient(top left, #FFF 10%, #000 30%, #42aaff);
background: -o-linear-gradient(top left, #FFF 10%, #000 30%, #42aaff);
background: -webkit-linear-gradient(top left, #FFF 10%, #000 30%, #42aaff);
  • left
    Если задано одно значение, то второе определяется как center

background: -moz-linear-gradient(left, #FFF 10%, #000 30%, #42aaff);
background: -ms-linear-gradient(left, #FFF 10%, #000 30%, #42aaff);
background: -o-linear-gradient(left, #FFF 10%, #000 30%, #42aaff);
background: -webkit-linear-gradient(left, #FFF 10%, #000 30%, #42aaff);
  • bottom left
    background: -moz-linear-gradient(bottom left, #FFF 10%, #000 30%, #42aaff);
background: -ms-linear-gradient(bottom left, #FFF 10%, #000 30%, #42aaff);
background: -o-linear-gradient(bottom left, #FFF 10%, #000 30%, #42aaff);
background: -webkit-linear-gradient(bottom left, #FFF 10%, #000 30%, #42aaff);
  • 80deg
    Также можно в качестве значения позиции использовать угол в градусах deg

background: -moz-linear-gradient(80deg, #FFF 10%, #000 30%, #42aaff);
background: -ms-linear-gradient(80deg, #FFF 10%, #000 30%, #42aaff);
background: -o-linear-gradient(80deg, #FFF 10%, #000 30%, #42aaff);
background: -webkit-linear-gradient(80deg, #FFF 10%, #000 30%, #42aaff);

Радиальный градиент radial-gradient

Синтаксис радиального градиента:
background-image: -XXX-radial-gradient(позиция, форма размер, цвет %, цвет %);
  • два цвета
    Радиальный градиент распространяется по окружности.

background: -moz-radial-gradient(#FFF, #000);
background: -ms-radial-gradient(#FFF, #000);
background: -o-radial-gradient(#FFF, #000);
background: -webkit-radial-gradient(#FFF, #000);
  • три цвета
    background: -moz-radial-gradient(#FFF, #000, #42aaff);
background: -ms-radial-gradient(#FFF, #000, #42aaff);
background: -o-radial-gradient(#FFF, #000, #42aaff);
background: -webkit-radial-gradient(#FFF, #000, #42aaff);
  • прозрачность
    background: -moz-radial-gradient(#FFF, rgba(0,0,0,.3), #42aaff);
background: -ms-radial-gradient(#FFF, rgba(0,0,0,.3), #42aaff);
background: -o-radial-gradient(#FFF, rgba(0,0,0,.3), #42aaff);
background: -webkit-radial-gradient(#FFF, rgba(0,0,0,.3), #42aaff);
  • % цвета
    background: -moz-radial-gradient(#FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(#FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(#FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(#FFF 10%, #000 30%, #42aaff);

  • top left
    background: -moz-radial-gradient(top left, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(top left, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(top left, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(top left, #FFF 10%, #000 30%, #42aaff);
  • left
    background: -moz-radial-gradient(left, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(left, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(left, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(left, #FFF 10%, #000 30%, #42aaff);
  • bottom left
    background: -moz-radial-gradient(bottom left, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(bottom left, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(bottom left, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(bottom left, #FFF 10%, #000 30%, #42aaff);
  • 110px 30px
    background: -moz-radial-gradient(110px 30px, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(110px 30px, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(110px 30px, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(110px 30px, #FFF 10%, #000 30%, #42aaff);

  • circle
    форма принимает значение circle (круг) или ellipse (элипс, по умолчанию).

background: -moz-radial-gradient(circle, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(circle, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(circle, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(circle, #FFF 10%, #000 30%, #42aaff);
  • top left
    background: -moz-radial-gradient(top left, circle, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(top left, circle, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(top left, circle, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(top left, circle, #FFF 10%, #000 30%, #42aaff);
  • left
    background: -moz-radial-gradient(left, circle, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(left, circle, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(left, circle, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(left, circle, #FFF 10%, #000 30%, #42aaff);
  • bottom left
    background: -moz-radial-gradient(bottom left, circle, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(bottom left, circle, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(bottom left, circle, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(bottom left, circle, #FFF 10%, #000 30%, #42aaff);
  • 110px 30px
    background: -moz-radial-gradient(110px 30px, circle, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(110px 30px, circle, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(110px 30px, circle, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(110px 30px, circle, #FFF 10%, #000 30%, #42aaff);

  • contain
    размер принимает значения closest-side (или contain), closest-corner, farthest-side, farthest-corner (или cover).

background: -moz-radial-gradient(110px 30px, circle closest-side, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(110px 30px, circle closest-side, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(110px 30px, circle closest-side, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(110px 30px, circle closest-side, #FFF 10%, #000 30%, #42aaff);
  • c-c
    background: -moz-radial-gradient(110px 30px, circle closest-corner, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(110px 30px, circle closest-corner, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(110px 30px, circle closest-corner, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(110px 30px, circle closest-corner, #FFF 10%, #000 30%, #42aaff);
  • f-s
    background: -moz-radial-gradient(110px 30px, circle farthest-side, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(110px 30px, circle farthest-side, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(110px 30px, circle farthest-side, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(110px 30px, circle farthest-side, #FFF 10%, #000 30%, #42aaff);
  • cover
    background: -moz-radial-gradient(110px 30px, circle farthest-corner, #FFF 10%, #000 30%, #42aaff);
background: -ms-radial-gradient(110px 30px, circle farthest-corner, #FFF 10%, #000 30%, #42aaff);
background: -o-radial-gradient(110px 30px, circle farthest-corner, #FFF 10%, #000 30%, #42aaff);
background: -webkit-radial-gradient(110px 30px, circle farthest-corner, #FFF 10%, #000 30%, #42aaff);

Как объединить градиенты CSS

В один background-image можно внести несколько фоновых изображений (подробней).
  • изо
    background-color: rgb(125, 167, 22);
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv-iTbFeP0ObXmnPYhAEfsbz28fjGAb-qOtEEZ_S3Tcou6IdcZfD8mmaxkLTGVecy7FPzhmAPhFbUjVuQHrTRXfgxF4m2H-A2Xhs-GtoRhDUZmvQsa1NVCzP7cYX16R4v2umdOnx083aeT/s72-c/Logo-Blogger.png"), -moz-linear-gradient(#FFF, #42aaff);
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv-iTbFeP0ObXmnPYhAEfsbz28fjGAb-qOtEEZ_S3Tcou6IdcZfD8mmaxkLTGVecy7FPzhmAPhFbUjVuQHrTRXfgxF4m2H-A2Xhs-GtoRhDUZmvQsa1NVCzP7cYX16R4v2umdOnx083aeT/s72-c/Logo-Blogger.png"), -ms-linear-gradient(#FFF, #42aaff);
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv-iTbFeP0ObXmnPYhAEfsbz28fjGAb-qOtEEZ_S3Tcou6IdcZfD8mmaxkLTGVecy7FPzhmAPhFbUjVuQHrTRXfgxF4m2H-A2Xhs-GtoRhDUZmvQsa1NVCzP7cYX16R4v2umdOnx083aeT/s72-c/Logo-Blogger.png"), -o-linear-gradient(#FFF, #42aaff);
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv-iTbFeP0ObXmnPYhAEfsbz28fjGAb-qOtEEZ_S3Tcou6IdcZfD8mmaxkLTGVecy7FPzhmAPhFbUjVuQHrTRXfgxF4m2H-A2Xhs-GtoRhDUZmvQsa1NVCzP7cYX16R4v2umdOnx083aeT/s72-c/Logo-Blogger.png"), -webkit-linear-gradient(#FFF, #42aaff); 
background-repeat: no-repeat; 
background-position: 0% 0%, 100% 100%;
  • градиенты
    background-color: red;
background-image: -moz-linear-gradient(transparent, #fff, red), -moz-radial-gradient(transparent, red, #000);
background-image: -ms-linear-gradient(transparent, #fff, red), -ms-radial-gradient(transparent, red, #000);
background-image: -o-linear-gradient(transparent, #fff, red), -o-radial-gradient(transparent, red, #000);
background-image: -webkit-linear-gradient(transparent, #fff, red), -webkit-radial-gradient(transparent, red, #000); 
background-repeat: no-repeat; 
background-position: 0% 0%, 100% 100%;

Пример

В качестве примера использования мне понравилась линия, которая появляется под ссылкой при наведении и нажатии на неё. 
<style type="text/css">   
#footer-links {
   text-decoration:none;
   background-size: 100% 2px;
   background-repeat: no-repeat;
   background-position: 0 99%;}
 
#footer-links:hover {
   background-image: -webkit-linear-gradient(left, #ece2ca, #ff3200, #ece2ca);
   background-image: -moz-linear-gradient(left, #ece2ca, #ff3200, #ece2ca);
   background-image: -ms-linear-gradient(left, #ece2ca, #ff3200, #ece2ca);
   background-image: -o-linear-gradient(left, #ece2ca, #ff3200, #ece2ca);
}
 
#footer-links:active {
   background-image: -webkit-linear-gradient(left, #ece2ca, #991500, #ece2ca);
   background-image: -moz-linear-gradient(left, #ece2ca, #991500, #ece2ca);
   background-image: -ms-linear-gradient(left, #ece2ca, #991500, #ece2ca);
   background-image: -o-linear-gradient(left, #ece2ca, #991500, #ece2ca);
}
  
</style>

<a id="footer-links" href="#">ссылка</a>
Закладки Google Закладки Google Закладки Google Delicious Memori БобрДобр Мистер Вонг Мое место 100 Закладок
Автор: NMitra
Ярлыки:
Похожие материалы:
Подписаться на: Комментарии к сообщению (Atom)