Градиент на CSS3

Question

Градиент на CSS3

Рейтинг: 4Ответов: 2Опубликовано: 26.10.2014

Здравствуйте, подскажите, пожалуйста, как сделать такой градиент на CSS3, без картинок. С помощью каких сервисов?

Answer 1

▲ 5Принят

* {
  padding: 0;
  margin: 0;
}
div {
  min-height: 100px;
  background: #f5f8f9;
  /* Old browsers */
  background: -moz-linear-gradient(left, #f5f8f9 0%, #1d97d3 50%, #0591d5 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #f5f8f9), color-stop(50%, #1d97d3), color-stop(100%, #0591d5));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #f5f8f9 0%, #1d97d3 50%, #0591d5 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #f5f8f9 0%, #1d97d3 50%, #0591d5 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #f5f8f9 0%, #1d97d3 50%, #0591d5 100%);
  /* IE10+ */
  background: linear-gradient(to right, #f5f8f9 0%, #1d97d3 50%, #0591d5 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f5f8f9', endColorstr='#0591d5', GradientType=1);
  /* IE6-9 */
}

<div></div>

http://jsfiddle.net/6bv5hmrz/

http://www.colorzilla.com/gradient-editor/ вот есть такой сервис

Answer 2

▲ 4

Да ну нет же! Не с помощью сервисов, а с помощью background-image:

#gradient {
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
    background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+
    background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
}
}

извините за less, упрощаю себе жизнь немного :)

Градиент на CSS3

Ответы