🔥 Добро пожаловать в мир фронтенда! 🔥

Этот канал — твой путеводитель по современному фронтенду! 🚀 Здесь тебя ждут:
✅ Новые фишки CSS, HTML и JavaScript 💡
✅ Полезные плагины и инструменты 🛠
✅ Опросы, челленджи и разбор крутых решений 🎯

Подписывайся и прокачивай свои скиллы вместе с нами! 💪✨

🔎 Полезный плагин для Figma: Inspect Styles 🎨

Если вам нужно быстро узнать параметры стилей в Figma, попробуйте Inspect Styles! Этот плагин позволяет мгновенно просматривать размеры, цвета, шрифты, отступы и другие свойства элементов.

Установить плагин по ссылке.

✨ Что умеет плагин?
✅ Показывает все CSS-стили элемента в удобном формате
✅ Подсвечивает цвета, шрифты и отступы
✅ Помогает быстрее переносить дизайн в код

Идеальный инструмент для разработчиков и дизайнеров, которые хотят сэкономить время! 🚀

📌 Установить плагин: Inspect Styles в Figma

#figma #плагины #frontend #инструменты #верстка #лайфхак #советы

🔧 Как изменить scrollbar с помощью CSS? 🎨

Хотите кастомизировать скроллбар и сделать его более стильным? Вот готовый CSS-код, который работает во всех браузерах, кроме Firefox (в нем эти стили не применяются).

📌 Основные стили:
✅ ::-webkit-scrollbar — задает размеры скроллбара
✅ ::-webkit-scrollbar-track — отвечает за фон полосы прокрутки
✅ ::-webkit-scrollbar-thumb — изменяет внешний вид ползунка

💡 Пример кода:

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #CBCBCB;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #BABABA;
}

::-webkit-scrollbar-thumb:active {
  background-color: #A9A9A9;
}

Теперь ваш скроллбар будет выглядеть красиво во всех браузерах! 🔥

#css #scrollbar #frontend

📏Почему так важно переходить с px на rem в CSS?

Многие разработчики привыкли задавать размеры в px, но rem — более гибкий и удобный вариант. Давайте разберемся, почему.

🤔 Что такое rem?
rem — это единица измерения, которая зависит от размера шрифта корневого элемента (html). По умолчанию браузеры устанавливают font-size: 16px, значит:

1rem = 16px
2rem = 32px
0.5rem = 8px

🧐 Почему rem лучше px?

Доступность 👐
Некоторые пользователи увеличивают размер шрифта в браузере для удобства чтения. Если вы используете px, то ваш сайт может "сломаться" или стать неудобным для таких пользователей. А rem автоматически подстроится под их настройки!

Масштабируемость 🔍
Если вы вдруг решите изменить базовый размер шрифта на сайте, то все элементы, заданные через rem, автоматически пересчитаются. С px придется переписывать каждый элемент вручную.

Единая система измерений 📏
Использование rem делает ваш код более предсказуемым и удобным для поддержки. Все размеры будут привязаны к одной базовой величине, что упростит работу с проектом.

💡 Как перейти на rem?
- Ручной расчет — просто делите px на 16.
- Плагины для VS Code или любой сайт конвертор из px в rem.
- Использовать SCSS-миксин (миксины на rem бывают разные) — удобный способ, чтобы не считать вручную:

$size: 16; 

@function rem($value) { 
$remValue: calc($value / 16) + rem; 
@return $remValue; 
}

После установки миксина, использовать так, например, padding: 10px; пишем padding: rem(10);

🎯 Итог
Переход на rem — это не только про тренды, но и про заботу о пользователях и удобство разработки. Начните с малого: попробуйте использовать rem для шрифтов, а потом постепенно переходите на все элементы. Ваш код станет гибче, а пользователи — счастливее! 😊

#frontend #CSS #верстка #webdevelopment #вебразработка #rem #px