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

От автора: свойство CSS contain дает возможность объяснить макет браузеру, чтобы можно было оптимизировать производительность. Тем не менее, это связано с некоторыми побочными эффектами с точки зрения макета. В этой статье я собираюсь представить Спецификацию CSS, которая только что стала Рекомендацией W3C. CSS Containment Specification определяет одно свойство — contain, и оно может помочь вам объяснить браузеру, какие части вашего ...

Перевод статьи The Web in 2020: Extensibility and Interoperability с сайта css-tricks.com для css-live.ru, автор — Юна Кравец. В последние годы мы наблюдали, как быстро развиваются и меняются веб-технологии. В 2020 году основными трендами сообщества веб-разработчиков вполне предсказуемо станут расширяемость и совместимость. Давайте рассмотрим их подробнее. Расширяемость Расширяемость определяется тем, насколько гибко мы можем приспособить ту или иную технологию для решения своих задач. ...

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

От автора: в этой статье вы узнаете, как использовать свойство CSS z-index… Единственный способ проникнуть в 3-е измерение с помощью CSS! В большинстве случаев, когда вы стилизуете вещи с помощью CSS, это происходит в 2D плоскости. Элементы HTML размещаются на странице горизонтально / вертикально, как стекируемые блоки в тетрисе. z-index изменяет эту парадигму и дает возможность определить визуальную иерархию на ...

От автора: если вы хотите создавать фантастические и уникальные визуальные впечатления в Интернете, вам в конечном итоге понадобятся два элемента, которые будут перекрываться или размещаться в одном месте. Возможно, вам даже нужно, чтобы они были расположены рядом или бок обок друг с другом. Давайте рассмотрим два разных способа сделать это: один с помощью свойства position, а другой с помощью CSS ...

От автора: одним из наиболее фундаментальных понятий в CSS являются цвета HSL. Это базовая концепция, но в этой статье мы сосредоточимся на ее представлении при указании браузерам. В Интернете каждый цвет представляет собой комбинацию из 3 цветов: красный, зеленый и синий. Как каждый пиксель на экране состоит из трех лампочек: зеленой, синей и красной. Наиболее распространенным методом представления цветов в ...

От автора: сегодня я собираюсь показать вам, как вы можете построить сложную Masonry-сетку, используя CSS Grid. CSS Grid изменил способ разработки наших макетов, и мы собираемся создать интересный проект, используя его возможности. Вот как будет выглядеть наш макет в конце статьи: Выглядит интересно? Если это так, продолжайте. Именно здесь CSS Grid действительно проявляет свою силу, поскольку позволяет размещать и выравнивать ...

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

От автора: гибкая типографика — это идея, что font-size (и, возможно, другие атрибуты шрифта, например line-height) меняются в зависимости от размера экрана (или, возможно, запросов контейнера, если они у нас были). Основная хитрость заключается в единицах на основе окна просмотра. Вы можете буквально задать шрифт в единицах на основе окна просмотра (например font-size: 4vw), но колебания в размерах настолько велики, ...