{"time":1708535384947,"blocks":[{"id":"yWC8rOSX_1","type":"paragraph","data":{"text":"Рассказывает Сара Драснер "}},{"id":"L5xld_xj_n","type":"separator","data":{"text":"***"}},{"id":"6uu5mrzfRh","type":"paragraph","data":{"text":"Мы продолжаем разбирать различные приёмы при работе с цветом в веб-разработке. Смотрите также первую часть про генерацию цвета и различные эффекты."}},{"id":"__XSAJzuZX","type":"header3","data":{"text":"Сгенерированный цвет","level":3},"tunes":{}},{"id":"-zvAVGWl8s","type":"paragraph","data":{"text":"Есть несколько способов собрать много потрясающих цветовых эффектов в одном месте."}},{"id":"eViUG2Prfl","type":"paragraph","data":{"text":"Если вы остаётесь в рамках изученного в прошлой части, то для получения цветов вы можете использовать либо циклы for в Sass (или другом препроцессоре CSS) или JavaScript, либо Math.Random() и Math.floor(). Math.floor() или Math.ceil() нужны, потому что когда мы не возвращаем целое число, мы получаем ошибку, а не цвет."}},{"id":"c543e8f2-34a0-40be-a6d9-66e0e768edbf","type":"embed","data":{"data":{"id":593,"seo":{"title":"Обучение востребованным IT-профессиям со Skillfactory","description":"ИТ-курсы как для новичков, так и для специалистов, меняющих сферу и повышающих квалификацию."},"link":"/courses/obuchenie-vostrebovannym-it-professiyam-so-skillfactory","logo":null,"name":"obuchenie-vostrebovannym-it-professiyam-so-skillfactory","tags":[{"id":1692,"name":"Для начинающих","slug":"for-beginners","type":["tag","job-skill"],"image":null,"title":"Программирование для начинающих","counter":0,"excerpt":"","imageLink":null,"isCategory":false,"publicLink":"/tag/for-beginners","description":"Программирование для начинающих базируется на учебных планах и руководствах для новичков. В этом разделе содержатся материалы по основам программирования.","backgroundType":"primary","backgroundNumber":1},{"id":1887,"name":"Для продолжающих","slug":"for-amateurs","type":["tag","job-skill"],"image":null,"title":null,"counter":0,"excerpt":"","imageLink":null,"isCategory":false,"publicLink":"/tag/for-amateurs","description":"Для тех, кто уже знает основы и хочет продолжать профессионально развиваться. ","backgroundType":"primary","backgroundNumber":1}],"shows":null,"speed":null,"title":"Обучение востребованным IT-профессиям со Skillfactory","views":0,"clicks":0,"isOpen":true,"status":"publish","tariff":"BASIC","weight":10,"company":null,"content":"","dateEnd":null,"hasCert":false,"lessons":null,"regLink":"https://trk.ppdu.ru/click?uid=248774&pid=17&oid=019be6b3-bd01-48f6-818f-1c5984c98293&erid=2SDnjdG8DyW","currency":{"code":"RUB","name":"Российский рубль","symbol":"₽"},"discount":null,"duration":null,"leadCost":null,"ordToken":"2SDnjdG8DyW","settings":{"showForm":false,"directTransition":false,"straightToTheLanding":false},"dateStart":null,"fullPrice":null,"promoCode":null,"thumbnail":null,"complexity":"NEWBIES","created_at":"2025-03-24T13:07:05.000+03:00","updated_at":"2025-03-26T03:17:02.000+03:00","classFormat":"ONLINE","description":"ИТ-курсы как для новичков, так и для специалистов, меняющих сферу и повышающих квалификацию.","isPermanent":true,"previewLink":"145957da-b433-470d-9776-cc4c1547772d","regFormLink":"https://trk.ppdu.ru/click?uid=248774&pid=17&oid=019be6b3-bd01-48f6-818f-1c5984c98293&erid=2SDnjdG8DyW","tagPriority":false,"currencyCode":"RUB","hoursPerWeek":null,"isHiddenDate":false,"manualWeight":null,"placeAddress":null,"publish_date":"2025-03-25T11:16:07.000+03:00","hasEmployment":true,"pricePerMouth":null,"regButtonText":"Выбрать обучение","availablePlaces":null,"avgConversionRate":null,"ourTrafficConversion":null},"link":"https://tproger.ru/courses/obuchenie-vostrebovannym-it-professiyam-so-skillfactory?erid=2SDnjdG8DyW","type":"tproger","image":null,"title":"Обучение востребованным IT-профессиям со Skillfactory","subType":"tproger_course","viewDomain":"tproger.ru"}},{"id":"pjPrhA33AR","type":"paragraph","data":{"text":"Хорошим правило: не стоит изменять все три величины одновременно. Обычно одну величину я изменяю сильно, вторую — чуть-чуть, а третью не трогаю вовсе. В частности, для этого отлично подойдёт HSL, ведь если пройтись циклом по величине тона от 0 до 360, то получится полный круг. Кроме того, браузеры способны обрабатывать и такие значения, как -480 или 600."}},{"id":"X9X3AJIYqp","type":"header4","data":{"text":"Sass","level":4},"tunes":{"anchorTune":{"anchor":"article-header-id-13"}}},{"id":"aGDybg7mwo","type":"code","data":{"code":"@mixin colors($max, $color-frequency) {\n $color: 300/$max;\n \n @for $i from 1 through $max {\n .s#{$i} {\n border: 1px solid hsl(($i - 10)*($color*1.25), ($i - 1)*($color / $color-frequency), 40%);\n }\n }\n} \n.demo {\n @include colors(20,2);\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"AAz1NAol8R","type":"paragraph","data":{"text":"В демке ниже я использовала Math.random() в пределах значений RGB для получения большого количества цветов в одной области. Это VR-демка, созданная при помощи React. Да, можно было бы задать цвет циклами, но я хотела сделать его рандомным, чтобы выделить движение."}},{"id":"zzywYDtcJm","type":"image","data":{"alt":"","title":"","caption":"","file":{"id":40508,"url":"https://media.tproger.ru/uploads/2017/01/2932663-react-aframe.jpg"},"stretched":false,"withBackground":false,"withBorder":false,"width":900,"height":667,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2017/01/2932663-react-aframe.jpg","alt":"Руководство по работе с цветом в веб-разработке. Часть вторая. Генерация цвета и различные эффекты 1","dimensions":{"width":900,"height":667},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/tGte20q67a8aBLM2aVJ2QyEZJiteHlb9I9t-JIZc64U/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wMS8yOTMyNjYzLXJlYWN0LWFmcmFtZS5qcGc","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/e5wU4Dh96svU5tq_Oul4HKT0mZt5i6nYV-jctkNITjE/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wMS8yOTMyNjYzLXJlYWN0LWFmcmFtZS5qcGc","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/0_aEAjSvzpGQ72bNwtKFryMy3j0KOVj8rZFFo8ZPNBk/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wMS8yOTMyNjYzLXJlYWN0LWFmcmFtZS5qcGc","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/iOtcB807LOL6TmMYC1kbxKb6OKZIuy0QSaP4uEoQWWw/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wMS8yOTMyNjYzLXJlYWN0LWFmcmFtZS5qcGc","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/SAwi1jEvt7uRJw00tJFEfGTsTIeWJhzKfs4ZgLDOvP0/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wMS8yOTMyNjYzLXJlYWN0LWFmcmFtZS5qcGc","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/qhywDwkSTRMMsLRTaASopHdaEuvrK3-2MHXF62cXYJs/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wMS8yOTMyNjYzLXJlYWN0LWFmcmFtZS5qcGc","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/zJTcBWgBYr6K3vRuLi-jx7ndWp8L8axb2YYBg6Q-x44/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wMS8yOTMyNjYzLXJlYWN0LWFmcmFtZS5qcGc","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/sQicrUaiB-12ouSpyGgcKigbRQELchTCTBboul4xGMU/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wMS8yOTMyNjYzLXJlYWN0LWFmcmFtZS5qcGc","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"Vkcd5p1MGa","type":"header4","data":{"text":"JavaScript","level":4},"tunes":{"anchorTune":{"anchor":"article-header-id-14"}}},{"id":"_SlYHY00ye","type":"code","data":{"code":"class App extends React.Component {\n render () {\n const items = [],\n amt1 = 5,\n amt2 = 7;\n for (let i = 0; i < 30; i++) {\n let rando = Math.floor(Math.random() * (amt2 - 0 + 1)) + 0,\n addColor1 = parseInt(rando * i),\n addColor2 = 255 - parseInt(7 * i),\n updateColor = `rgb(200, ${addColor1}, ${addColor2})`;\n items.push(<Entity geometry=\"primitive: box; depth: 1.5; height: 1.5; width: 6\" \n material={{color: updateColor}} ...\n key={i}>\n\t ...\n </Entity>);\n }\n return (\n <Scene>\n ...\n {items}\n </Scene>\n );\n }\n}class App extends React.Component {\n render () {\n const items = [],\n amt1 = 5,\n amt2 = 7;\n for (let i = 0; i < 30; i++) {\n let rando = Math.floor(Math.random() * (amt2 - 0 + 1)) + 0,\n addColor1 = parseInt(rando * i),\n addColor2 = 255 - parseInt(7 * i),\n updateColor = `rgb(200, ${addColor1}, ${addColor2})`;\n items.push(\n\t ...\n );\n }\n return (\n \n ...\n {items}\n \n );\n }\n}","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"MXICS-UfNA","type":"paragraph","data":{"text":"GreenSock создал инструмент для анимации относительных цветовых величин, что весьма полезно, поскольку вы можете взять несколько элементов и анимировать их в зависимости от их текущих цветовых координат. Эти три черепашки наглядно покажут, о чём я говорю:"}},{"id":"yFl8ntoZhH","type":"code","data":{"code":"TweenMax.to(\".turtle2 path, .turtle2 circle, .turtle2 ellipse\", 1.5, {fill:\"hsl(+=0, +=50%, +=0%)\"});","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"XgRUO3LF81","type":"header3","data":{"text":"Прочие цветовые эффекты","level":3},"tunes":{"anchorTune":{"anchor":"article-header-id-15"}}},{"id":"0HwM6fKRFG","type":"header4","data":{"text":"Режим наложения слоёв","level":4},"tunes":{"anchorTune":{"anchor":"article-header-id-16"}}},{"id":"XYWmMN8Hlc","type":"paragraph","data":{"text":"Если вы знакомы с эффектами слоёв в Photoshop, то вам знакомы режимы наложения слоёв. Почти каждый сайт в 90-х использовал их (да, и мой тоже). Они совмещают два слоя, а всего доступно 16 режимов наложения. Мы не будем разбирать их все, но основные моменты рассмотрим."}},{"id":"4ujRYQa0YX","type":"paragraph","data":{"text":"Верхнее изображение или цвет называется источником, source, а нижний слой — целью, destination. Область между ними — это то место, где происходит вся магия, и называется она backdrop. Смешение происходит по определённым формулам.
Формула режима наложения зависит от типа эффекта. Например, для произведения (multiply): destination × source = backdrop. Другие эффекты — это различные комбинации базовых математических операций. Линейное наложение — это A+B−1, а “выгорание цвета” — это 1−(1−B)÷A. На самом деле, знать эти формулы не обязательно."}},{"id":"WNnKwNLsZv","type":"paragraph","data":{"text":"Вот подробная документация."}},{"id":"66ykPpK8l1","type":"paragraph","data":{"text":"Кроме того, вот отличная статья, демонстрирующая впечатляющие эффекты, возникающие при наложении нескольких режимов друг на друга. Ниже мы рассмотрим совместное использование режимов наложения и фильтров."}},{"id":"9QDLV2Dhjh","type":"header4","data":{"text":"Фильтры","level":4},"tunes":{"anchorTune":{"anchor":"article-header-id-17"}}},{"id":"czTMo2Qvx0","type":"paragraph","data":{"text":"Фильтры CSS предоставляют много классных цветовых эффектов. Вот статья, которая показывает, как работают основные фильтры. Кроме того, есть ещё вот такой интересный сайт."}},{"id":"E8uUhV6_wY","type":"header4","data":{"text":"feColorMatrix","level":4},"tunes":{"anchorTune":{"anchor":"article-header-id-18"}}},{"id":"fq42STKjMv","type":"paragraph","data":{"text":"У моей знакомой есть отличная статья, описывающая создание похожих изображений при помощи feColorMatrix, примитива фильтра в SVG, который можно применить и к HTML-элементам. Это очень мощный инструмент, позволяющий тонкую настройку цветов. Вот базовый пример использования:"}},{"id":"s1iP9iP0nP","type":"code","data":{"code":"<filter id=\"imInTheMatrix\">\n <feColorMatrix in=\"SourceGraphic\"\n type=\"matrix\"\n values=\"0 0 0 0 0\n 1 1 1 1 0\n 0 0 0 0 0\n 0 0 0 1 0\" />\n </filter>\n\n <path filter=\"url(#imInTheMatrix)\" … />","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"KgXkpmLg-M","type":"paragraph","data":{"text":"Также матрицу можно расширить и изменять тон, насыщенность и многое другое:"}},{"id":"ejDpEoCp-6","type":"code","data":{"code":"<filter id=\"imInTheHueMatrix\">\n <feColorMatrix in=\"SourceGraphic\"\n type=\"hueRotate\"\n values=\"150\" />\n</filter>\n","language":"html","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"BkUlH_rtXf","type":"paragraph","data":{"text":"Также с основами SVG можно ознакомиться, прочитав книгу SVG Colors, Patterns & Gradients или воспользовавшись этой подробной демкой."}},{"id":"v422aOFaqq","type":"header3","data":{"text":"Доступность и прочие аспекты цвета","level":3},"tunes":{"anchorTune":{"anchor":"article-header-id-19"}}},{"id":"7s848_5Mlo","type":"paragraph","data":{"text":"Цвет становится цветом только тогда, когда он используется по отношению к другому цвету. Вот что делает работу с цветом по-настоящему трудной. И тут возникает вопрос доступности. Светло-зелёный цвет на чёрном фоне может быть доступным, но на белом он абсолютно нечитаем."}},{"id":"brWAvHgN9A","type":"image","data":{"alt":"","title":"","caption":"","file":{"id":25226,"url":"https://media.tproger.ru/uploads/2016/12/context-color.jpg"},"stretched":false,"withBackground":false,"withBorder":false,"width":850,"height":300,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2016/12/context-color.jpg","alt":"Руководство по работе с цветом в веб-разработке. Часть вторая. Генерация цвета и различные эффекты 2","dimensions":{"width":850,"height":300},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/TixZSgYbrw45OWOgI5SLk-C7D3k_pp_lcLe-VtphP9M/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9jb250ZXh0LWNvbG9yLmpwZw=","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/XtLnMuMYAOx2di2-D2gUrzmbo_SR00FPiVv2kTZpvok/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9jb250ZXh0LWNvbG9yLmpwZw=","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/sm3cnIokPZTcXk_3AWTIncX71g-rQBjuMW6JfcWGKs4/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9jb250ZXh0LWNvbG9yLmpwZw=","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/Z43ViQH66rhjhzTVyaYWtXI3Ln3gLMcbSiE6Stl0ImI/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9jb250ZXh0LWNvbG9yLmpwZw=","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/RQ1jCpKh3JGrcaCayXMK8Ngv8C7Jm0oLWCisW9Py2NY/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9jb250ZXh0LWNvbG9yLmpwZw=","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/rJtqa2pBOPhSU-2_MEPR2m1gVHpLM7UUs2mQ9bUGbpc/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9jb250ZXh0LWNvbG9yLmpwZw=","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/CtJTy5aLUn2-xmdawB4bLKMnk_WuiswGJO4my9hMpuQ/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9jb250ZXh0LWNvbG9yLmpwZw=","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/PLYCIL6EVoSdXbQvSsSUspUWoyYo6oRCury9r3m5KUw/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9jb250ZXh0LWNvbG9yLmpwZw=","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"31wjSGBa51","type":"paragraph","data":{"text":"
Доступность цвета можно измерить несколькими инструментами. Вот мои любимые:"}},{"id":"ghWdpplfMY","type":"list","data":{"style":"unordered","items":["Colorable;","Text on a background image a11y check;","Contrast-A;","Accessible Colors."]}},{"id":"VnaxsokQYR","type":"paragraph","data":{"text":"Также очень удобно изначально настраивать свою палитру цветов в соответствии с доступностью, и в этом вам может помочь инструмент Color Safe. Ну а после завершения работы доступности странички поможет оценить WAVE (Web Accessibility Tool)."}},{"id":"g0eWgEUm2N","type":"header4","data":{"text":"Цвет и атмосфера","level":4},"tunes":{"anchorTune":{"anchor":"article-header-id-20"}}},{"id":"yUTL4yRs5h","type":"paragraph","data":{"text":"На цвет влияет атмосфера, и это важно учитывать, если вы хотите создать какую-то иллюзию глубины. Цвета, которые находятся ближе к вам, более насыщены и контрастны, а отдалённые, напротив, более размыты."}},{"id":"M4Xe0qGS9N","type":"image","data":{"alt":"","title":"","caption":"","file":{"id":25227,"url":"https://media.tproger.ru/uploads/2016/12/landscape.jpg"},"stretched":false,"withBackground":false,"withBorder":false,"width":800,"height":426,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2016/12/landscape.jpg","alt":"Руководство по работе с цветом в веб-разработке. Часть вторая. Генерация цвета и различные эффекты 3","dimensions":{"width":800,"height":426},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/IYQa8B2qxw03JONM8Ju6kIqihkfiiS3ouLVKoZMMQmU/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9sYW5kc2NhcGUuanBn","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/4SvT6Z3o81kXCtXouDBKO9QxUqVKzFMGRnbuWAbnHkY/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9sYW5kc2NhcGUuanBn","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/yOM4D2ofuKDFAQuTV8loUsf2Q51SeSglt93ndl4Mmq8/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9sYW5kc2NhcGUuanBn","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/9ng1RGx75CwxC7vCOdRxLedf0arRgqZKxDMpeMJXpT0/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9sYW5kc2NhcGUuanBn","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/33l4hdaSidO9FWpoH6LF2rm5jK33ZSwzhhNPPCU2YRk/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9sYW5kc2NhcGUuanBn","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/1CW-tYa-xMsj1VC9hkVqFx4O5m35oenA8XdSxO-UDe8/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9sYW5kc2NhcGUuanBn","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/S8RVEkZwCSWOw2mZd88UndkgkwJNjvtlO1rDtbW80MY/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9sYW5kc2NhcGUuanBn","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/CLtOz9MknB_gNWK_z9PzdoEbDrZaJmzk_XVbeyg608U/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9sYW5kc2NhcGUuanBn","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"uqEminB9Ab","type":"header4","data":{"text":"Тени","level":4},"tunes":{"anchorTune":{"anchor":"article-header-id-21"}}},{"id":"QcWolI1Vam","type":"paragraph","data":{"text":"Тени вовсе не серые — их цвет зависит от цвета света. Есть источник света имеет жёлтый оттенок, тень будет казаться фиолетовой. Это стоит учитывать при работе с тенями."}},{"id":"5sFnVpePCO","type":"image","data":{"alt":"","title":"","caption":"","file":{"id":25228,"url":"https://media.tproger.ru/uploads/2016/12/shadow-color.jpg"},"stretched":false,"withBackground":false,"withBorder":false,"width":580,"height":373,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2016/12/shadow-color.jpg","alt":"Руководство по работе с цветом в веб-разработке. Часть вторая. Генерация цвета и различные эффекты 4","dimensions":{"width":580,"height":373},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/q31OZPDZjnk8rB90wxdXkD08mUT7-mxrzqqhB8o2iWc/rs:fill:580:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9zaGFkb3ctY29sb3IuanBn","dpr":1,"width":580},{"url":"https://tproger.ru/signed_image/EB_HM5qg-vsTqCcJoUIWMo8tUSy3wPlaTJc3cuq_Ryw/rs:fill:1160:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9zaGFkb3ctY29sb3IuanBn","dpr":1,"width":1160},{"url":"https://tproger.ru/signed_image/q31OZPDZjnk8rB90wxdXkD08mUT7-mxrzqqhB8o2iWc/rs:fill:580:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9zaGFkb3ctY29sb3IuanBn","dpr":1,"width":580},{"url":"https://tproger.ru/signed_image/EB_HM5qg-vsTqCcJoUIWMo8tUSy3wPlaTJc3cuq_Ryw/rs:fill:1160:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9zaGFkb3ctY29sb3IuanBn","dpr":1,"width":1160},{"url":"https://tproger.ru/signed_image/q31OZPDZjnk8rB90wxdXkD08mUT7-mxrzqqhB8o2iWc/rs:fill:580:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9zaGFkb3ctY29sb3IuanBn","dpr":1,"width":580},{"url":"https://tproger.ru/signed_image/EB_HM5qg-vsTqCcJoUIWMo8tUSy3wPlaTJc3cuq_Ryw/rs:fill:1160:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9zaGFkb3ctY29sb3IuanBn","dpr":1,"width":1160},{"url":"https://tproger.ru/signed_image/Q6nNiN0C6QkcA2xPatw9gJnQLsner_2FmwTG_Qq9eOU/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9zaGFkb3ctY29sb3IuanBn","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/6ESyiwcA3X8Y0FH1YtIe0KDGMoJf1t730hmJsG3Z4Ko/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNi8xMi9zaGFkb3ctY29sb3IuanBn","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"580px"},{"media":"(min-width: 1281px)","size":"580px"},{"media":"(min-width: 1281px)","size":"580px"},{"media":"(min-width: 961px)","size":"580px"},{"media":"(min-width: 671px)","size":"580px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"YPrCnWrxfO","type":"header4","data":{"text":"Нативный ввод цвета","level":4},"tunes":{"anchorTune":{"anchor":"article-header-id-22"}}},{"id":"RmxYaPt9Im","type":"paragraph","data":{"text":"В браузерах есть нативные селекторы цвета для их динамического выбора. Вы можете написать <input type=\"color\"> или <input type=\"color\" value=\"#ff0000\">. Это легко использовать, но стоит помнить, что в различных браузерах это реализовано немного по-разному. Эта демка покажет, как можно использовать эту фичу совместно с фильтрами для динамического выделения частей изображения."}},{"id":"AGan6dr9Nm","type":"header3","data":{"text":"Забавные штучки для разработчиков и прочие ресурсы","level":3},"tunes":{"anchorTune":{"anchor":"article-header-id-23"}}},{"id":"GGTiverAzs","type":"list","data":{"style":"unordered","items":["Я использую этот плагин для Sublime Text для того, чтобы понять, как браузер интерпретирует тот или иной цвет.","Есть различные стандартные комбинации палитр, и разобраться в них вам помогут ресурсы Paletton и Adobe Color. Ну а если вам лень придумывать что-то самим, то на помощь придёт Coolors.","Для быстрой смены формата цвета подойдёт сайт Colorhexa.","Кроме того, можно даже раскрашивать консольные выводы. В этом вам поможет эта демка."]}},{"id":"dsXQxP55fI","type":"header3","data":{"text":"Заключение","level":3},"tunes":{"anchorTune":{"anchor":"article-header-id-24"}}},{"id":"hGPmZdRzGA","type":"paragraph","data":{"text":"Мы рассмотрели много различных аспектов работы с цветом, и я надеюсь, что эта статья станет для вас отличным отправным пунктом для дальнейшего изучения и экспериментов."}}],"version":"2.25.0"}

Ошибка в настройках сайта