Браузер Safari часто ругают за редкое обновление и задержку внедрения новинок, но есть у него «любимые» области, в которых он опережает всех. Например, CSS-селекторы 4 уровня. Псевдоклассы :matches() — теперь это :is(), :not() с несколькими селекторами и :nth-child()/:nth-last-child() c добавочным параметром of <что угодно> он поддерживает с 2015 года. И именно в его экспериментальной сборке появилась первая реализация долгожданного псевдокласса ...

От автора: CSS переменные или кастомные свойства представляют собой определенные пользователем значения, которые можно задать один раз, а использовать много раз по коду. С их помощью легче управлять цветами, шрифтами, размерами и анимацией, а также переменные позволяют добиться единообразия по всему приложению. К примеру, через CSS свойство можно задать цвет бренда (—primarycolor: #7232FA) и использовать это значение в любых компонентах ...

От автора: CSS селекторы позволяют выбирать элементы по типу, атрибутам и положению внутри HTML-документа. В этом уроке разберем три новые опции — :is(), :where() и :has(). Селекторы в стилях применяются повсеместно. Пример ниже находит все параграфы и меняет жирность шрифта на bold: p { font-weight: bold; } Для поиска DOM узлов селекторы можно использовать и в JavaScript: document.querySelector() возвращает первый ...

Перевод статьи Holograms, light-leaks and how to build CSS-only shaders с сайта robbowen.digital для css-live.ru, автор — Робб Оуэн Может, я чуть преуменьшаю, но WebGL — это нечто. За пять минут на любом из сайтов, отмечающих лучшие примеры веб-дизайна наградами, можно увидеть, как сайты один за другим полностью полагаются на мощь canvas. Инструменты вроде threejs привносят в браузер мощь 3D ...

От автора: посетителям гораздо интереснее и комфортнее на веб-страницах, если контент страницы реагирует на действия посетителя. Самыми элементарными и простыми действиями посетителя могут быть наведение курсора мыши на блоки и клик по блоку или кнопке. В данном уроке рассмотрен интересный эффект наведения на блоки, что позволит вовлечь посетителя дальше взаимодействовать со страницей. Читайте нас в Telegram, VK, Яндекс.Дзен

От автора: важным элементом веб-страницы, особенно лендинга является CTA (call to action) – призыв к действию. CTA часто сразу пишут на кнопках «Оформить заказ», «Перезвоните мне», «Заказать расчет стоимости» и т.д. И чем лучше сделана кнопка, чем красивее эффект по наведению на такую кнопку, тем выше вероятность, что ее нажмут посетители сайта. В данном уроке показано, как сделать интересный эффект ...

От автора: в CSS Grid помимо явной установки размеров колонок есть еще одна из мощнейших функций – в Grid можно повторять колонки для заполнения контейнера и автоматически размещать в них элементы. В частности, мы можем указать количество столбцов в сетке, а затем браузер будет управлять адаптивностью этих колонок за нас. На маленьких экранах будет показываться меньше столбцов, а на больших ...

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

От автора: CSS разительно изменился за последние годы. Но для меня взрывным годом для CSS стал 2021. В этот год вышло много новых функций. Среди новых функций можно назвать контейнерные запросы, родительские селекторы, правила управления каскадированием, CSS Grid и т.д. Все главные производители браузеров в восторге от всех этих функций. Это очень помогает нашим разработчикам. Давайте поблагодарим их за тяжелый ...

От автора: при работе с UI мне нужно было добавить разделитель между двумя секциями. Вот так, как показано на изображении ниже в статье. На экранах поменьше разделитель должен становиться горизонтальным: Давайте рассмотрим HTML. <section class="section"> <div class="section__item section__item--start"> <!-- Content --> </div> <div class="section__item section__item--end"> <!-- Content --> </div> </section> У нас есть секция с двумя дочерними элементами, между которых ...