This media is not supported in your browser
VIEW IN TELEGRAM
Функция
var() возвращает текущее значение кастомного свойства. Если оно поменяется, то функция сразу вернёт актуальное значение.Где особенно полезно:
• При создании дизайн-систем — единый цвет, отступ или размер в одном месте.
• В тёмной/светлой темах — просто меняешь значение переменной.
• В анимациях — переменные можно менять динамически, и они участвуют в переходах.
Главное:
var — это не просто про удобство, это про контроль и масштабируемость. Один раз задал, и используешь в 100 местах без дублирования.Please open Telegram to view this post
VIEW IN TELEGRAM
👍28❤15🔥7🤝2
Например,
cursor: pointer; делает курсор в виде руки — это сигнализирует, что элемент кликабельный. А cursor: none; полностью скрывает курсор.На картинке — 16 популярных значений свойства cursor.
Сохрани, чтобы не искать в документации каждый раз!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍30🤝12❤6🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Prettier — плагин для VS Code, который форматирует ваш код по единым стандартам: ставит отступы, пробелы, переносы строк и даже следит за запятыми.
Работает с JavaScript, HTML, CSS и множеством других языков. Особенно полезен в командной разработке — один стиль на всех, меньше споров.
Без лишней суеты — сохраняете файл, и Prettier сам всё приводит в порядок.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤27🔥13🤝11😁6👎2
Привет! В этом гайде реализуем поле ввода пароля с возможностью переключения видимости через иконку глаза.
Ключевые моменты:
• HTML: минимальная семантическая структура.
• CSS: современная стилизация с выравниванием иконки и плавной анимацией фокуса.
• JavaScript: чёткая логика смены типа поля и динамическая подстановка иконки.
Это базовая, но важная деталь интерфейса, которую стоит уметь реализовывать.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤30👍23🔥11🤝4
Пошаговое и современное введение в React — самую популярную библиотеку для фронтенд-разработки. Автор объясняет ключевые концепции без воды: компоненты, JSX, хуки, состояние и маршрутизацию. Отличный старт, чтобы уверенно войти в React-экосистему.Ссылочка на видео: YouTube🖤
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25❤11🤝5👎4🔥3
В этой шпаргалке собраны базовые и действительно рабочие методы: для фильтрации, клонирования, объединения и защиты объектов. Идеально подходят для валидации данных, работы с формами, API и конфигурациями.Please open Telegram to view this post
VIEW IN TELEGRAM
❤24🔥15👍10🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
Здесь вы будете не просто писать код, а решать задачи в формате игры, прокачивать мышление и сражаться в код‑батлах в реальном времени.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10👍8🤝6🔥1
При помощи свойства order можно менять порядок отображения флекс-элементов внутри флекс-контейнера.
Идеально для адаптивной верстки — можно менять порядок блоков на мобильных, не ломая основную структуру страницы.
Как работает:
• Элемент с меньшим order отображается раньше.
• По умолчанию order: 0 у всех.
Однако, свойство меняет только визуальный порядок. Стоит помнить об этом. Скринридеры по-прежнему будут читать элементы по порядку расположения в разметке.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22❤15🔥13🤝1
В этом посте покажем способ сделать эффектную контурную обводку текста при наведении — без text-shadow, без копий и без JavaScript.
Как работает:
• Используем -webkit-text-stroke — нативный способ обводки символов прямо в CSS.
• Меняем color: transparent, чтобы текст стал “пустым”, и проявилась только обводка.
• Добавляем плавный transition и получаем чистый и стильный ховер-эффект.
И главное: эффект отключается на тач‑устройствах, чтобы не портить UX!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍17❤13
This media is not supported in your browser
VIEW IN TELEGRAM
Глобальный атрибут
enterkeyhint применяется к элементам формы или для любых элементов с contenteditable. Подсказывает браузеру, как должна выглядеть клавиша ввода на экранной клавиатуре.Варианты значений:
• enterkeyhint="search" — "Поиск"
• enterkeyhint="send" — "Отправить"
• и другие: "go", "next", "done", "previous"
Несмотря на значения next и previous, клавиша
enter всё равно отправит форму. Поэтому лучше использовать их там, где пользователь просто переходит между полями.Please open Telegram to view this post
VIEW IN TELEGRAM
❤30👍17🔥6
Привет! В этом гайде покажу, как реализовать обрезку длинного текста с кнопкой “Ещё” — идеально подходит для отзывов, описаний товаров и карточек постов.
Ключевые моменты:
• HTML: минимальная разметка — один абзац и кнопка.
• CSS: компактная стилизация в виде карточки с тенью, скруглением и элегантной обрезкой строки.
• JavaScript: простой переключатель состояния с изменением текста кнопки и класса.
Это универсальный и полезный элемент, который стоит держать под рукой для любого интерфейса.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥19❤9🤝2