Главная » HTML&CSS
Тёмный режим на уровне ОС
:48До сих пор мы использовали кнопку для переключения между светлым и тёмным режимами, но можем просто позволить операционной системе пользователя сделать это за нас. Например, многие операционные системы позволяют пользователям выбирать между светлой и тёмной темами прямо в…
Читать далее »
Переключение темы Темный и Светлой
Типичный сценарий: у сайта уже есть светлая тема и вы хотите создать её тёмный аналог. Или, даже если вы начинаете с нуля, у вас уже есть обе темы: светлая и тёмная. Одна тема должна быть определена как тема…
Читать далее »
Как сделать кастомный скролл, который появляется только при наведении
В современных интерфейсах часто хочется, чтобы полосы прокрутки не отвлекали пользователя от контента. При этом полностью скрывать скролл — не всегда хорошая идея: пользователь может не понять, что блок можно прокручивать. Оптимальное решение — делать скролл невидимым, но…
Читать далее »
CSS Filter Generator от Bennett Feely — простой способ перекрасить изображения без Photoshop
Когда тебе нужно перекрасить иконку в определённый цвет, но у тебя только чёрно-белое PNG или SVG изображение — CSS-фильтры приходят на помощь. Но подбирать вручную нужную комбинацию filter: brightness(), sepia(), hue-rotate() и других — это как гадать по…
Читать далее »
Искусство CSS: Элегантное ограничение текста с помощью -webkit-line-clamp
В мире веб-разработки часто возникает необходимость красиво ограничить количество отображаемого текста, особенно в новостных блоках, карточках товаров или списках статей. CSS предлагает элегантное решение этой задачи с помощью свойства -webkit-line-clamp. Давайте разберёмся, как работает этот мощный инструмент. Магия многоточия…
Читать далее »
Быстрый старт Vue 3
Попробуйте Vue онлайн Создание приложения Vue Предпосылки В этом разделе мы покажем, как создать scaffold для Vue Single Page Application на локальной машине. Созданный проект будет использовать сборку на основе Vite и позволит нам использовать Vue Single-File Components (SFC). Убедитесь, что у вас установлена…
Читать далее »
Новый более удобный синтаксис медиа запросов css @media
Новый синтаксис медиа-запросов в CSS, который включает такие выражения, как @media (100px <= width <= 200px), является частью спецификации CSS Media Queries Level 4 и Level 5. Этот синтаксис упрощает работу с диапазонами значений и делает медиа-запросы более…
Читать далее »
HTML5 INPUT TYPE=NUMBER И ДЕСЯТИЧНЫЕ ДРОБИ
Как вы уже, возможно, знаете с HTML 5 появился новый тип поля ввода – number, который служит для ввода чисел. Однако если просто написать: 1 <inputname=»amount»type=»number»> то при отправке чисел с плавающей запятой/точкой, форма не отправляется и появляется информация…
Читать далее »
IF CSS получает встроенные условные операторы
Несколько сирен прозвучали пару недель назад, когда рабочая группа CSS (CSSWG) решила добавить if()условный оператор в спецификацию CSS Values Module Level 5. Мое внимание привлек пост Лии Веру X в тот же день: Исторический день для CSS 😀🎉Если вы пишете какие-либо…
Читать далее »