Начинаем работу с HTML + CSS
Начинаем работу с HTML + CSSОглавление
- 1. Написание HTML кода
- 2. Изменяем цвета
- 3. Изменяем шрифты
- 4. Добавляем навигацию
- 5. Украшаем ссылки
- 6. Добавляем горизонтальные линии
- 7. Подключаем внешний CSS
- Дальнейшее изучение
Это краткое руководство предназначено для людей, начинающих свое изучение CSS в первый раз.
Оно не дает глубоких знаний о CSS. Руководство просто объясняет как создать HTML файл, CSS файл и как заставить их работать вместе. После прочтения данной статьи, Вы можете продолжить дальнейшее изучение других обучающих руководств для получения информации о более значительных особенностях HTML и CSS. Или же перейти к изучению материала в интерактивных HTML или CSS редакторах, которые помогут Вам при создании сайтов.
В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:
Полученная HTML страница с цветами и разметкой сделанной при помощи CSS.
Заметьте, что я не претендую на то, что это очень красиво ☺
Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.
ШАГ 1: написание HTML кода
Для этой статьи я предлагаю использовать простейшие утилиты, например Блокнот от Windows, TextEdit на Mac или KEdit под KDE вполне подойдут под задачу. Как только Вы поймете основные принципы, вы можете переключиться на использование более продвинутых инструментов разработки, например на такие коммерческие программы как Style Master или DreamWeaver. Но для создания первого CSS файла не стоит отвлекаться на множество расширенных возможностей.
Не используйте текстовый редактор наподобие Microsoft Word или
OpenOffice. Эти программы обычно создают файлы, которые не могут быть
прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные
текстовые файлы без какого-либо формата.
Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> </head> <body> <!-- Site navigation menu --> <ul> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul> <!-- Main content --> <h2>My first styled page</h2> <p>Welcome to my styled page! <p>It lacks images, but at least it has style. And it has links, even if they don't go anywhere… <p>There should be more here, but I don't know what yet. <!-- Sign and date the page, it's only polite! --> <address>Made 5 April 2004<br> by myself.</address> </body> </html>
Вам не обязательно это перенабирать — вы можете просто скопировать и вставить текст с этой страницы в редактор.
(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit’у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”.)
Первая строчка нашего HTML файла говорит браузеру о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем случае — это HTML версии 4.01.
Слова между < и > называются тэгами и как вы можете видеть, документ содержится между <html> и </html> тэгами. Между <head> and </head> находится различная информация, которая не отображается в самом документе. Например там содержится заголовок документа. Позже мы добавим туда и связь с CSS файлом.
Тэг <body> это место содержимого документа. В принципе,
все что находится внутри этого тэга за исключением текста между
<!— и —>, являющегося комментариями, будлет выведено на
экран.
Комментарий браузером игнорируется.
Тэг <ul> в нашем примере задает отображение “неупорядоченного списка” (Unordered List), т.е. списка, элементы которого непронумерованы. Тэги <li> начинают “элементы списка” (List Item). Тэг <p> является “параграфом”. А тэг <a> — “якорь” (Anchor), с помощью которого создаются гиперссылки.
Код HTML в редактор KEdit.
Если вы хотите узнать какие бывают тэги в скобках <…>, то вы можете изучить Начало работы с HTML. Но сначала пару слов о структуре нашей HTML страницы.
- Тэг “ul” — список состоящий из одной ссылки на каждый элемент списка. Эта структура послужит нам “навигацией” по нашему сайту связывая с нами другие страницы нашего гипотетического сайта . Предполагается, что все страницы нашего сайта будут иметь схожее или идентичное меню.
- Элементы “h2” и “p” задают содержимое уникальное каждой страницы, в то время как подпись (“address”) снизу снова будет повторяться на всех страницах.
Отметьте, что я не закрыл “li” и “p” элементы. В HTML (но не в XHTML), можно опускать закрывающие тэги </li> и </p>, что я и сделал в данном случае, для того чтобы было проще текст. Но вы можете добавить их, если считаете необходимым.
Давайте предположим, что данная страница будет одной из страниц Веб сайта, состоящего из нескольких похожих страниц. Как мы и договорились, эта страница будет содержать ссылки на другие страницы нашего гипотетического сайта, уникальное содержимое и подпись.
Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage.html”. Не закрывайте редактор, он нам еще потребуется.
(Если вы используете TextEdit для Mac OS X версии меньше чем 10.4,
вы увидите опцию «Don’t append the .txt extension» в диалоговом окне
«Save as». Выберите эту опцию, потому что имя файла “mypage.html” уже
включает в себя расширение.
Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем. Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)
Как Вы видите, страница выглядит достаточно скучно…
ШАГ 2: изменяем цвета
Возможно, вы видите некоторый черный текст на белом фоне, но это зависит от конфигурации браузера. Для того чтобы страница выглядела более стильно, мы можем сделать очень легко одну простую вещь — добавить цвета. (Оставьте окно браузера открытым — мы к нему еще вернемся)
Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим CSS
стили и HTML разметку в разные файлы. Раздельное хранение хорошо тем,
что легче использовать те же самые стили для множества HTML файлов:
Вам нужно написать CSS стили только один раз.
Но на этом шаге мы
оставим все в одном файле.
Нам нужно добавить элемент <style> к HTML файлу. Определения стилей будут внутри этого тэга. Возвращаемся к редактору и добавляем следующие пять строчек в заголовок HTML кода между тэгами <head> и </head>. Строки, которые надо добавить выделены красным (с 5-й по 9-ю).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
[и т.д.]
Первая строка говорит браузеру о том, что это таблица стилей и что она написана на CSS (“text/css”). Вторая строка говорит, что мы применяем стиль к элементу “body”. Третья устанавливает цвет текста в пурпурный, а следующая устанавливает цвет фона в желто-зеленый оттенок.
Таблицы стилей CSS создаются согласно
- селектор (в нашем примере: “body”), которые говорит о том, к какой части документа применить правило;
- свойство (в нашем примере свойствами являются ‘color’ и ‘background-color’), которое указывает что именно мы устанавливаем у данного элемента, выбранного селектором;
- и значение (‘purple’ и ‘#d8da3d’), которое устанавливает
значение атрибута.
Наш пример показывает что правила могут быть скомбинированы. Мы установили два свойства, так же мы могли задать их раздельно:
body { color: purple }
body { background-color: #d8da3d }
но поскольку оба правила относятся к body мы записали “body” один раз и поместили свойства и значения вместе. Для получения большей информации о селекторах смотрите главу 2 из Lie & Bos.
Фон элемента body так же является фоном целого документа. Мы явно не назначили другим элементам (p, li, address…) фона, так что по умолчанию у них его нет (или он прозрачный). Свойство ‘color’ устанавливает цвет текста элемента body, но все остальные элементы внутри body наследуют этот цвет, пока для них не задан другой в виде другого правила. (Мы добавим другие цвета позже.)
Теперь сохраните этот файл (используйте команду “Сохранить” или
“Save” из файлового меню) и переключитесь обратно в браузер. Если вы
нажмете кнопку “обновить” , то изображение сменится со “скучной”
страницы на разукрашенную (но все еще однообразную) страницу.
Кроме
ссылок сверху, весь текст должен быть пурпурный на желто-зеленом фоне.
Теперь браузер показывает страницу к которой мы добавили цвет.
В CSS можно задавать цвета несколькими способами. Наш пример показывает два из них: по имени (“purple”) и по шестнадцатиричному коду (“#d8da3d”). Существует порядка 140 имен цветов и 16 шестнадцатиричных значений. Добавляя прикосновение стиля объясняет детали относительно этих кодов.
ШАГ 3: изменяем шрифты
Еще одна вещь которую можно сделать — шрифтовое разнообразие разных элементов на странице. Давайте напишем шрифтом “Georgia” весь текст, исключая заголовки, которые мы напишем “Helvetica.”
Поскольку в Web никогда нельзя быть целиком уверенным в том, какие
шрифты установлены на компьютерах посетителей, мы добавим
альтернативные способы отображения: если Georgia не найдена, то мы
будем использовать Times New Roman или Times, а если и он не найден,
то браузер может взять любой шрифт
с засечками.
Если отсутствует Helvetica, то мы можем попробовать
использовать Geneva, Arial или SunSans-Regular поскольку они очень
похожи по начертанию, ну а если у пользователя нет таких шрифтов, то
браузер может выбрать любой другой шрифт без засечек.
В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h2 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[и т.д.]
Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.
Сейчас шрифт заголовков и основного текста различается.
ШАГ 4: добавляем навигацию
Список наверху HTML страницы представляет из себя навигацию по сайту. Множество сайтов имеют навигационное меню вверху страницы или по сторонам от содержимого. Наша страница тоже не будет исключением. Мы поместим меню слева, потому что это несколько привлекательнее, чем наверху.
Навигация уже на странице. Это список <ul> вверху. Ссылки в нем не работают, потому что наш “сайт” пока что состоит только из одной страницы, но это неважно в данный момент. Конечно же, на настоящем сайте не должно быть неработающих ссылок.
Нам нужно переместить список налево и сдвинуть остальное содержимое немного вправо, чтобы создать пространство для него. Свойства CSS которые мы будем использовать для этого — ‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’ (для сдвига меню).
Есть и другие пути. Если вы поищете термины “столбец” или “верстка”
на странице изучая
CSS, вы найдете несколько готовых к использованию
шаблонов.
Но для наших целей сгодится и такой.
В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h2 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[и т.д.]
Если вы снова сохраните файл и обновите его в браузере то список ссылок получится у вас слева от основного текста. Это уже смотрится интереснее, не так ли?
В отличии от предыдущего файла, в этом главный текст переместился направо а навигация налево
Свойство ‘position: absolute’ говорит что элемент
ul расположен независимо от любого текста который предшествовал или
будет следующим за этим элементом, а свойства ‘left’ и ‘top’
обозначают это расположение.
В нашем случае это 2em сверху и 1em от
левого края окна.
‘2em’ обозначает 2 раза по растоянию, равному размеру текущего шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em будет равняться 24 пунктам. `em` очень полезная единица измерения в CSS, поскольку может адаптироваться автоматически к шрифту, используемому браузером. Большинство браузеров имеют возможность изменять размеры шрифта: вы можете попробовать увеличить или уменьшить размер и увидеть, что меню будет изменяться в зависимости от размера шрифта, чего бы не случилось, если бы мы указали отступ в пикселях
ШАГ 6: добавляем горизонтальные линии
Последним добавлением к нашей таблице стилей станет горизонтальная полоса для разделения текста и подписи снизу. Мы используем свойство ‘border-top’ для того чтобы добавить прерывистую линию над элементом <address> (строки 34-37):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.
navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h2 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
<body>
[и т.д.]
Теперь наше оформление закончено. Давайте вынесем таблицу стилей в отдельный файл, чтобы остальные файлы могли использовать ту же самую таблицу стилей, что и первый файл.
ШАГ 7: внешний CSS
Сейчас у нас есть HTML файл со встроенной таблицей стилей. Но если
наш сайт будет разрастаться, возможно, нам потребуется множество
страниц, использующих один и тот же стиль оформления.
Есть метод
получше, чем вставка таблицы в каждую страницу — мы можем вынести
стили в отдельный файл, на который будут указывать все страницы.
Для создания отдельного файла таблицы стилей нам нужен другой пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню «Файл» в редакторе , для создания пустого файла. (Если вы используете TextEdit, не забудьте сделать его текстовым снова, используя меню Format.)
Затем вырежьте и вставьте все содержимое внутри <style> из HTML в это новое окно. Не копируйте элементы разметки <style> и </style>. Они принадлежат HTML коду, а не CSS. В новом окне у вас теперь должен быть полная таблица стилей:
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h2 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.
navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той же директории/папке что и файл mypage.html, и сохраните таблицу стилей под именем “mystyle.css”.
Теперь вернитесь к HTML коду. Уберите все содержимое от <style> до </style> включительно и замените убранное элементом <link> как показано (строка 5):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> [etc.]
Такая конструкция скажет браузеру о том, что таблица стиле
располагается в файле под названием “mystyle.css”, и поскольку
директория не упомянута, браузер будет искать этот файл там же, где
лижит HTML файл.
Если вы сохраните файл и обновите его в браузере, то не должно произойти никаких изменений: страница по прежнему использует то же оформление что и в прошлый раз, но на этот раз оформление хранится во внешнем файле.
Конечный резульат
Следующий шаг — положить оба файла mypage.html и mystyle.css на ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…) Как положить файлы на сайт зависит от вашего интернет провайдера.
Дальнейшее изучение
Для введения в CSS, смотрите главу 2 Lie & Bos или введение в CSS Дейва Рэггета.
Другая информация, включая большее количество уроков может быть найдена в разделе изучения CSS.
Last updated
Как применить фоновый градиент или изображение к тексту (CSS и Webflow) | Майкл Дж. Фордхэм
Если вы чем-то похожи на меня, вы цените минималистичный дизайн. Это часто будет означать, что у вас не будет одновременно отображаться много контента, много места для передышки и ограниченная цветовая палитра.
Однако иногда нужно добавить немного изюминки.
На мой взгляд, один из самых элегантных способов сделать это — украсить важный текст (обычно часть заголовка) градиентом или изображением.
Некоторые из лучших дизайнеров используют этот трюк, чтобы добавить изюминку в свои замечательные интерфейсы. Возьмем, к примеру, Apple, это действительно распространенный шаблон пользовательского интерфейса для них:
Как постоянный пользователь инструментов кода и инструментов без кода, я хотел поделиться тем, как вы можете добиться этого эффекта как в простом коде CSS, так и в Webflow.
Как придать тексту градиент фона в CSS
Нам нужно сделать пять вещей:
- Обернуть текст, на который мы хотим повлиять, тегом span (если вы не хотите, чтобы весь текст имел этот эффект )
- Присвойте тегу span класс (.decorated-text)
- Присвойте классу .decorated-text фоновый градиент
- Обрежьте фон, чтобы он отображался только на тексте
- Сделайте цвет текста прозрачным, чтобы фон виден
Вот простая кодовая ручка со всеми этими шагами:
В этот пример включены некоторые свойства webkit, которые делают эффект более согласованным в разных браузерах.
Использование фонового изображения вместо градиента в CSS
Чтобы использовать фоновое изображение, а не градиент, шаги очень похожи на приведенные выше. Единственная разница в том, что мы даем классу .decorated-text URL-адрес фонового изображения, а не градиент. В этом примере мы также установили для background-size значение «cover», чтобы размер изображения соответствовал размеру текста.
Вот пример этого в действии:
Как применить фоновый градиент к тексту в Webflow
Шаги немного отличаются, если вы создаете свой веб-сайт в Webflow, а не вручную пишете CSS.
Прежде всего, вам нужно добавить текст в свой дизайн. Перетащите блок h2.
Затем вам нужно выбрать текст, к которому вы хотите применить фон, и выбрать опцию, чтобы обернуть его тегом span.
После этого мы переименуем тег span в «decorated-text», чтобы применить к нему стиль. Присвоение классу подходящего имени позволяет нам повторно использовать стиль в будущем.
Выбрав класс декорированного текста, мы настраиваем раздел «Фон», чтобы применить градиентный фон. Вы заметите, что фон будет применен за текстом, когда вы это сделаете.
Наконец, мы хотим установить для параметра «Обрезка» значение «Обрезать фон по тексту».
Вот оно!
Как применить фоновое изображение к тексту в Webflow
Подобно тому, как мы добавили градиент к фону текста, вместо этого вы можете использовать изображение. В разделе «Фон» удалите созданный нами линейный градиент и вместо этого выберите «Изображение».
Выберите изображение, которое хотите использовать, а затем в разделе «Размер» выберите «Обложка», чтобы изображение соответствовало тексту.
Вот и все. Как вы можете видеть в примерах, я увеличил размер текста, когда использовал фоновое изображение. Я считаю, что при использовании фоновых изображений вы хотите сделать текст как можно больше, чтобы изображение было достаточно видимым, чтобы его можно было понять.
Завершение
Это все, что вам нужно для достижения этих эффектов в простом CSS и Webflow.
При применении этих стилей следует помнить о читаемости текста. В некоторых приведенных выше примерах контраст между текстом и фоном незначителен и может создавать проблемы для людей с плохим зрением. Эти примеры просто иллюстрируют, как добиться визуального эффекта.
Если вам понравилось это пошаговое руководство по проектированию с использованием примеров CSS и Webflow, и вы хотите увидеть больше, не стесняйтесь оставлять комментарии о том, что вы хотели бы, чтобы я рассказал дальше.
Креативный стиль текста с помощью свойства CSS mix-blend-mode
mix-blend-mode — это свойство CSS, которое определяет, как содержимое элемента должно сочетаться с содержимым родительского элемента и его фоном. Благодаря этому вы можете создавать приятные сочетания и цвета для частей содержимого элемента в зависимости от его прямого фона.
mix-blend-mode дает разработчикам CSS большую гибкость для создания нативных дизайнов с использованием реального текста на изображениях, тем самым избавляя от необходимости использовать часто раздутые изображения, редактируемые с помощью таких инструментов, как Photoshop.
Одним из больших преимуществ, которое дает нам, является более высокая производительность, поскольку потребуется меньше изображений, а размеры файлов будут значительно меньше. Кроме того, использование отфотошопленных изображений не дает тех же преимуществ SEO, что и настоящий текст.
Еще одно важное преимущество использования mix-blend-mode , в отличие от альтернатив отредактированных изображений, заключается в том, что вы можете использовать анимацию CSS, что дает вам возможность добавить больше жизни вашему веб-сайту и элементам. Другие практические варианты использования mix-blend-mode включают удаление белого фона из логотипов и создание динамического контраста текста на любом фоне.
Кратко о том, как работает
смешанный режим mix-blend-mode создает так называемый контекст наложения. Контекст стекирования — это воображаемая ось z относительно пользователя, обращенного лицом к области просмотра, где находятся HTML-элементы.
Они занимают это пространство в зависимости от приоритетов элементов. Это та же идея, что и position Свойство CSS тоже использует.
mix-blend-mode применяется ко всем элементам, включая SVG, хотя на момент написания этой статьи он еще не был доступен во всех браузерах.
Синтаксис и значения
Синтаксис для смешанный режим :
смешанный режим наложения: <режим наложения>
Где <режим наложения> может быть любым из следующих значений:
обычный режим смешивания: нормальный
Это значение свойства по умолчанию, режим наложения не добавляется.
умножить режим смешивания: умножить
Умножает цвет элемента на цвет фона. Этот результирующий цвет в основном темнее, в зависимости от фона.
экран смешанный режим наложения:экран
Экран делает содержимое намного ярче, чем его фон.
Он умножает цвет содержимого на его фон и дополняет результат.
накладка режим смешивания: наложение
Что делает наложение , так это умножить , если фон темнее содержимого, и экран , если фон светлее, чем содержимое элемента. Это похоже на с жестким светом с инвертированными условиями цвета фона и содержимого.
затемнить смешанный режим наложения: затемнить
Это затемняет темную область фона и оставляет другие части без изменений.
облегчить смешанный режим смешивания: осветлить
Содержимое становится светлее вокруг частей фона со светлым цветом. Он противопоставлен затемнению .
Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия
Подробнее →
цвет-додж смешанный режим наложения:цвет-осветление
Это делает цвет фона ярче, чтобы отразить цвет содержимого элемента.
Результат получается путем деления цвета фона на значение, обратное цвету содержимого. Вы заметите, что результирующий цвет контента обычно очень «громкий».
цветной смешанный режим смешивания:цвет-выжигание
Это противоположность color-dodge . Это значение затемняет цвет фона, чтобы отразить цвет содержимого элемента. Результат получается путем инвертирования background-color , деления его на цвет содержимого и инвертирования этого результата. Если цвет содержимого является обратным цвету фона, то результат будет черным.
жесткий свет смешанный режим наложения:жесткий свет
hard-light будет умножать , если цвет содержимого темнее фона, и screen , если цвет содержимого светлее. Это похоже на наложение , но фон и передний план меняются местами.
мягкий свет смешанный режим наложения:мягкий свет
Почти полная противоположность жестко-светлый .
Это применит светлее или темнее в зависимости от цвета содержимого. Это дает более мягкий вид, чем то, что жесткий свет приводит к.
разница режим смешивания: разница
разница выбирает более темный из цветов между содержимым и фоном и вычитает его из другого (более светлого) цвета. Если какой-либо из цветов между содержимым и фоном белый, то результат является инверсией другого цвета.
исключение смешанный режим смешивания: исключение
Это похоже на отличается от , но с гораздо меньшей контрастностью. Как и в случае с разницей , если любой из цветов между содержимым и фоном белый, то результат будет обратным другому цвету.
оттенок режим смешивания: оттенок
Hue объединяет оттенок содержимого и насыщенность и яркость фона для создания цвета содержимого.
насыщенность смешанный-режим-наложения:насыщенность
насыщенность , с другой стороны, объединяет насыщенность содержимого и оттенок и яркость фона для создания цвета содержимого.
цвет режим смешивания: цвет
цвет создает цвет содержимого путем сочетания оттенка и насыщенности содержимого с яркостью фона.
светимость режим смешивания: оттенок
яркость инвертирует атрибут цвета . Он объединяет яркость содержимого с оттенком и насыщенностью фона для создания цвета содержимого.
Демо
См. режим наложения Pen
Mix от David (@Ajiva)
на CodePen.
Некоторые другие варианты использования
смешанный режим Эффект выреза
В этом примере мы можем создать эффект вырезания текста, задав тексту белый фон и используя экран режим наложения.
См. вырезанный дизайн Pen
от Дэвида (@Ajiva)
на CodePen.
Эффект прожектора
В следующем примере показан эффект прожектора. Текст скрыт до тех пор, пока свет не отразится на нем. Это достигается за счет использования режима наложения затемнение для текста, поэтому он отображается только тогда, когда на нем находится элемент div желтого цвета.
См. Pen
Torch Light с режимом смешивания и наложения от David (@Ajiva)
на CodePen.
Использование режима смешивания
с фильтром Сочетание mix-blend-mode со свойством filter помогает создавать действительно привлекательные и увлекательные дизайны с помощью CSS. Вы можете использовать фильтр как для контента, так и для фона, чтобы получить любой эффект, который вы хотите.
В приведенном ниже примере мы можем добиться обесцвеченного дизайна, применив фильтр инвертировать к фону и содержимому, а затем используя разницу для режима смешивания .
См. режим смешивания Pen
с фильтрами Дэвида (@Ajiva)
на CodePen.
Вот еще один похожий, который я использую на своем сайте:
См.
Ручку
Режим смешивания и наложения негативных эффектов от Дэвида (@Ajiva)
на CodePen.
Удаление белого фона с логотипа
Допустим, у вас есть изображение логотипа с белым фоном, а фон, на который вы помещаете это изображение, не белый. Конечно, простое решение — использовать такой инструмент, как Photoshop (или даже бесплатные инструменты, такие как remove.bg), чтобы вырезать белый фон, но этого также можно добиться с помощью смешанный режим смешивания .
See the Pen
Удаление белого фона с логотипа с помощью режима смешивания и наложения от David (@Ajiva)
на CodePen.
умножить умножает цвет фона на цвет содержимого, поэтому белая часть логотипа меняется на цвет фона. Я использовал фильтр filter:contrast(1) , чтобы сделать логотип ярче, поскольку значение , умноженное на , делает логотип немного темнее.
Хотя это может быть неоптимальным решением этой проблемы, в некоторых сценариях оно все же может пригодиться.
Заключение
Возможности mix-blend-mode , осмелюсь сказать, безграничны. Это открывает целый новый мир возможностей для вас как для фронтенд-разработчика. Вы можете продолжать экспериментировать и пробовать mix-blend-mode с различными свойствами, включая background-blend-mode .
Я надеюсь, что эта статья познакомила вас с использованием mix-blend-mode и показала соответствующие примеры, которые вы, возможно, захотите использовать.
Ваш интерфейс загружает ЦП ваших пользователей?
Поскольку веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют от браузера все большего и большего. Если вы заинтересованы в мониторинге и отслеживании использования процессора на стороне клиента, использования памяти и многого другого для всех ваших пользователей в рабочей среде, попробуйте LogRocket.
