{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7nj5d"},{"data":{"image":{"id":"5c64fbc902a9e600af790ae0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fqsi3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"CSS-градиент представляет собой переходы от одного цвета к другому. ","type":"unstyled","key":"6lse9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Градиенты создаются с помощью функций linear-gradient() и radial-gradient(). ","type":"unstyled","key":"aqdlc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Градиентный фон можно устанавливать в свойствах background, background-image, border-image и list-style-image. ","type":"unstyled","key":"an21u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как сделать градиент в CSS","type":"header-two","key":"f927l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Содержание:","type":"unordered-list-item","key":"2h7o6"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"1. Линейный градиент: linear-gradient()","type":"unordered-list-item","key":"4j9tp"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":41,"offset":0}],"inlineStyleRanges":[],"text":"2. Радиальный градиент: radial-gradient()","type":"unordered-list-item","key":"3ub9c"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":78,"offset":0}],"inlineStyleRanges":[],"text":"3. Повтор градиента: repeating-linear-gradient() и repeating-radial-gradient()","type":"unordered-list-item","key":"851lr"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":27,"offset":0}],"inlineStyleRanges":[],"text":"4. Кроссбраузерный градиент","type":"unordered-list-item","key":"9p6e0"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":46,"offset":0}],"inlineStyleRanges":[],"text":"5. Комбинация градиента и фонового изображения","type":"unordered-list-item","key":"7ni1p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поддержка браузерами","type":"header-three","key":"4q49u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"},{"length":8,"offset":10,"style":"BOLD"},{"length":7,"offset":34,"style":"BOLD"},{"length":7,"offset":63,"style":"BOLD"},{"length":6,"offset":90,"style":"BOLD"},{"length":11,"offset":113,"style":"BOLD"},{"length":11,"offset":130,"style":"BOLD"},{"length":16,"offset":145,"style":"BOLD"},{"length":19,"offset":181,"style":"BOLD"}],"text":"IE: 10.0\n Firefox: 16, 3.6 -moz-\n Chrome: 26.0, 10.0 -webkit-\n Safari: 6.1, 5.1 -webkit-\n Opera: 12.1, 11.1 -o-\n iOS Safari: 7.1\n Opera Mini: —\n Android Browser: 4.4, 4.1 -webkit-\n Chrome for Android: 44","type":"blockquote","key":"fgpcf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Линейный градиент linear-gradient()","type":"header-three","key":"9kesm"},{"data":{"image":{"id":"5c64fbc95f4c6900afa52c66"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рис. 1. Линия градиента, начальная и конечная точки и угол градиента","type":"atomic:image","key":"7io6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"},{"length":15,"offset":95,"style":"BOLD"}],"text":"Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента. ","type":"unstyled","key":"f0c7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":66,"style":"BOLD"}],"text":"Если направление не указано, используется значение по умолчанию — сверху-вниз. ","type":"unstyled","key":"bln7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.","type":"unstyled","key":"9mv20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<{background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);}","type":"unstyled","key":"7oprl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":22,"offset":58,"style":"BOLD"}],"text":"Направление градиента может быть задано двумя способами:\n с помощью угла наклона в градусах deg, значение которого определяет угол наклона линии внутри элемента. ","type":"unstyled","key":"fe3ls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\nheight: 200px;\nbackground: linear-gradient(45deg, #EECFBA, #C5DDE8);\n}","type":"unstyled","key":"7uap7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"с помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно.","type":"unstyled","key":"347ir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\nheight: 200px;\nbackground: linear-gradient(to right, #F6EFD2, #CEAD78);\n}","type":"unstyled","key":"3tods"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если направление задано парой ключевых слов, например, to top left, то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.","type":"unstyled","key":"6vguc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\nheight: 200px;\nbackground: linear-gradient(to top left, powderblue, pink);\n}","type":"unstyled","key":"4qam0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":132,"style":"BOLD"},{"length":15,"offset":145,"style":"BOLD"}],"text":"Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка, например:","type":"unstyled","key":"6pam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\nheight: 200px;\nbackground: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);\n}","type":"unstyled","key":"a39av"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:","type":"unstyled","key":"hgv3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\nheight: 200px;\nbackground: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%);\n}","type":"unstyled","key":"5438f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Радиальный градиент radial-gradient()","type":"header-three","key":"4qfo8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса. ","type":"unstyled","key":"c5jcj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);}\n","type":"unstyled","key":"2je1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Форма градиента определяется ключевыми словами circle или ellipse. Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.","type":"unstyled","key":"7pqfl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\nheight: 200px;\nbackground: radial-gradient(white, #FFA9A1);\n}","type":"unstyled","key":"5polg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position, с добавлением приставки at. Если позиция центра не задана, используется значение по умолчанию at center.","type":"unstyled","key":"3gatk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\nheight: 200px;\nbackground: radial-gradient(at top, #FEFFFF, #A7CECC);\n}","type":"unstyled","key":"di19n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С помощью пары значений, указанных в единицах длины %, em или px, можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.","type":"unstyled","key":"2j68f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\nheight: 200px;\nbackground: radial-gradient(40% 50%, #FAECD5, #CAE4D8);\n}","type":"unstyled","key":"2oftn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).","type":"unstyled","key":"buotr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Значение Описание closest-side Размер градиента рассчитывается из расстояния до любой ближней стороны блока для circle или до ближних сторон по X и по У для ellipse. farthest-side Размер рассчитывается из расстояния до дальних сторон. closest-corner Размер рассчитывается из расстояния до ближних углов. farthest-corner Размер рассчитывается из расстояния до дальних углов. ","type":"unstyled","key":"6qq6n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\nheight: 200px;\nbackground: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B);\n}","type":"unstyled","key":"1mv39"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С помощью радиального градиента можно создавать реалистичные объёмные фигуры, такие как мячи, кнопки. ","type":"unstyled","key":"4ee3e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мяч","type":"header-three","key":"b98kj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\n width: 200px;\n height: 200px;\n border-radius: 50%;\n margin: 0 auto;\n background: radial-gradient(circle at 65% 15%, aqua, darkblue);\n}","type":"unstyled","key":"13j8j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопка","type":"header-three","key":"dfa3k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"bg1ri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"ed9jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".wrap {\n height: 200px;\n padding: 50px 0;\n background: #cccccc;\n}\n.button {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n margin: 0 auto; \n background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa);\n box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5);\n}","type":"unstyled","key":"8a17l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почтовая марка","type":"header-three","key":"dmsn1"},{"data":{"image":{"id":"5c64fbc9514b2200ae049c4a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"atomic:image","key":"474eo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используя в градиентах прозрачный цвет, можно создавать вот такие эффекты.","type":"unstyled","key":"5t9l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"9on57"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".container {\n background: #B7D1D8;\n padding: 25px;\n}\n.wrap {\n background: radial-gradient(transparent, transparent 4px, white 4px,white);\n padding: 10px;\n width: 300px;\n height: 220px;\n background-size: 20px 20px;\n background-position: -10px -10px; /*обрезаем узор по краю*/\n margin: 0 auto;\n}\nimg {\n width: 100%;\n}","type":"unstyled","key":"a6hms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Повтор градиента","type":"header-three","key":"87ckd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В добавление к линейному и радиальному градиентам существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры. ","type":"unstyled","key":"1t27e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\n height: 200px;\n background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);\n}","type":"unstyled","key":"4k9sh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\n height: 200px;\n background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px);\n}","type":"unstyled","key":"f6ksh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Кроссбраузерный градиент","type":"header-three","key":"r36f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для корректного отображения градиентов во всех браузерах необходимо добавить кроссбраузерную запись. ","type":"unstyled","key":"1icjt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Линейный градиент","type":"unstyled","key":"9ah87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"-ms-filter: \"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)\"; /* IE 8-9 */\nbackground: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */\nbackground: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */\nbackground: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */\nbackground: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */","type":"unstyled","key":"7b4gb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Повтор линейного градиента","type":"unstyled","key":"at42k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */\nbackground: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1-12.0 */\nbackground: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6-15 */\nbackground: repeating-linear-gradient(red, yellow 10%, green 20%); /* Стандартный синтаксис */","type":"unstyled","key":"d5fum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Радиальный градиент","type":"unstyled","key":"bra71"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */\nbackground: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */\nbackground: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */\nbackground: radial-gradient(red, yellow, green); /* Стандартный синтаксис */\nbackground: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */\nbackground: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */ \nbackground: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */\nbackground: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Стандартный синтаксис */","type":"unstyled","key":"41j8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Повтор радиального градиента","type":"unstyled","key":"4q8md"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */\nbackground: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */\nbackground: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */\nbackground: repeating-radial-gradient(red, yellow 10%, green 15%); /* Стандартный синтаксис */","type":"unstyled","key":"clf27"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Комбинация градиента и фонового изображения","type":"header-three","key":"6rtir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"За счёт комбинации градиента и изображения можно создавать интересные эффекты. Для градиента нужно использовать полупрозрачные цвета, чтобы картинка оставалась видимой.","type":"unstyled","key":"294ub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div {\n height: 453px;\n background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, .5)), url(https://html5book.ru/wp-content/uploads/2016/12/photo-8.jpg); \n background-size: cover;\n}","type":"unstyled","key":"8sk61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6bkdr"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":20,"offset":0}],"inlineStyleRanges":[],"text":"https://prog-help.ru","type":"unstyled","key":"ceh0m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"eITRooRJsP7v3uJISZqe"}],"entityMap":{"0":{"data":{"href":"#linear-gradient()","url":"https://zen.yandex.ru/profile/editor/id/5c64fa0d6f5fc200acefbff9/5c64fbb42731d300af9bef3b/edit#linear-gradient()"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"#radial-gradient()","url":"https://zen.yandex.ru/profile/editor/id/5c64fa0d6f5fc200acefbff9/5c64fbb42731d300af9bef3b/edit#radial-gradient()"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"#repeating-gradient()","url":"https://zen.yandex.ru/profile/editor/id/5c64fa0d6f5fc200acefbff9/5c64fbb42731d300af9bef3b/edit#repeating-gradient()"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"#part4","url":"https://zen.yandex.ru/profile/editor/id/5c64fa0d6f5fc200acefbff9/5c64fbb42731d300af9bef3b/edit#part4"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"#part5","url":"https://zen.yandex.ru/profile/editor/id/5c64fa0d6f5fc200acefbff9/5c64fbb42731d300af9bef3b/edit#part5"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"https://prog-help.ru"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}