автор:JowayYoung
склад:Github,CodePen
Блог:Официальный сайт,Наггетс,думаю нет,Знай почти
Нет публики:Интерфейс IQ
Специальное заявление: Нелегко быть оригинальным, и перепечатка или плагиат не допускаются без разрешения.Если вам нужно перепечатать, вы можете связаться с автором для получения разрешения.
предисловие
темный режимЭта концепция возникла изMacOS系统изMojave,поставка浅色主题а также深色主题Пользователям на выбор предлагается два скина,深色主题это то, что мы всегда говорим暗黑模式. Ради здоровья глаз автор выбрал мобильные телефоны, планшеты и компьютеры.暗黑模式.
Поскольку Apple официально требует, чтобы все основные системные платформы были адаптированы暗黑模式, поэтому автор также исследует метод, который должен бытьСамая низкая стоимость на рынкеиз网站暗黑模式适配方案.
Друзья, которые знают автор, все должны знать, что автор - это энтузиаст тяжелого CSS. Конечно, на этот раз я также использую чистые CSS для реализации этого решения. Да, не добавляя никаких JS, сторона доказывает мощность CSS снова.
идеи
Идея проста, используйте кнопку для переключения стилей темы назад и вперед. Если кнопка не выбрана, переключитесь на浅色主题, кнопка выбрана для переключения на深色主题. доступный:checkedа также+Помогите выполнить это задание.
- :checked: опция выбранного элемента формы
- +: Родственный элемент, смежный с элементом
использовать<input>Имитирует кнопку, которая срабатывает при выборе кнопки:checked,пройти через+Управляйте основной частью соседнего веб-сайта позади<div>Войти暗黑模式, выход, когда выбранное состояние отменено暗黑模式.
<body>
<input class="ios-switch" type="checkbox">
<div class="main">网站主体</div>
</body>
Дополнительные функции и классификации селекторов см. в этой статье автора.«Вероятно, самый полный и легко запоминающийся метод классификации селекторов CSS».
Кнопка-переключатель
Планирую сделать красивую кнопку, но особых идей нет, поэтому включаю айфон и ставлю切换按钮Делайте это с помощью чистого CSS.
Размер и цвет такие же, каккнопка переключения айфонаПоследовательный. Идея состоит в том, чтобы использовать<input>Кнопка имитации, объявитьappearance:noneЧтобы стереть внешний вид по умолчанию, используйте::beforeЧтобы имитировать фоновую область, используйте::afterИмитация области щелчка после триггера:checkedПосле добавления небольших анимаций для оформления все почти идеально.iPhone切换按钮.
<input class="ios-switch" type="checkbox">
.btn {
border-radius: 31px;
width: 102px;
height: 62px;
background-color: #e9e9eb;
}
.ios-switch {
position: relative;
appearance: none;
cursor: pointer;
transition: all 100ms;
@extend .btn;
&::before {
position: absolute;
content: "";
transition: all 300ms cubic-bezier(.45, 1, .4, 1);
@extend .btn;
}
&::after {
position: absolute;
left: 4px;
top: 4px;
border-radius: 27px;
width: 54px;
height: 54px;
background-color: #fff;
box-shadow: 1px 1px 5px rgba(#000, .3);
content: "";
transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
}
&:checked {
background-color: #5eb662;
&::before {
transform: scale(0);
}
&::after {
transform: translateX(40px);
}
}
}
пожалуйста ткнитездесьОзнакомьтесь с онлайн-демонстрацией и исходным кодом.
темный режим
Помните, когда 4 апреля вся сеть открыла траурный режим? Автор опубликовал статью«Одна строка кода: вся станция переходит в режим траура», умело использованfilterЭто мощное свойство CSS.
html {
filter:grayscale(1);
}
Это действительно строка кода, и этот раз не исключение.一行代码全站进入暗黑模式.
html {
filter: invert(1) hue-rotate(180deg);
}
filterСовместимость неплохая, вы можете использовать ее с уверенностью, есть еще некоторые детали, на которые следует обратить внимание, в этой статье не будет повторяться объяснение, подробности можно прочитать еще раз.«Одна строка кода: вся станция переходит в режим траура».
filterочень волшебное свойство, которое можетPhotoshopК веб-сайту применяются некоторые базовые фильтры. я обычно люблю использоватьfilter, у автораCodePenСуществует много эффектов чистого CSS, используемых наfilter, внимательные студенты могут обнаружить, что автор особенно любит использоватьhue-rotate()Эта функция объединяетCSS变量Динамически генерируйте цвета перехода, пожалуйста, вернитесь для получения подробной информации«Используйте переменные CSS, чтобы сделать ваш CSS более захватывающим».
этот раз暗黑模式Используются две функции фильтра:invert(),hue-rotate().
-
invert(): Инвертировать, изменить раскраску выходного изображения, значение равно
0%то нет никаких изменений, значение равно0~100%является линейным эффектом множителя со значением100%Полностью реверсивный -
hue-rotate(): Поворот оттенка, уменьшение окраски изображения, обработка нечерных и белых цветов, значение равно
0degто нет никаких изменений, значение равно0~360degпостепенно уменьшается, и значение превышает360degТогда это эквивалентно кругу N кругов, а затем вычислить оставшееся значение
invert()Простое понимание黑变白，白变黑，黑白颠倒.hue-rotate()Простое понимание冲淡颜色. Чтобы убедиться, что оттенок темы не меняется, объявите поворот оттенка как180degболее разумно.
Согласно идее приведенного выше анализа, используйте, когда кнопка выбрана+Даже следующие одноуровневые элементы также выбираются. Если родственный элемент не имеет цвета фона, его необходимо объявитьbackground-color:#fff, иначе эффект фильтра не сработает.Чтобы сделать переход этого родственного элемента более естественным при использовании эффекта фильтра, объявитеtransition:all 300ms.
.ios-switch {
...
&:checked {
...
& + .main {
filter: invert(1) hue-rotate(180deg);
}
}
}
.main {
background-color: #fff;
transition: all 300ms;
}
существуетCodePenДля лучшего отображения эффекта используйте<iframe>Представляем наших фаворитовСообщество самородков, добавьте бесплатно暗黑模式Функция переключения 😉. В то же время в макет внесено небольшое количество изменений, пожалуйста, нажмитездесьОзнакомьтесь с онлайн-демонстрацией и исходным кодом.
оптимизация
Внимательные студенты могут обнаружить, что снимки превратились в ощущения от проведения В-УЗИ.
В соответствии с принципом дизайна, скиннинг предназначен только для компонентов, а элементы некоторых типов медиа, таких как фон, изображения, видео и т. д., не могут быть обработаны напрямую и должны оставаться такими, какие они есть. теперь, когда暗黑模式Это достигается за счет использования инверсии и поворота оттенка фильтра, поэтому эти элементы мультимедиа можно восстановить, снова используя инверсию и поворот оттенка фильтра. использовалPhotoshop滤镜студенты должны знать лучше.
img,
video {
filter: invert(1) hue-rotate(180deg);
}
Есть еще вопрос, как быть с фоном? Как мы все знаем, фон используетсяbackgroundСвойства серии объявлены и поэтому не могут быть аннотированы с помощью определенного селектора. Однако есть еще один способ справиться с этим — добавить определенное имя класса к элементу с фоном и включить его в приведенные выше правила.
пройти черезChrome DevToolsПроверить掘金社区, обнаружил, что эти аватары, эскизы и отображаемые изображения имеют некоторые определенные имена классов, и добавил их конкретные имена классов в правила.
img,
video,
.avatar,
.image,
.thumb {
filter: invert(1) hue-rotate(180deg);
}
На общем веб-сайте это имя класса можно определить самостоятельно, наиболее целесообразным способом является определение конкретного имени класса..exclude. Добавляются все элементы, не использующие эффекты фильтров.exclude.
.exclude {
filter: invert(1) hue-rotate(180deg);
}
Модернизация
Для удобства демонстрационного кода выше, вCodePen DemoВ использовании<iframe>Представляем наших фаворитов掘金社区. из-за невозможности<iframe>сделать объявления стилей, поэтому перейдите кСообщество самородковна, черезChrome DevToolsпрямое преобразование.
существуетChrome浏览器нажиматьF12илиCmd+Alt+IОткрытьChrome DevTools, проанализируйте структуру HTML веб-сайта.
<body>
<div id="__nuxt">...</div>
</body>
прошлое<body>вставлять切换按钮.
<body>
<input class="ios-switch" type="checkbox">
<div id="__nuxt">...</div>
</body>
поставить следующееSCSS代码Перевести вCSS代码вставить в<head>новый<style>внутри. порекомендовать онлайнSASS转CSSизВеб-сайт инструментов, Скопируйте следующий код на свой сайт в режиме прямого преобразования, а затем для завершения вставьте<style>внутри.
.btn {
border-radius: 31px;
width: 102px;
height: 62px;
background-color: #e9e9eb;
}
.ios-switch {
position: relative;
appearance: none;
cursor: pointer;
transition: all 100ms;
@extend .btn;
&::before {
position: absolute;
content: "";
transition: all 300ms cubic-bezier(.45, 1, .4, 1);
@extend .btn;
}
&::after {
position: absolute;
left: 4px;
top: 4px;
border-radius: 27px;
width: 54px;
height: 54px;
background-color: #fff;
box-shadow: 1px 1px 5px rgba(#000, .3);
content: "";
transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
}
&:checked {
background-color: #5eb662;
&::before {
transform: scale(0);
}
&::after {
transform: translateX(40px);
}
& + #__nuxt {
filter: invert(1) hue-rotate(180deg);
img,
video,
.avatar,
.image,
.thumb {
filter: invert(1) hue-rotate(180deg);
}
}
}
}
#__nuxt {
background-color: #fff;
transition: all 300ms;
}
найдено после завершения切换按钮не появляется черезposition:absoluteАбсолютно позиционируйте его там, где вы хотите, чтобы он отображался.
.ios-switch {
position: absolute;
right: 0;
top: 0;
z-index: 99999;
outline: none;
}
или в<div id="__nuxt">создать<label>, объявив<input class="ios-switch" id="toggle" hidden>а также<label for="toggle">связаны друг с другом,<input>Триггерная зона переводов на<label>начальство. Конкретно как добиться можно обратиться к автору этогоПанель навигации с вкладками на чистом CSSвыполнить.
Если вы чувствуете, что объяснение немного сумбурно, вы можете немного разобраться и выполнить вышеуказанные операции в три шага.
Откройте веб-сайт сообщества Nuggets.
согласно сF12илиCmd+Alt+IОткрытьChrome DevTools
прошлое
<head>вставлять<style>
Чтобы облегчить копирование и вставку, автор сжимает код CSS, полученный в результате приведенного выше анализа.
<style>.btn,.ios-switch::before,.ios-switch{border-radius:31px;width:102px;height:62px;background-color:#e9e9eb;}.ios-switch{position:relative;appearance:none;cursor:pointer;transition:all 100ms;}.ios-switch::before{position:absolute;content:"";transition:all 300ms cubic-bezier(0.45,1,0.4,1);}.ios-switch::after{position:absolute;left:4px;top:4px;border-radius:27px;width:54px;height:54px;background-color:#fff;box-shadow:1px 1px 5px rgba(0,0,0,0.3);content:"";transition:all 300ms cubic-bezier(0.4,0.4,0.25,1.35);}.ios-switch:checked{background-color:#5eb662;}.ios-switch:checked::before{transform:scale(0);}.ios-switch:checked::after{transform:translateX(40px);}.ios-switch:checked + #__nuxt{filter:invert(1) hue-rotate(180deg);}.ios-switch:checked + #__nuxt img,.ios-switch:checked + #__nuxt video,.ios-switch:checked + #__nuxt .avatar,.ios-switch:checked + #__nuxt .image,.ios-switch:checked + #__nuxt .thumb{filter:invert(1) hue-rotate(180deg);}#__nuxt{background-color:#fff;transition:all 300ms;}.ios-switch{position:absolute;right:0;top:0;z-index:99999;outline:none;}</style>
прошлое
<body>вставлять<input>
<body>
<input class="ios-switch" type="checkbox">
<div id="__nuxt">...</div>
</body>
Таким образом, чистая реализация CSS может сделать веб-сайт мгновенно暗黑模式Функция переключения, вас снова впечатлил CSS?
Суммировать
весь纯CSS实现方案окружающий:checked,+а такжеfilterТри пункта обязательны. Это кажется простым, но если он обычно не используется для спецэффектов с помощью CSS, трудно представить, что простой трехточечный помощник может выполнять такую мощную функцию.
<body>
<input class="ios-switch" type="checkbox">
<div class="main">网站主体</div>
</body>
.ios-switch {
...
&:checked {
...
& + .main {
filter: invert(1) hue-rotate(180deg);
img,
video,
.exclude {
filter: invert(1) hue-rotate(180deg);
}
}
}
}
.main {
background-color: #fff;
transition: all 300ms;
}
в сравнении сCSS+JS实现方案С точки зрения暗黑模式Код стиля, никаких действий не требуетсяDOM, без обычных сложных операций. Если вы не хотите делать целый набор узкоспециализированных暗黑模式нужен только одинCSS+JS实现方案, в противном случае можно использовать эту схему.
Эта программа имеет следующие характеристики.
- Чистая реализация CSS, простая и эффективная, более привлекательная
- Почти отсутствие затрат на обслуживание, быстрая итерация
- В полной мере используйте эффекты фильтра, хорошая совместимость
Неважно, если вы попробуете, и если вы почувствуете, что эффект хороший, вы можете быстро попросить у своего босса повышения😜, ха-ха!
Для меня CSS — причудливый язык, и легко сказать, что он сложный. Если вам очень нравится CSS и вы хотите узнать больше о чистых CSS-эффектах, вы можете вернуться к предыдущим статьям автора или посетить его официальный сайт.Альбом спецэффектов на чистом CSS, гарантированно удовлетворит ваши глазные яблоки.
-
Гибкое использование навыков разработки CSS:
4000+нравится,110k+объем чтения -
Волшебное использование переменных CSS, чтобы сделать ваш CSS более захватывающим:
500+нравится,13k+объем чтения
Наконец, мне интересно узнать о нашем любимом掘金社区Будет ли принята такая схема скинов, реализованная на чистом CSS, как вы думаете?
Эпилог
❤️Подписаться + Нравится + Избранное + Комментарий + Переслать ❤️, оригинальность это не просто, поощряйте автора к созданию более качественных статей
Обратите внимание на публичный аккаунтIQ前端, внешний общедоступный аккаунт, ориентированный на навыки разработки CSS / JS, вас ждут другие галантереи переднего плана
- Ответить после подписки
资料Получите бесплатные учебные материалы - Ответить после подписки
进群Втяните вас в группу технического обмена - Добро пожаловать, чтобы следовать
IQ前端,БолееНавыки разработки на CSS/JSНажимайте только на публичный аккаунт