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

От автора: каскадные таблицы стилей (CSS) являются основой дизайна большинства веб-сайтов. Он описывает, как элементы должны отображаться на экране. Именно здесь в игру вступает правило CSS @import . Правило @import указывает движку CSS импортировать внешнюю таблицу стилей в другую таблицу стилей. Это позволяет добавлять правила стилей из таблицы стилей в другую таблицу. Это правило также можно использовать в сочетании с ...

От автора: давайте создадим эффект на чистом CSS, который меняет цвет текстовой ссылки при наведении… но цвет будет меняться постепенно, а не сразу. Для этого мы можем использовать четыре различных метода. Давайте рассмотрим их, помня о важных вещах, таких как доступность, производительность и поддержка браузерами. Техника 1: Использование background-clip: text На момент написания статьи background-clip: text — это экспериментальная функция, ...

От автора: в начале этого года я наткнулась на это демо от Флорина Попа, в нем линия проходит либо поверх, либо позади букв заголовка. Я подумала, что это крутая идея, но в реализации было несколько мелочей, которые я могла бы упростить и улучшить одновременно. Во-первых, в оригинальной демо-версии текст заголовка дублируется, чего, как я знала, можно было легко избежать. Также ...

От автора: несколько дней назад я разговаривал с другом о самых популярных библиотеках CSS для интеграции в проект простых анимаций. После небольшого исследования появились эти названия, в том числе самые популярные Animate.css и AnimeJS. Список популярных библиотек CSS для интеграции в проект простых анимаций: animate.css animejs magic animations hover anijs Больше всего меня поразило то, что некоторые из этих библиотек, ...

От автора: я пишу в новой книге главу «Блочная модель» и подошел к тому моменту, когда мне пришлось рассматривать отрицательные поля. К моему удивлению, я обнаружил, что нигде нет систематизированного описания отрицательных полей. Поэтому я должен был понять это для себя. Ниже мой первоначальный проект раздела «Отрицательные поля». Последняя спецификация говорит только: «Отрицательные значения для свойств margin допускаются, но могут ...

От автора: типографика в Интернете прошла долгий путь со времен Scalable Inman Flash Replacement (sIFR) и более поздних версий cufón. Это были тяжелые времена для веб-разработчиков. Раньше я боялся получить PSD-файл с каким-то экзотическим шрифтом, использованным в дизайне, так как знал, что впереди еще много часов кросс-браузерной настройки. К счастью, в современном Интернете у нас есть правило CSS @font-face, которое ...

От автора: Проблема: вы нажимаете ссылку перехода, например, <a href=»#header-3″>Jump</a> — это ссылка на что-то наподобие <h3 id=»header-3″>Header</h3>. Это совершенно нормально, пока в верхней части страницы не появится заголовок с position: fixed;, скрывающий заголовок, на который вы пытаетесь перейти! Фиксированные заголовки имеют неприятную привычку скрывать элемент, на который вы размещаете ссылку. Раньше для решения этой проблемы использовались всевозможные хаки. На ...

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

От автора: в мире CSS есть два типа веб-разработчиков. Первый тип – это 90 процентов всех разработчиков — записывают каждое свойство в отдельной строке. Разработчики второго типа записывают свойства полной строкой для каждого селектора CSS; они составляют оставшиеся 10 процентов. Вас, наверное, не удивит, что я отношусь к этим 10 процентов, и в этом посте я попытаюсь объяснить, почему написание ...