Существует способ смешивать цвета в чистом CSS.

Функциональная запись color-mix() принимает два значения цвета и возвращает результат их смешивания в заданном цветовом пространстве на заданную величину. Теперь у него достаточно хорошая поддержка браузеров, и мы можем его использовать.

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

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

В этом сообщении блога мы рассмотрим, как создать анимацию горизонтальной прокрутки с помощью HTML и Tailwind CSS. Он может добавить визуально привлекательный элемент на вашу следующую целевую страницу.

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

На прошлой неделе коллега попросил меня оценить количество людей на мероприятии, и именно тогда нам обоим стало очевидно, что мои навыки оценки ужасны. Мне было так неловко! Той ночью я решил попробовать написать игру, которая поможет мне лучше оценивать.

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

Решения, использующие только CSS, могут снизить рабочую нагрузку на конвейер рендеринга по сравнению с JavaScript, который работает в основном потоке. Однако существуют ограничения на то, чего можно достичь исключительно с помощью CSS.

В мире SaaS продукты или услуги часто предлагаются по фиксированной цене вместе со скидкой на годовую подписку. Этот традиционный подход широко используется и демонстрируется в этой галерее примеров лучших страниц с ценами.

Однако бывают ситуации, когда стоимость зависит от количества. Это известно как «tiered pricing» и обычно используется в хостинге, хранилище, API, SMS и других услугах. Примером этого является Brevo, где тарифные планы меняются в зависимости от количества электронных писем, отправляемых каждый месяц. Такие структуры ценообразования обычно представляются с помощью ползунка диапазона, позволяющего пользователям регулировать количество и видеть соответствующую цену.

На этой неделе я очень обрадовался, когда наконец-то использовал :has. Проблема с ним заключалась в поддержке браузерами, которая пока недостаточно высока, чтобы использовать его в производственном коде. В частности, в Firefox его не будет до 121 версии (наконец-то!), а это мой любимый браузер...

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

Если вы возились с CSS достаточно долго, скорее всего, вы хотя бы один раз пытались перейти от height: 0 к auto, но это не работает! К счастью, сегодня действительно есть решение этой проблемы: под капотом используется CSS Grid, и это очень просто и работает безупречно!

Как фронтенд-разработчик, я всегда нахожусь в поиске инструментов и фреймворков, которые могут облегчить мне жизнь и сделать мой код более эффективным. Одним из таких инструментов, который произвел настоящую революцию в моем рабочем процессе, является Tailwind CSS.

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