Пользовательские CSS-переменные, инверсия светлоты цветов и создание тёмной темы за 5 минут
Вы, наверное, уже знаете о том, что для хранения сведений об отдельных компонентах цвета можно применять пользовательские CSS-переменные. Это позволяет избавиться от необходимости повторения одних и тех же цветовых координат в стилях, описывающих цветовую тему сайта. Возможно, вы даже знаете о том, что одну и ту же переменную можно использовать для настройки нескольких компонентов цвета.
А знаете ли вы, что с помощью них также можно быстро создать тёмную тему для сайта на основе цветов светлой темы? Если нет, то в этой статье вам расскажут об этом подробнее.
Читать статью
@frontend_school #статья #CSS
Вы, наверное, уже знаете о том, что для хранения сведений об отдельных компонентах цвета можно применять пользовательские CSS-переменные. Это позволяет избавиться от необходимости повторения одних и тех же цветовых координат в стилях, описывающих цветовую тему сайта. Возможно, вы даже знаете о том, что одну и ту же переменную можно использовать для настройки нескольких компонентов цвета.
А знаете ли вы, что с помощью них также можно быстро создать тёмную тему для сайта на основе цветов светлой темы? Если нет, то в этой статье вам расскажут об этом подробнее.
Читать статью
@frontend_school #статья #CSS
Ну, что ж, давайте тогда начинать! И первым делом я хочу поделиться с вами библиотекой компонентов на чистом CSS
Называется она CSSUI и примечательна она тем, что содержит множество популярных компонентов, готовых к использованию просто в пару строк.
Здесь аккордеоны, выпадающие списки, модальные списки, свитчи, инпуты с диапазоном и многое другое.
Можно как скачать папку с библиотекой по ссылке, так и установить к себе в проект с помощью NPM командой
#библиотека #css
Называется она CSSUI и примечательна она тем, что содержит множество популярных компонентов, готовых к использованию просто в пару строк.
Здесь аккордеоны, выпадающие списки, модальные списки, свитчи, инпуты с диапазоном и многое другое.
Можно как скачать папку с библиотекой по ссылке, так и установить к себе в проект с помощью NPM командой
npm i css-ui-lib
.#библиотека #css
This media is not supported in your browser
VIEW IN TELEGRAM
Переключатель в виде сковороды с яичницей
Вот такой переключатель вы можете сделать самостоятельно благодаря коду, который лежит по ссылке. Всё выполнено на html, css и ванильном JS.
От себя могу сказать, что сделать сковороду красной, а не зелёной выглядит куда логичнее. Сможете доработать?😉
@frontend_school #codepen #css #javascript
Вот такой переключатель вы можете сделать самостоятельно благодаря коду, который лежит по ссылке. Всё выполнено на html, css и ванильном JS.
От себя могу сказать, что сделать сковороду красной, а не зелёной выглядит куда логичнее. Сможете доработать?
@frontend_school #codepen #css #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM