От автора: CSS продолжает развиваться, как и его кузен Javascript. Я подумал, что поделюсь с разработчиками некоторыми свойствами макета CSS, которые пока относительно неизвестны. Первые 3 — это вариации почти одного и того же, а четвертое — самое непонятное и неподдерживаемое из всех.
От автора: градиент — это переход цветов от начальной и конечной точке, а линейный градиент постепенно перемещается по прямой к другому цвету. Градиенты — это последняя тенденция в наши дни, и большинство веб-сайтов создаются с использованием градиентов. Благодаря свойству CSS background-clip очень легко реализовать градиенты для текста.
От автора: как человек, который любит создавать CSS-анимацию, я использую один из наиболее мощных инструментов perspective. Хотя свойство perspective не поддерживает 3D-эффекты само по себе (поскольку базовые фигуры не могут иметь глубины), вы можете использовать свойство transform для перемещения и поворота объектов в 3D-пространстве (с осями X, Y и Z), а затем используйте perspective для контроля глубины.
От автора: создание пользовательских кнопок radio / checkbox — непростая задача. Они должны быть доступными, легко настраиваемыми и идеально согласованными с метками.
От автора: CSS Grid — это набор свойств, призванных сделать макет проще, чем когда-либо. Как и почти всегда, есть некоторая кривая обучения, но, честно говоря, с Grid будет весело работать, когда вы освоите его. Одна из областей, в которой он хорош — это хэдер и футер. Немного изменив свое мышление, мы можем получить хэдер и футер, которые ведут себя так, как будто они зафиксированы, или имеют такую «липкую» обработку (нет position: sticky, но такой футер занимает нижнюю часть экрана, даже если на странице нет достаточно контента, чтобы сместить его туда).
От автора: когда я впервые услышал о vh (высота области просмотра), я был взволнован и подумал, что могу использовать его для блоков с фиксированной высотой вместо использования javascript. Обычно высота 100vh учитывает отрегулированную высоту, поэтому иногда вы можете увидеть, как мобильные страницы становятся странными, когда адресная строка браузера скользит вниз.
От автора: когда в 2014 году я впервые изучал основы HTML и CSS, создание заголовка веб-сайта было для меня одной из этих страшных и сложных задач. Flexbox был еще новым, и мы были вынуждены использовать старые методы, например, float. Сегодня картина совершенно другая. Flexbox широко поддерживается, и это открывает для нас много возможностей.
От автора: теперь легко настроить цвет, размер или тип числа или маркера при использовании <ul> или <ol>. Благодаря Igalia, спонсируемой Bloomberg, мы наконец-то можем убрать хаки для стилей списков. Судите сами!
От автора: вы когда-нибудь сталкивались с веб-сайтом с красивой полосой прокрутки и думали про себя: «Вау, как бы я хотел создать что-то подобное»? Я тоже! И после небольшого исследования я поняла, что создание пользовательской полосы прокрутки для вашего блога или личного портфолио не требует кучи CSS.
От автора: в этом фрагменте я хочу поделиться с вами тем, что я делаю при изменении размеров элементов в DevTools браузера.
Все права защищены © 2026
Бернацкий Андрей Васильевич
Служба поддержки
Материалы сайта (статьи, уроки, видео уроки, курсы и прочее) предназначены исключительно для самостоятельного изучения
2020-10-22