градиент

[Andrue-Selen]

скажите пожалуйста,как верстать градиент
Часто в макете есть сложный градиент,он бывает даже фоном страницы,Как его верстать(связывать слои в фотошопе,делать картинку и натягивать на фон блока),или всё делать средствами css?

[Vlad02]

По феншую всё делать через css, если позволяет ТЗ по кросбраузерности.

http://www.colorzilla.com/gradient-editor/в помощь.

Edited July 11, 2015 by Vlad02

[Andrue-Selen]

По феншую всё делать через css, если позволяет ТЗ по кросбраузерности.

http://www.colorzilla.com/gradient-editor/в помощь.

спасибо

[footwear.by]

По феншую всё делать через css, если позволяет ТЗ по кросбраузерности.

http://www.colorzilla.com/gradient-editor/в помощь.

оно конечно хорошо

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

делал следующим образом, подбирал то что нужно, нажимал кнопку copy и вставлял к себе.

[Vlad02]

 

По феншую всё делать через css, если позволяет ТЗ по кросбраузерности.

http://www.colorzilla.com/gradient-editor/в помощь.

оно конечно хорошо

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

делал следующим образом, подбирал то что нужно, нажимал кнопку copy и вставлял к себе.

 

Ругается на что? Скрин покажите или ссылку дайте.

[footwear.by]

 

 

По феншую всё делать через css, если позволяет ТЗ по кросбраузерности.

http://www.colorzilla.com/gradient-editor/в помощь.

оно конечно хорошо

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

делал следующим образом, подбирал то что нужно, нажимал кнопку copy и вставлял к себе.

 

Ругается на что? Скрин покажите или ссылку дайте.

 

https://content.onliner.by/forum/1a5/1b6/1206531/800x800/3083b688385ac09559ccae4c5e30c6b0.jpg

https://content.onliner.by/forum/1a5/1b6/1206531/800x800/44778345660a7e6bcbd32a6d0fb29206.jpg

https://content.onliner.by/forum/1a5/1b6/1206531/800x800/6db437bbaeadd8ab123a82af44f593fc.jpg

[Vlad02]

 

 

 

По феншую всё делать через css, если позволяет ТЗ по кросбраузерности.

http://www.colorzilla.com/gradient-editor/в помощь.

оно конечно хорошо

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

делал следующим образом, подбирал то что нужно, нажимал кнопку copy и вставлял к себе.

 

Ругается на что? Скрин покажите или ссылку дайте.

 

https://content.onliner.by/forum/1a5/1b6/1206531/800x800/3083b688385ac09559ccae4c5e30c6b0.jpg

https://content.onliner.by/forum/1a5/1b6/1206531/800x800/44778345660a7e6bcbd32a6d0fb29206.jpg

https://content.onliner.by/forum/1a5/1b6/1206531/800x800/6db437bbaeadd8ab123a82af44f593fc.jpg

 

Ну так у нас css имеет вид для элемента

div{background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);}

а мы кормим валидатор этим

background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

вот он и плюётся.

З.Ы. div=любой селектор.

Edited September 14, 2015 by Vlad02

[footwear.by]

это я упрощенно показал

кормим этим

 

.footer {        
  width: 100%;
  height: 2.2em;
  background: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ededed+0,f6f6f6+53,ffffff+100*/
background: rgb(237,237,237); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(237,237,237,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,237,237,1)), color-stop(53%,rgba(246,246,246,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */;
  margin-top: 4em;
  border-radius: 20px 20px 0 0;
  padding-top: 1em;
  }

 

К сожалению, мы обнаружили следующие ошибки (6) URI : TextArea 5 .footer Ошибка значения : background попытка найти точку с запятой до имени свойства. добавьте ее 12 .footer попытка найти точку с запятой до имени свойства. добавьте ее 12 .footer Свойство progid не существует : DXImageTransform 12 .footer Ошибка разбора DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); 12 .footer Ошибка разбора /* IE6-9 */; 16   Ошибка разбора [: 4em; border-radius: 20px 20px 0 0; padding-top: 1em; } ]

[Vlad02]

/* IE6-9 */;

 

точка с запятой лишняя

 

Ошибка разбора DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 )

если старые ослы не нужны, опустите всю строку.

 

 

background: /* Permalink - use to edit and share this gradient: http://colorzilla.co...6 53,ffffff 100*/

 

всю строку удалите, глюк какой-то

Edited September 14, 2015 by Vlad02

[Vlad]

Вот это надо убрать и устаревший синтаксис тоже.

 

background: /* Permalink - use to edit and share this gradient: http://colorzilla.co...6 53,ffffff 100*/