Как добавить css

Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts

Первая часть главы посвящена знакомству с CSS шрифтами. На этой странице вы узнаете, как подключать шрифты в CSS, что такое веб-шрифты и как с ними работать, какие форматы шрифтов бывают, как пользоваться Google Fonts. Для начала рассмотрим легкий пример подключения шрифта CSS:

Этот небольшой кусочек кода означает, что ко всем тегам

применен шрифт Verdana. Свойство font-family устанавливает, какой шрифт или семейство шрифтов будет использоваться. Корректное отображение этого стиля в браузере пользователя зависит от того, установлен ли на его компьютере заданный шрифт. В нашем случае, если на компьютере пользователя отсутствует шрифт Verdana, то браузер отобразит шрифт, установленный по умолчанию.

В свое время дизайнерам приходилось дополнительно указывать несколько запасных шрифтов на случай, если на компьютере пользователя будет отсутствовать основной. Допустим, вы желаете оформить текст шрифтом Verdana, а в качестве запасных установить шрифты Trebuchet MS, Geneva и любой шрифт без засечек. Записывается это таким образом:

При обработке этого кода браузер сначала проверит наличие шрифта Verdana на компьютере пользователя. Если шрифт присутствует, содержимое тегов

отобразится этим шрифтом. Если шрифт отсутствует, браузер проверит наличие следующего по списку шрифта – Trebuchet MS. Если и этот шрифт отсутствует, будет проверяться наличие следующего шрифта – Geneva. Если на компьютере пользователя нет и Geneva, браузер выберет другой доступный шрифт без засечек и отобразит текст им.

Обратите внимание: в коде мы записали название шрифта Trebuchet MS в кавычках. Необходимо брать название шрифта в двойные либо одинарные кавычки тогда, когда в нем содержатся пробелы.

О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии.

Веб-шрифты

Вышеприведенный способ использования шрифтов имеет огромный минус – вы ограничены в количестве шрифтов. Вам придется довольствоваться лишь теми их вариантами, которые, вероятнее всего, установлены на большинстве компьютеров.

Каким же образом можно увеличить выбор шрифтов, чтобы сделать дизайн страницы индивидуальным, добавить оригинальности? На помощь приходят веб-шрифты. Читайте главу дальше и вы узнаете, как с ними работать.

Итак, для отображения нужного шрифта в браузере пользователя нам необходимо, чтобы этот шрифт сам загружался на его компьютер. Осуществить это довольно просто. Такой метод подключения шрифтов к CSS открывает действительно широкие возможности перед дизайнерами. Но стоит упомянуть и о ложке дёгтя в бочке мёда: во-первых, не каждый браузер поддерживает определенный формат шрифта (что приведет к тому, что шрифт не отобразится), а во-вторых, если файл со шрифтом имеет большой вес, это может замедлить загрузку страницы.

Поддержка форматов

Как бороться с проблемой несоответствия формата файла? Давайте взглянем на таблицу, где показаны наиболее популярные форматы шрифтов и узнаем, какие браузеры их поддерживают:

Формат файла шрифта	Какие браузеры поддерживают
TTF	Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0
EOT	Поддерживает только Internet Explorer
WOFF	Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0, Android Browser 4.1-4.3
SVG	Chrome до версии 37 (включительно), Safari, iOS Safari, Android Browser

Примечание: актуальную информацию о поддержке форматов шрифтов вы всегда можете узнать на сайте caniuse.com. В строку поиска необходимо ввести название формата (например, ttf).

Если вы ориентируетесь на современные браузеры, вам достаточно будет использовать формат шрифта TTF – наиболее распространенный и используемый. В случае, когда вам необходимо иметь несколько форматов одного шрифта, вы можете воспользоваться специальными онлайн-конвертерами из одного формата в другой, а затем подключить все файлы по очереди. Таким образом браузер сможет выбрать тот формат шрифта, с которым он работает.

Подключаем веб-шрифт с помощью @font-face

Предположим, у вас есть свой уникальный шрифт под названием MyUniqueFont в формате TTF и вы желаете, чтобы основной текст веб-страницы отображался именно этим шрифтом. Первое, что нужно сделать, это скопировать файл шрифта в папку, где находятся все остальные файлы сайта. Чтобы не создавать беспорядок, вы можете создать отдельную папку специально для шрифтов, назвав ее, к примеру, fonts .

Далее нам необходимо дать команду браузеру загрузить шрифт MyUniqueFont . Записывается это с помощью директивы @font-face следующим образом:

@font-face < font-family: MyUniqueFont; src: url('fonts/MyUniqueFont.ttf'); >

Свойство font-family в данном случае играет другую роль: с помощью него мы присваиваем имя шрифту, чтобы потом использовать это имя при написании стиля:

Во второй строке указывается путь к файлу шрифта. В нашем примере файл MyUniqueFont.ttf находится в папке fonts . У вас URL-адрес может отличаться.

Шрифты Google Fonts

Компания Google дает возможность легко подключать любой шрифт из коллекции Google Fonts. Всё, что вам необходимо сделать, чтобы начать использовать понравившийся шрифт, – указать несколько настроек на странице шрифта в Google, после чего скопировать специальную ссылку на этот шрифт и добавить в ваш веб-документ.

Примечание: вся коллекция шрифтов от Google доступна на сайте Google Fonts. На странице можно воспользоваться различными фильтрами для поиска шрифтов по категориям, толщине, алфавиту.

Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .

Шаг 1: выберите начертание

Первым делом на странице выбранного шрифта отобразятся варианты его начертания, а также иконка спидометра, которая означает не что иное, как скорость загрузки шрифта. Чем больше стилей для шрифта вы выбираете, тем больше времени потребуется на его загрузку. Поэтому рекомендуется выбирать только те варианты начертания, которые планируется использовать.

Шаг 2: выберите алфавит

Далее на странице есть возможность выбрать набор символов: латиница, кириллица и т. д. В зависимости от шрифта, в нем могут быть доступны не все варианты алфавита. Аналогично предыдущему пункту, лучше поставить галочку только напротив того алфавита, который понадобится.

Шаг 3: добавьте код на сайт

Далее Google предлагает подключить шрифт одним из нескольких способов: или стандартным, или через директиву @import , или с помощью JavaScript. Мы рассмотрим первые два варианта.

Первый способ подразумевает добавление в HTML-код ссылки на сервер Google, откуда и скачивается шрифт. Вам необходимо скопировать уже готовый кусок кода и поместить его между тегами в вашем HTML-документе. Пример:

Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

Особенность первого способа заключается в том, что вам понадобится добавлять ссылку на шрифт в заголовок каждой страницы, где планируется его использовать. Это легко осуществить на сайтах с небольшим количеством страниц, но проблематично для крупных ресурсов. Второй способ удобен тем, что код можно поместить в самое начало внешней таблицы стилей, и тогда все страницы, к которым подключена эта таблица, получат необходимый шрифт, который будет загружаться с помощью директивы @import .

Шаг 4: создайте стиль

После осуществления предыдущих шагов можно начать применять шрифт. Как записывается такое правило CSS, вы уже видели ранее:

Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Чтобы затем придать шрифту жирное начертание, запишите CSS-стиль таким образом:

Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).

Главными преимуществами сервиса Google Fonts является:

• легкость использования (разобраться с сервисом сможет даже новичок, а весь необходимый код генерируется автоматически – остается только скопировать его);
• доступность шрифтов (нет необходимости за них платить);
• предусмотрены все используемые форматы шрифтов (это означает, что каждый браузер сможет загрузить именно тот формат шрифта, с которым он работает).

Среди недостатков сервиса – не очень большое разнообразие шрифтов, особенно кириллических. К слову, в интернете есть и другие похожие сервисы, например, TypeKit (платный).

Итоги

Сегодня нам доступно несколько вариантов подключения оригинальных и нестандартных шрифтов к веб-страницам. Каждый из этих способов имеет свои плюсы и минусы. Какой из вариантов лучше использовать, вам нужно определить самостоятельно. Зачастую это зависит от ситуации, и в разных случаях могут пригодиться разные подходы. На данном этапе вам достаточно просто знать способы использования шрифтов в CSS.

Подчеркивание в CSS (красивые эффекты с примерами кода)

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «CSS Underline: 20+ Examples».

При создании ссылок или анимаций для кнопок меню у вас может возникнуть необходимость использовать подчеркивание. Из этой статьи вы узнаете о нескольких способах создать эффект подчеркивания с использованием CSS-свойств text-decoration , border-bottom , background-image , box-shadow , а также при помощи SVG.

CSS-свойство text-decoration

Свойство text-decoration — самый простой способ подчеркнуть текст. Но этому способу не хватает настраиваемости, и это проблема. Более продвинутые в этом смысле способы подчеркивания мы рассмотрим чуть дальше по тексту.

Давайте посмотрим, как при помощи text-decoration можно сделать простое подчеркивание.

Свойство text-decoration — это сокращенный вариант записи трех других свойств:

• text-decoration-line (указывается обязательно): определяет, где должна проходить линия подчеркивания. Возможные значения — overline (над текстом), underline (под текстом), underline overline (и над текстом, и под ним), line-through (перечеркивание текста).
• text-decoration-style : определяет стиль линии. Возможные значения — solid (простая прямая линия), dotted (линия из точек), dashed (пунктирная линия), wavy (волнистая линия), double (двойная линия).
• text-decoration-color : определяет цвет линии. Указываться может по-разному, например, #ccc, blue, currentColor.

Вот несколько примеров:

Чтобы убрать подчеркивание, нужно просто указать text-decoration: none .

Если вы хотите добавить подчеркивание, которое будет появляться только при наведении курсора, используйте следующие CSS-правила:

a < text-decoration: none; >a:hover

Альтернативой свойству text-decoration может послужить свойство border-bottom . С его помощью вы также можете задать внутренний отступ (padding) и отодвинуть линию подчеркивания от текста. В следующем примере первая ссылка создана при помощи свойства text-decoration , а вторая — при помощи border-bottom :

a:nth-of-type(1) < color: #32557f; text-decoration: underline #32557f dashed; >a:nth-of-type(2)

А теперь давайте перейдем к более интересным способам подчеркнуть текст.

Градиентное подчеркивание

При помощи свойства background: linear-gradient и других свойств фона можно создать градиентное подчеркивание. Вот пример:

background: linear-gradient(to left, #f69ec4, #f9dd94 100%); background-position: 0 100%; background-size: 100% 2px; background-repeat: repeat-x;

Почитать больше о градиентах можно в статье «CSS Gradients: 8 Examples of Usage».

Короткое подчеркивание

CSS позволяет делать подчеркивание любой ширины и высоты. Оно может быть и короче слова или ссылки. Например, если вам нужно создать короткое подчеркивание, чтобы выделить начало предложения или заголовок, можно использовать псевдоэлемент ::after со свойством border-bottom .

Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
 

a::after

Вы также можете установить толщину линии, например 2 px (в примере — border-bottom: 2px solid #f9dd94; ).

Подчеркивание «маркером»

При помощи свойства transform можно сделать короткое подчеркивание скошенной линией.

h1 < padding: 30px 0 8px; position: relative; >h1::before

Также можно сделать подчеркивание «маркером» длинного куска текста. Пример, на который меня вдохновил Codepen.io/Ash:

body < padding: 4rem; >.box

Правила, касающиеся этого подчеркивания:

:root < /* The intrinsic width of the underline stroke (in pixels). This is * the same as the height of the cap images. Don't specify the * units! This is because of some of the calculations we do later on. */ --underline-intrinsic-width: 8; /* The actual width of the underline stroke we want to render (in pixels). * You can modify this, and the sizing and positioning should be calculated * accordingly. Again, Don't specify the units! */ --underline-width: 12; /* The color used to draw the underline. It should match the color * used in the cap images. unfortunately we can't modify the SVG * fill via CSS because it's a background image. */ --underline-color: #f1a1e3; /* We need to know the width of the cap images so that we * can position everything on the x axis accordingly. */ --underline-cap-width: 4px; /* The border is positioned relative to the bottom of the line. * We can move it upwards a little to create an overlap effect. */ --underline-offset-y: -2px; /* The padding to add to the x axis. By default, the caps would be * aligned with the beginning and end of the line. */ --underline-padding-x: 0.12em; >.text < display: inline; --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width)); padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale))); box-decoration-break: clone; background-repeat: no-repeat; color: #32557f; background-image: linear-gradient(180deg, var(--underline-color), var(--underline-color)), var(--cap-image-left), var(--cap-image-right); background-position-x: calc(var(--underline-cap-width) * var(--underline-width-scale)), 0, 100%; background-position-y: calc(100% - var(--underline-offset-y) * -1); background-size: calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px), auto calc(var(--underline-width) * 1px), auto calc(var(--underline-width) * 1px); font-size: 3rem; font-weight: bold; --underline-width: 20; --underline-offset-y: -2px; /* The cap images to use that form the left and right shape.*/ --cap-image-left: url(https://files-6lc03kjqt.now.sh/left-2.svg); --cap-image-right: url(https://files-e7gkh52mq.now.sh/right-2.svg); >

Подчеркивание заголовка

Чтобы подчеркнуть заголовок, можно использовать свойство text-decoration: underline;, но при помощи свойства border-bottom можно сделать красивее. Правда, в последнем случае вам нужно добавить display: inline; , чтобы подчеркивание не было длиннее самого слова.

Многострочное подчеркивание

Допустим, мы хотим создать подчеркивание нескольких строк текста. Для этого подойдут не все способы.

В приведенных ниже примерах использовано свойство background-image , поскольку оно позволяет захватить несколько строк. И хотя вы можете использовать настоящие изображения, в нашем случае это просто линия. Мы используем линейный градиент, чтобы генерировать изображение.

Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
 

p < margin: 0 auto; line-height: 1.5em; >span

background-repeat: repeat-x; делает подчеркивание горизонтальным.

Если изменять второе значение в background-position: 0 100%; , можно регулировать, насколько далеко от верха должно быть подчеркивание.

Также можно менять второе значение в background-size: 100% 3px; , чтобы подобрать нужную высоту подчеркивания.

Кроме того, можно сделать так, чтобы многострочное подчеркивание показывалось только при наведении курсора.

1. Для начала нужно удалить дефолтное значение text-decoration .
2. Использование background-image позволяет охватить несколько строк. Поскольку мы хотим, чтобы подчеркивание было того же цвета, что и ссылка, мы используем currentColor и для начала, и для конца градиента. currentColor велит браузеру использовать цвет элемента из основного свойства цвета.
3. При помощи background-position мы задаем позицию изображения в нижнем левом углу. В нашем примере 0% означает горизонтальное позиционирование, а 100% — вертикальное. Также мы отключаем background-repeat , чтобы предотвратить создание нескольких экземпляров изображения. Эти два свойства можно записывать при помощи короткого формата записи ( background: no-repeat 0 100%; ).
4. При помощи background-size мы указываем нулевую ширину и высоту в 2 px. Нулевая ширина означает, что подчеркивание будет видимым только при наведении.
5. Устанавливаем для свойства transition значение background-size и скорость изменения 0,3 секунды.
6. При наведении курсора на ссылку мы меняем ширину изображения на 100%. Таким образом текст становится полностью подчеркнутым, а кроме того создается анимация.

p a < color: #32557f; text-decoration: none; background: no-repeat 0 100%; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; transition: background-size .3s ease; >p a:hover, a:focus

Использование изображений в качестве подчеркивания в CSS

Для стилизации подчеркивания в CSS также можно использовать изображения (в формате SVG или PNG). Ниже приведены примеры (на основе CodePen автор John D. Jameson).

body < line-height: 1.6; >p < background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/star.svg"); background-position: 0 1.3em; background-size: 10px 9px; background-repeat: repeat-x; >

body < line-height: 1.8; >p < background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/heart.png"); background-position: 0 1.4em; background-size: 15px 9px; color: #e8665f; background-repeat: repeat-x; >

Анимированное подчеркивание при наведении

Давайте теперь создадим анимированное подчеркивание для кнопок меню. Нам понадобится следующая разметка:

Вот общие стили для четырех примеров (специфические стили будут приведены ниже):

body < padding: 100px 50px; font-family: "Quicksand", sans-serif; font-size: 30px; line-height: 1.3; color: #fff; background-color: #7eb4e2; >ul < margin: 100px auto 0; list-style: none; display: flex; flex-direction: column; justify-content: space-between; text-align: center; padding: 0; max-width: 600px; >@media screen and (min-width: 600px) < ul < flex-direction: row; >>

Мы удаляем стандартное значение text-decoration и добавляем границу (border) при помощи псевдоэлементов CSS. Используя свойство CSS transition , мы анимируем этот border.

Анимированное подчеркивание при наведении № 1

li < position: relative; padding: 15px 0; >a < color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: 0.15em; display: inline-block; padding: 15px 20px; position: relative; >a::after < content: ""; position: absolute; bottom: 0; left: 50%; display: block; background: none repeat scroll 0 0 transparent; height: 2px; width: 0; background: #fff; transition: width 0.3s ease 0s, left 0.3s ease 0s; >a:hover::after

Анимированное подчеркивание при наведении № 2

li < position: relative; padding: 30px; >a < color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: .25em; display: inline-block; padding: 15px; position: relative; >a:hover::after < width: 100%; right: 0; >a::after

Анимированное подчеркивание при наведении № 3

ul < margin: 40px; padding: 0 40px; background-color: #32557f; min-width: 200px; >a < display: inline-block; text-decoration: none; color: #fff; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; position: relative; transition: all 0.4s ease; padding: 30px; >a::after < content: ""; position: absolute; height: 2px; background-color: #f69ec4; width: 0; left: 50%; bottom: 0; transform: translateX(-50%); transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) all; >a:hover < color: #f69ec4; >a:hover::after

Анимированное подчеркивание при наведении № 4

a < text-decoration: none; margin: 10px; display: inline-block; color: #f9dd94 ; >a::before, a::after < content: ""; height: 4px; background: #32557f; display: block; transition: width 0.3s ease-in-out; margin: 0 auto; >a::before < width: 100%; >a::after < width: 0; >a:hover::before < width: 0; >a:hover::after

Анимированное подчеркивание, созданное при помощи свойства box-shadow

Подчеркивание также можно создать при помощи свойства box-shadow , которое добавляет тень к HTML-элементу. При наведении тень может увеличиваться. Посмотрите на пример:

Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
 

a < text-decoration: none; box-shadow: inset 0 -2px 0 rgba(50,85,127,0.5), 0 2px 0 rgba(50,85,127,0.5); transition: box-shadow .3s; color: inherit; overflow: hidden; >a:hover

Здесь мы добавили к элементу две тени:

• inset меняет тень с внешней (outset) на внутреннюю
• 0 -30px 0 rgba(50,85,127,0.5) : 0 — это смещение по горизонтали, -30px — смещение по вертикали, 0 — радиус размытия, а rgba(50,85,127,0.5) — полупрозрачная голубая тень.
• 0 2px 0 rgba(50,85,127,0.5) : 0 — смещение по горизонтали, 2px — смещение по вертикали, 0 — радиус размытия.

Почитать больше о тенях можно здесь.

Подчеркивание «от руки», анимированное при наведении

Наконец, давайте создадим необычные подчеркивания, которые будут проявляться при наведении курсора. Первое будет напоминать подчеркивание от руки, а второе — выделение маркером от руки.

Подобные эффекты мы создадим при помощи масштабируемой векторной графики (SVG). У нас будет HTML-элемент для SVG и блок для текста со ссылками (выбирайте или .ink-svgline , или .link-svgmarker ).

Заменяем комментарий «Invisible SVG block» («Невидимый SVG-блок») на следующий код:

Вот правила CSS, позволяющие спрятать этот элемент:

.svg-wrap

А эти правила будут общими для обоих примеров:

body < padding: 100px 50px; font-family: "Quicksand", sans-serif; font-size: 30px; line-height: 1.8; color: #fff; background-color: #7eb4e2; >a < color: #404d5b; text-decoration: none; outline: none; >section < position: relative; z-index: 1; /* needed for setting pseudo-element z-index */ overflow: hidden; backface-visibility: hidden; >section a < position: relative; display: inline-block; outline: none; color: #404d5b; vertical-align: bottom; text-decoration: none; white-space: nowrap; >section a::before, section a::after

Первый пример подчеркивания с использованием SVG:

Заменяем комментарий «First SVG example» следующим кодом (используйте любой свой текст, главное — не меняйте структуру классов):

Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
 

.link-svgline a svg.link-svgline < position: absolute; top: 100%; left: 0; overflow: hidden; margin: 0; width: 100%; height: 20px; transition: stroke-dashoffset 0.3s ease-in-out; transform: translateY(-90%); fill: none; stroke: #b1d474; stroke-width: 5; stroke-dasharray: 400px; stroke-dashoffset: 400px; >.link-svgline a:hover svg.link-svgline

Второй пример подчеркивания с использованием SVG:

Заменяем комментарий «Second SVG example» следующим кодом:

Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
 

.link-svgmarker a svg.link-svgline < position: absolute; top: 100%; left: 0; z-index: -1; overflow: hidden; margin: 0; width: 100%; height: 60px; opacity: 0.5; transition: stroke-dashoffset 0.3s ease-in-out; transform: translateY(-100%); fill: none; stroke: #f0f567; stroke-width: 36; stroke-dasharray: 400px; stroke-dashoffset: 400px; >.link-svgmarker a:hover svg.link-svgline

На последние два примера меня вдохновило Tympanus demo.

box-shadow

CSS-свойство box-shadow добавляет тень к элементу. Через запятую можно задать несколько теней. Тень описывается смещениями по оси X и Y относительно элемента, радиусом размытия и распространения, а также цветом.

Интерактивный пример

Свойство box-shadow включает отбрасывание тени от границ практически любого элемента. Если для элемента с тенью задан border-radius , то отбрасываемая тень также будет с закруглёнными углами. Порядок наложения нескольких теней такой же, что и у текстовых теней: первая указанная тень будет поверх остальных.

Генератор теней — интерактивный инструмент, позволяющий сгенерировать значение для box-shadow .

Синтаксис

/* Ключевые слова */ box-shadow: none; /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Любое количество теней через запятую */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Глобальные значения */ box-shadow: inherit; box-shadow: initial; box-shadow: revert; box-shadow: revert-layer; box-shadow: unset; 

Каждая тень определяется следующим образом:

• Два, три или четыре значения длины ( ).
  • Если указаны только два значения, они будут означать смещение по X ( ) и смещение по Y ( ).
  • Третье значение устанавливает радиус размытия ( ).
  • Четвёртое значение задаёт радиус распространения ( ).

  Для одновременного создания нескольких теней используйте список значений, разделённых запятыми.

  Значения

  Если не указано (по умолчанию), то тень будет отбрасываться от элемента (придавая эффект выпуклости блоку). Наличие ключевого слова inset отбрасывает тень внутри элемента (создавая эффект вдавленности блока). Внутренние тени начинаются с рамок элемента (даже если они прозрачные), над фоном элемента, но не под его содержимым.

  …для длинного прямого края тени должен быть создан цветовой переход, равный длине расстояния размытия, который перпендикулярен и центрирован по краю тени. Переход начинается от указанного цвета тени в конечной точке радиуса внутри тени до полностью прозрачного цвета в конечной точке пределов радиуса.

  Интерполяция

  Каждая тень в списке ( none считается за пустой список) интерполируется через значения цвета x, y, радиуса размытия и (когда это допустимо) и радиуса расширения. Для каждой тени, если обе входные тени отмечены как inset или ни одна из них таковой не является, то интерполированная тень будет соответствовать входным теням. Если в любой паре входных теней одна из них является внутренней ( inset ), а другая нет, то список теней не интерполируется. Если количество теней отличается в разных списках, то более короткий список дополняется в конце тенями, цвет которых прозрачен ( transparent ), все значения длин равны 0 , и где inset соответствует более длинному списку.

  Формальное определение

  Начальное значение	none
  Применяется к	все элементы. Это также применяется к ::first-letter .
  Наследуется	нет
  Обработка значения	любая абсолютная длина; работает любой указанный цвет; если другое не указано
  Animation type	список теней

  Формальный синтаксис

  box-shadow =
  # (en-US)

  =
  ? (en-US) && (en-US)
  [ (en-US) [ (en-US) ? (en-US) ] (en-US) ? (en-US) ] (en-US) && (en-US)
  ? (en-US)

  Примеры

  Добавление трёх теней

  В этом примере применяется сразу три тени: внутренняя тень, обычная внешняя отбрасываемая тень, а также тень размером 2 пикселя, имитирующая рамку (для создания рамки можно было воспользоваться outline ).

  HTML

  blockquote> q> Меня уколют ваши речи,br /> Об ваши взгляды обожгусь,br /> И ранит ложь сильней картечиbr /> Но все равно я поднимусь. q> p>— Майя Энджелоуp> blockquote> 

  CSS

  blockquote  padding: 20px; box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3); > 

  Результат

  Использование нулевых значений для смещений и радиуса размытия

  Когда смещение по X ( x-offset ), смещение по Y ( y-offset ) и радиус размытия ( blur ) равны нулю, тень будет представлять собой цветной контур одинакового размера на всех сторонах блока. Тени отображаются с конца списка, поэтому первая тень накладывается поверх последующих. Когда в border-radius указано значение по умолчанию 0 , углы тени становятся прямыми углами. Соответственно, если указать в border-radius любое другое значение, углы станут закруглёнными.

  Чтобы тень не перекрывала соседние элементы и не выходила за границу содержащего блока, был добавлен внешний отступ размером, равный самому большому радиусу размытия в списке теней. Тень не влияет на размеры блочной модели (en-US) .

  HTML

  div>p>Привет, мирp>div> 

  Применение цвета к HTML-элементам с помощью CSS

  Использование цвета — одна из фундаментальных форм человеческого восприятия, так дети экспериментируют с цветом ещё до того, как начинают осознанно рисовать. Возможно, именно поэтому цвет — одна из первых вещей, с которой люди хотят экспериментировать, изучая разработку веб-сайтов. С помощью CSS, существует множество способов присвоить цвет HTML элементам, чтобы придать им желаемый вид. Эта статья даёт базовые представления о всех способах применения цвета к HTML-элементам с помощью CSS.

  К счастью, присвоить цвет к HTML-элементу очень просто, и это можно сделать практически со всеми элементами.

  Завершим мы статью размышлениями на тему как использовать цвет с умом: как выбрать подходящий цвет, учитывая потребности людей с различными визуальными способностями.

  Что может иметь цвет

  На уровне элементов HTML, всему можно присвоить цвет. С точки зрения отдельных составляющих элементов, таких как текст, границы и т.д., существует ряд свойств CSS, с помощью которых можно присвоить цвет.

  На фундаментальном уровне, свойство color (en-US) определяет цвет текста HTML-элемента, а свойство background-color — цвет фона элемента. Они работают практически для всех элементов.

  Текст

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

  Свойство color применяется к тексту и любому оформлению текста, например: подчёркивание, линии на текстом, перечёркивание и т.д.

  Цвет фона текста.

  Добавляет и устанавливает параметры тени для текста. Один из параметров тени — это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. См. Text drop shadows, чтобы узнать больше.

  По умолчанию, элементы оформление текста (подчёркивание, перечёркивание) используют цвет свойства color . Но вы можете присвоить другой цвет с помощью свойства text-decoration-color .

  Цвет, который используется для выделения диакритических знаков, прилегающих к каждому текстовому символу. Это свойство используется преимущественно для восточноазиатских языков.

  Цвет, который используется для каретки (caret (en-US)) (курсора ввода текста). Применимо только к редактируемым элементам, таким как и (en-US) или элементам , для которых установлен атрибут contenteditable .

  Блоки

  Каждый элемент представляет собой прямоугольный блок с каким-то содержимым, фоном и границей.

  См. раздел Borders с перечнем свойств CSS, с помощью которых можно присвоить цвет границам блока.

  Цвет фона блока.

  Цвет линий, которые разделяют колонки текста.

  Цвет контура, вокруг границы элемента. Этот контур отличается от границы элемента тем, что он не занимает место в документе и может перекрывать другой элемент. Обычно его используют как рамку-индикатор, чтобы показать какой элемент находится в фокусе.

  Границы

  Вокруг любого элемента можно создать границу (en-US) , т.е. линию вокруг содержимого элемента. См. Box properties, чтобы узнать больше про отношения между элементами и их границами, и статью Оформляем Границы с Помощью CSS (en-US) , чтобы узнать больше про то, как применять стили к границам.

  Существует краткая запись border , которая позволяет задать сразу все свойства границы, включая даже не связанные с цветом свойства, такие как толщина линии (width), стиль линии (style (en-US) ): сплошная (solid), штриховая (dashed) и так далее.

  Задаёт единый цвет для всех сторон границы элемента.

  Позволяет установить цвет соответствующей стороне границы элемента: border-left-color — левая граница, border-right-color — правая, border-top-color — верхняя, border-bottom-color — нижняя.

  С помощью этих свойств вы можете установить цвет границ, которые расположены ближе всего к началу и концу блока. Для письменности слева направо, начало границы блока — верхний край, а конец — нижний. Не путайте с началом и концом строки, где начало — это левый край, а конец — правый.

  Эти свойства определяют цвет границы, расположенной ближе всего к началу и концу текста в блоке. Сторона начала и конца зависит от свойств writing-mode , direction и text-orientation (en-US), которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то border-inline-start-color применяется к правой стороне границы.

  Как можно ещё использовать цвет

  CSS не единственная web-технология, которая поддерживает цвет.

  Позволяет создавать растровую 2D-графику в элементе . См. Canvas tutorial, чтобы узнать больше.

  SVG (Scalable Vector Graphics — Масштабируемая Векторная Графика)

  Позволяет создавать изображения с помощью команд, которые рисуют определённые фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе , как и любое другое изображение.

  Библиотека Веб-Графики (The Web Graphics Library) — это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. Learn WebGL for 2D and 3D, чтобы узнать больше..

  Как задать цвет

  Для того чтобы задать цвет в CSS, необходимо найти способ как перевести понятие «цвета» в цифровой формат, который может использовать компьютер. Обычно это делают разбивая цвет на компоненты, например какое количество единиц основных цветов содержится в данном цвете или степень яркости. Соответственно, есть несколько способов как можно задать цвет в CSS.

  Подробнее о каждом значения цвета, можно прочитать в статье про CSS .

  Ключевые слова

  Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный ( red ), синий ( blue ), или оранжевый ( orange )), оттенки серого (от чёрного ( black ) к белому ( white ), включая такие цвета как темносерый ( darkgray ) или светло-серый ( lightgrey )), а также множество других смешанных цветов: lightseagreen , cornflowerblue , и rebeccapurple .

  См. Color keywords — полный перечень всех доступных ключевых слов.

  RGB значения

  Есть три способа передачи RGB цвета в CSS.

  Шестнадцатеричная запись в виде строки

  Шестнадцатеричная запись передаёт цвет, используя шестнадцатеричные числа, которые передают каждый компонент цвета (красный, зелёный и синий). Запись также может включать четвёртый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 — 0xFF) или, опционально, как число от 0 до 15 (0x0 — 0xF). Каждый компонент необходимо задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет рассчитывается используя число каждого компонента дважды: «#D» превращается в «#DD» .

  Цвет в шестнадцатеричной записи всегда начинается с символа «#» . После него начинаются шестнадцатеричные числа цветового кода. Запись не зависит от регистра.

  Задаёт полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатеричным числом 0xrr , зелёного — 0xgg и синего — 0xbb .

  Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xrr , зелёного — 0xgg и синего — 0xbb . Альфа канал представлен 0xaa ; чем ниже значение, тем прозрачнее становится цвет.

  Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr , зелёного — 0xg и синего — 0xb .

  Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr , зелёного — 0xg и синего — 0xb . Альфа канал представлен 0xa ; чем ниже значение, тем прозрачнее становится цвет.

  Например, вы можете представить непрозрачный ярко-синий цвет как «#0000ff» или «#00f» . Для того, чтобы сделать его на 25% прозрачным, вы можете использовать «#0000ff44» или «#00f4» .

  RGB запись в виде функции

  RGB запись в виде функции, как и шестнадцатеричная запись, представляет цвет, используя красный, зелёный и синий компоненты (также, опционально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией rgb() . Данная функция принимает как вводные параметры значения красного, зелёного и синего компонентов и, опционально, четвёртого компонента — значение альфа канала.

  Допустимые значения для каждого из этих параметров:

  Альфа канал — это числовое значение между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Также можно указать значение в процентах, где 0% соответствует 0.0, а 100% — 1.0.

  Например, ярко-красный с 50% прозрачностью может быть представлен как rgb(255, 0, 0, 0.5) или rgb(100%, 0, 0, 50%) .

  HSL запись в виде функции

  Дизайнеры часто предпочитают использовать цветовую модель HSL, где H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness or Luminance (светлота). В браузерах HSL цвет представлен через запись HSL в виде функции. CSS функция hsl() очень похожа на rgb() функцию.

  

  Рис. 1. Цилиндрическая модель HSL. Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого тёмного к самому светлому (от чёрного к белому). Изображение представлено пользователем SharkD в Wikipedia, распространяется на правах лицензии CC BY-SA 3.0 .

  Значение компонента оттенок (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS-свойством , а именно — в градусах ( deg ), радианах ( rad ), градиентах ( grad ) или поворотах ( turn ). Но компонент оттенок никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.

  Компонент насыщенность (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).

  Подумайте об этом как о создании идеального цвета краски:

  1. Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент hue (оттенок): значение представляющее угол вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.
  2. Далее выберете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это luminance/ lightness (яркость). Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к чёрному, или что-то среднее? Данный компонент определяется в процентах, где 0% — совершенный чёрный цвет и 100% — совершенный белый (независимо от насыщенности или оттенка). Средние значения — это буквальная серая область.
  3. Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент saturation (насыщенность) определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.

  Опционально вы также можете включить альфа-канал, чтобы сделать цвет менее прозрачным.

  Вот несколько примеров цвета в HSL записи:

  table  border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; border-spacing: 0; border-collapse: collapse; > th, td  border: 1px solid black; padding: 4px 6px; text-align: left; > th  background-color: hsl(0, 0%, 75%); > 

  table> thead> tr> th scope="col">Color in HSL notationth> th scope="col">Exampleth> tr> thead> tbody> tr> td>code>hsl(90deg, 100%, 50%)code>td> td style="background-color: hsl(90deg, 100%, 50%);"> td> tr> tr> td>code>hsl(90, 100%, 50%)code>td> td style="background-color: hsl(90, 100%, 50%);"> td> tr> tr> td>code>hsl(0.15turn, 50%, 75%)code>td> td style="background-color: hsl(0.15turn, 50%, 75%);"> td> tr> tr> td>code>hsl(0.15turn, 90%, 75%)code>td> td style="background-color: hsl(0.15turn, 90%, 75%);"> td> tr> tr> td>code>hsl(0.15turn, 90%, 50%)code>td> td style="background-color: hsl(0.15turn, 90%, 50%);"> td> tr> tr> td>code>hsl(270deg, 90%, 50%)code>td> td style="background-color: hsl(270deg, 90%, 50%);"> td> tr> tbody> table> 

  Примечание: Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах ( deg ).

  Использование цвета

  Теперь, когда вы знаете какие существуют свойства CSS для присваивания цвета к элементам и какие есть форматы описания цвета, вы можете соединить это вместе, чтобы начать использовать цвет. Как вы уже видели в списке под разделом Что может иметь цвет, существует множество вещей, к которым можно применить цвет, используя CSS. Давайте взглянем на это с двух сторон: использовать цвет в таблицах стилей (stylesheet (en-US)) и добавлять, изменять цвет, используя JavaScript код.

  Цвет в таблицах стилей CSS

  Самый простой способ присвоить цвет элементу и то, как это обычно делается — это просто указать цвет в CSS. Мы не будем останавливаться на каждом из вышеупомянутых свойств, а просто рассмотрим несколько примеров. Где бы вы не использовали цвет, принцип один и тот же.

  Давайте начнём наш пример с результата, который нам нужно достичь:

  HTML

  HTML, который создаёт вышеупомянутый пример:

  div class="wrapper"> div class="box boxLeft"> p>This is the first box.p> div> div class="box boxRight"> p>This is the second box.p> div> div> 

  Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML-элементам..

  CSS

  CSS мы рассмотрим более детально, чтобы по очереди проанализировать все интересные части.

  .wrapper  width: 620px; height: 110px; margin: 0; padding: 10px; border: 6px solid mediumturquoise; > 

  Но больше всего нас интересует свойство граница border , которое устанавливает границу вокруг внешнего края элемента. Данная граница представлена сплошной линией, шириной в 6 пикселей, светло-бирюзового цвета ( mediumturquoise ).

  Два цветных блока имеют ряд одинаковых свойств, поэтому далее мы установим класс .box , который определит эти общие свойства:

  .box  width: 290px; height: 100px; margin: 0; padding: 4px 6px; font: 28px "Marker Felt", "Zapfino", cursive; display: flex; justify-content: center; align-items: center; > 

  Вкратце класс .box устанавливает размер каждого блока и параметры шрифта. Также мы используем CSS Flexbox, чтобы с лёгкостью отцентрировать содержимое каждого блока. Мы включаем режим flex с помощью display: flex , и присваиваем значение center justify-content и align-items . Затем мы создаём отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.

  .boxLeft  float: left; background-color: rgb(245, 130, 130); outline: 2px solid darkred; > 

  Класс .boxLeft , который используется для стилизации левого блока, выравнивает контейнер по левому краю и присваивает цвета:

  • background-color определяет цвет фона блока значением rgb(245, 130, 130) .
  • outline , в отличие от привычного нам свойства border , не влияет на положение блока и его ширину. Outline представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово darkred , которое используется для определение цвета.
  • Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство color (en-US) будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это чёрный цвет.

  .boxRight  float: right; background-color: hsl(270deg, 50%, 75%); outline: 4px dashed rgb(110, 20, 120); color: hsl(0deg, 100%, 100%); text-decoration: underline wavy #88ff88; text-shadow: 2px 2px 3px black; > 

  Класс .boxRight описывает свойства правого блока. Блок выравнивается по правому краю и становится рядом с предыдущим блоком. Затем определяются следующие цвета:

  • background-color определяется значением HSL: hsl(270deg, 50%, 75%) . Это светло-фиолетовый цвет.
  • Outline блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона ( rgb(110, 20, 120) ).
  • Цвет текста определяется свойством color (en-US), значение которого hsl(0deg, 100%, 100%) . Это один из многих способов задать белый цвет.
  • С помощью text-decoration (en-US) мы добавляем зелёную волнистую линию под текстом.
  • И наконец, свойство text-shadow добавляет небольшую чёрную тень тексту.

  Предоставляем возможность пользователю выбрать цвет

  There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you’re implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it’s been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the element, by using «color» as the value of its type attribute.

  The element represents a color only in the hexadecimal string notation covered above.

  Example: Picking a color

  Let’s look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker’s value is displayed.

  Примечание: On macOS, you indicate that you’ve finalized selection of the color by closing the color picker window.

  HTML

  The HTML here creates a box that contains a color picker control (with a label created using the element) and an empty paragraph element ( ) into which we’ll output some text from our JavaScript code.

  div id="box"> label for="colorPicker">Border color:label> input type="color" value="#8888ff" id="colorPicker" /> p id="output">p> div> 

  CSS

  The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won’t last, courtesy of the JavaScript below.

  #box  width: 500px; height: 200px; border: 2px solid rgb(245, 220, 225); padding: 4px 6px; font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"; > 

  JavaScript

  The script here handles the task of updating the starting color of the border to match the color picker’s value. Then two event handlers are added to deal with input from the element.

  let colorPicker = document.getElementById("colorPicker"); let box = document.getElementById("box"); let output = document.getElementById("output"); box.style.borderColor = colorPicker.value; colorPicker.addEventListener( "input", function (event)  box.style.borderColor = event.target.value; >, false, ); colorPicker.addEventListener( "change", function (event)  output.innerText = "Color set to " + colorPicker.value + "."; >, false, ); 

  The input (en-US) event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box’s border color to match the color picker’s current value.

  The change (en-US) event is received when the color picker’s value is finalized. We respond by setting the contents of the

  element with the ID «output» to a string describing the finally selected color.

  Using color wisely

  Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren’t well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.

  Finding the right colors

  Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can’t replace having a good designer helping you make these decisions, they can definitely get you started.

  Base color

  The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage Mountain Dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

  • A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
  • A color that comes from imagery associated with what your content is about. If you’re creating a web site about a given item or product, choose a color that’s physically present on that item.
  • Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.

  When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

  Примечание: The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

  Fleshing out the palette

  Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See Color and accessibility for a brief explanation of why this matters.

  A few examples (all free to use as of the time this list was last revised):

  • MDN’s color picker tool
  • Paletton
  • Adobe Color CC online color wheel

  When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you’ll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

  Примечание: Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

  Color theory resources

  A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

  An online course which introduces concepts such as what color is, how it’s percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.

  Color and accessibility

  There are several ways color can be an accessibility problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it’s important to consider your use of color carefully.

  You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

  Примечание: The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won’t be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what’s happening.

  For more information about color blindness, see the following articles:

  • Medline Plus: Color Blindness (United States National Institute of Health)
  • American Academy of Ophthamology: What Is Color Blindness?
  • Color Blindness & Web Design (Usability.gov: United States Department of Health and Human Services)

  Palette design example

  Let’s consider a quick example of selecting an appropriate color palette for a site. Imagine that you’re building a web site for a new game that takes place on the planet Mars. So let’s do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet’s surface. We use a color picker tool to select a sample of the color we choose.

  Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A , which is an appropriate rusty orange-red color that’s so stereotypical of the Martian surface.

  Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:

  

  Next, we enter our color’s hex code ( D79C7A ) into the «Base RGB» box at the bottom-left corner of the tool:

  

  We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the «add complementary» toggle underneath the menu that lets you select the palette type (currently «Monochromatic»). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C .

  

  If you’re unhappy with the color that’s proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don’t like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

  

  That greyish blue in the top-right looks pretty good. Clicking on it, we find that it’s #556E8D . That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

  

  Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

  Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there’s just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It’s easy to go too far in one way or another so be sure to get feedback on your colors once you’ve selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

  See also

  • Drawing graphics (en-US)
  • Graphics on the web
  • MDN’s color picker tool (en-US)

  Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

  This page was last modified on 7 авг. 2023 г. by MDN contributors.

  Читать:

  1с как узнать версию бэд