Hello, tell me, please, how to make such a gradient on CSS3, without images. With what services?

    2 answers 2

    * { 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/ there is such a service

    • I also wanted to advise this service.) I always use it. - inferusvv
    • I fully support the service, there is always an open window with it in the tab, at the same time it helped me to understand how to solve problems with a gradient in different versions of IE. - MasterAlex

    Oh no! Not using services, but using 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 } }

    sorry for less, simplify my life a bit :)

    • one
      Yes, how can I tell you ... Less, no doubt, compile necessary. But do not you propose to write all the styles manually? And in IE9, this option works. - Nasty Pacman
    • 2
      @MasterAlex In vain you find fault with LESS. If you are a normal developer, you will use preprocessors. PS I did not say that the one who does not use them is an abnormal developer. )) - inferusvv
    • 2
      @MasterAlex What kind of project is it, where there is no common sustained style? And even if so, how will LESS prevent you from doing this? Well, no way. The opposite is easier. - inferusvv
    • one
      @MasterAlex, you need to learn. Integrating less (or sass is a matter of taste) into a project comes down to a couple of simple entries in a gruntfile. grunt-contrib-watch allows you to not remember the compilation, the compilation itself when changing source codes. And the mess in the project is not the fault of the preprocessors. Try to simply avoid such projects, and you will be happy. - Elena Levina
    • one
      In theory, it may be perfect, but in practice it’s just fine. And you need to structure the project regardless of whether you use preprocessors. And do not take bad layouts to work. All industry suffers from this. Lots of bad sites because of this. Designers need to educate, train. Most of them can play with fonts, but they have absolutely no idea how the browser works, and even how much their fonts weigh. The same designers then wonder why some life hacker opens on the mobile for two minutes, first the pictures are shown, and then the fonts only appear. - Elena Levina