​​Пользовательские CSS-переменные, инверсия светлоты цветов и создание тёмной темы за 5 минут

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

А знаете ли вы, что с помощью них также можно быстро создать тёмную тему для сайта на основе цветов светлой темы? Если нет, то в этой статье вам расскажут об этом подробнее.

Читать статью

@frontend_school #статья #CSS

Ну, что ж, давайте тогда начинать! И первым делом я хочу поделиться с вами библиотекой компонентов на чистом CSS

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

Здесь аккордеоны, выпадающие списки, модальные списки, свитчи, инпуты с диапазоном и многое другое.

Можно как скачать папку с библиотекой по ссылке, так и установить к себе в проект с помощью NPM командой npm i css-ui-lib.

#библиотека #css

Что нужно знать о современном CSS

Цель этого руководства — познакомить вас со списком новых (потрясающих) возможностей, недавно появившихся в CSS.

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

Подробнее: https://habr.com/ru/articles/816541/

@frontend_school #статья #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

Большая подборка шпаргалок и инструментов для HTML, CSS и JS

Этому сайту уже много лет, но он всё также не теряет актуальности. Здесь собрано множество шпаргалок, которые позволяют быстро найти нужную информацию. А ещё здесь микро инструменты, которые упростят вам создание сложных стилей и вёрстки.

Сохраняйте и пользуйтесь по ссылке.

@frontend_school #html #css #js

Шпаргалка по позиционированию элементов с помощью CSS Grid

Сохраняем и держим при себе.

#css #шпаргалка

Учитесь фронтенду с нами — подпишитесь 💻

Как настроить выбор темы на сайте

Для этого нам понадобится медиавыражение `prefers-color-scheme`, которое определяет выбранную в предпочтениях пользователя настройку темы в операционной системе.

Например, это может выглядеть так:
```
@media (prefers-color-scheme: light) {
.block {
background: white;
color: black;
}
}```

Более подробно о медиавыражение рекомендую почитать тут:
https://doka.guide/css/prefers-color-scheme/

#css

Учитесь фронтенду с нами — подпишитесь 💻

Математические функции CSS со ступенчатыми значениями

В CSS теперь полноценно работают функции round(), rem() и mod(). Работают они точно также, как и в JavaScript, то есть округляют, и возвращают остатки. Это даёт ещё больше возможностей для стилизации сайта без применения JavaScript, но и увеличивает нагрузку со стороны CSS.

Чтобы было понятнее, где это может быть применимо, я нашёл статью, которая объясняет их использование на простых примерах создания спрайтов анимации:

https://habr.com/ru/articles/816587/

#css

Учитесь фронтенду с нами — подпишитесь 💻

#викторина #css

Учитесь фронтенду с нами — подпишитесь 💻

Учимся создавать анимацию жидкости с помощью JS и CSS

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

Подробнее:
https://youtu.be/a5X512icOM8

#видео #css #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов

CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. Используя её, вам не понадобится Bootstrap или его аналог.

В этой статье разобраны возможности CSS Flexbox с помощью гифок, чтобы вы сразу понимали, как работает каждый из методов — настоящая flex шпаргалка для тех, кто хочет быстро прокачать свои скилы в вёрстке.

#css

Форма авторизации с капчей

Наверняка вам придётся делать такую форму в своей практике, поэтому чем быстрее научитесь, тем лучше. В этом проекте форма создана на стандартном стеке — HTML, CSS, JS.

Ниже вы можете посмотреть, как это работает, а также изучить код:

https://codepen.io/Frontend-Portal/pen/oNRbjXG

#codepen #html #css #javascript

Магия clip-path

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

В этой статье вы сможете узнать скрытые возможности clip-path и увидеть интересные способы его использования:

https://emilkowal.ski/ui/the-magic-of-clip-path

#css #en

Анимации скролла во фронтенде

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

Если хотите научиться делать также, то эта статья для вас. Здесь вы найдёте несколько демо для изучения работы эффекта на CSS и JS, полезные инструменты, которые упростят создание таких анимаций, а также бесплатный видеокурс по этой теме:
https://scroll-driven-animations.style/

#css #javascript #en

Учитесь фронтенду с нами — подпишитесь 💻

10 полезных однострочников для CSS, которые пригодятся в большинстве проектов

Эти несколько однострочников помогут вам облегчить вёрстку сайта, избавив от стандартных сложностей и неожиданного поведения страницы:

https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project

#css

Учитесь фронтенду с нами — подпишитесь 💻

CSS-классы вредны?

Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда?

Сейчас вы узнаете о том, почему настало время отказаться от него:

https://habr.com/ru/companies/ruvds/articles/829926/

#css #статья

Учитесь фронтенду с нами — подпишитесь 💻

#викторина #css

Учитесь фронтенду с нами — подпишитесь 💻

Топ-7 фишек HTML/CSS верстки сайта, которые вы должны знать

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

https://youtu.be/wRZx6ylDfoI?si=r0dIignjsimlmiXu

#видео #html #css

Учитесь фронтенду с нами — подпишитесь 💻