Пользовательские 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
Что нужно знать о современном CSS
Цель этого руководства — познакомить вас со списком новых (потрясающих) возможностей, недавно появившихся в CSS.
Пусть что-то и не сразу войдёт в обиход из-за медленного обновления браузеров, но зная самые новые возможности, вы будете на шаг впереди остальных.
Подробнее: https://habr.com/ru/articles/816541/
@frontend_school #статья #css
Цель этого руководства — познакомить вас со списком новых (потрясающих) возможностей, недавно появившихся в CSS.
Пусть что-то и не сразу войдёт в обиход из-за медленного обновления браузеров, но зная самые новые возможности, вы будете на шаг впереди остальных.
Подробнее: https://habr.com/ru/articles/816541/
@frontend_school #статья #css
This media is not supported in your browser
VIEW IN TELEGRAM
Лоадер в виде анимированной сковороды
Интересный способ отобразить загрузку контента — добавить привлекательный лоадер. Этот вариант сделан с использованием препроцессора SCSS.
Посмотреть код можно по ссылке: https://codepen.io/jkantner/pen/OJGBYJG
@frontend_school #codepen #scss #css
Интересный способ отобразить загрузку контента — добавить привлекательный лоадер. Этот вариант сделан с использованием препроцессора SCSS.
Посмотреть код можно по ссылке: https://codepen.io/jkantner/pen/OJGBYJG
@frontend_school #codepen #scss #css
Условные конструкции в CSS
На прошлой неделе рабочая группа по CSS решила добавить inline if() в CSS. Но что это значит и почему это так интересно? CSS наконец-то превратится в язык программирования?
Подробности в статье: https://lea.verou.me/blog/2024/css-conditionals/
@frontend_school #статья #css
На прошлой неделе рабочая группа по CSS решила добавить inline if() в CSS. Но что это значит и почему это так интересно? CSS наконец-то превратится в язык программирования?
Подробности в статье: https://lea.verou.me/blog/2024/css-conditionals/
@frontend_school #статья #css
Большая подборка шпаргалок и инструментов для HTML, CSS и JS
Этому сайту уже много лет, но он всё также не теряет актуальности. Здесь собрано множество шпаргалок, которые позволяют быстро найти нужную информацию. А ещё здесь микро инструменты, которые упростят вам создание сложных стилей и вёрстки.
Сохраняйте и пользуйтесь по ссылке.
@frontend_school #html #css #js
Этому сайту уже много лет, но он всё также не теряет актуальности. Здесь собрано множество шпаргалок, которые позволяют быстро найти нужную информацию. А ещё здесь микро инструменты, которые упростят вам создание сложных стилей и вёрстки.
Сохраняйте и пользуйтесь по ссылке.
@frontend_school #html #css #js
Шпаргалка по позиционированию элементов с помощью CSS Grid
Сохраняем и держим при себе.
#css #шпаргалка
Учитесь фронтенду с нами — подпишитесь 💻
Сохраняем и держим при себе.
#css #шпаргалка
Как настроить выбор темы на сайте
Для этого нам понадобится медиавыражение `prefers-color-scheme`, которое определяет выбранную в предпочтениях пользователя настройку темы в операционной системе.
Например, это может выглядеть так:
```
@media (prefers-color-scheme: light) {
.block {
background: white;
color: black;
}
}```
Более подробно о медиавыражение рекомендую почитать тут:
https://doka.guide/css/prefers-color-scheme/
#css
Учитесь фронтенду с нами — подпишитесь 💻
Для этого нам понадобится медиавыражение `prefers-color-scheme`, которое определяет выбранную в предпочтениях пользователя настройку темы в операционной системе.
Например, это может выглядеть так:
```
@media (prefers-color-scheme: light) {
.block {
background: white;
color: black;
}
}```
Более подробно о медиавыражение рекомендую почитать тут:
https://doka.guide/css/prefers-color-scheme/
#css