От автора: когда вы меняете font-weight шрифта, это обычно вызывает небольшое смещение макета. Это потому, что полужирный текст часто больше и занимает больше места. Иногда это не имеет значения, например, вертикальный стек ссылок, где более широкий / полужирный текст все равно ничего не смещает. Иногда это имеет значение, например, горизонтальный ряд, где более широкий / жирный текст слегка отодвигает другие ...

От автора: значение display inline-block является классическим! Оно не ново, и поддержка браузеров — это не то, о чем вам стоит беспокоиться. Я уверен, что многие из нас достигают этого интуитивно. Но давайте поставим точку в этом вопросе. Для чего это на самом деле полезно? Когда вы выбираете его среди других, возможно, похожих, вариантов? Кнопки Самый распространенный ответ, который я ...

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

От автора: подчеркивание – это непростая задача. Все становится еще сложнее, если вам нужно, что-то более интересное и анимированное, чем может предложить text-decoration: underline в CSS. Есть много разных техник. К сожалению, они почти всегда имеют значительные недостатки. Я столкнулся с некоторыми из этих недостатков, когда хотел «позаимствовать» стили ссылок в посте Кэсси Эванс. У ссылок есть удивительный эффект, когда ...

От автора: эй! Вам нужно создать навигацию для сайта, и вы будете работать с мобильным поведением. Какой шаблон вы выбираете? Если вы похожи на большинство людей, то, вероятно, это меню «гамбургер», при нажатии которого используется небольшой JavaScript для расширения вертикального списка навигационных ссылок. Но это не единственный вариант. В зависимости от контекста и содержимого навигации может существовать метод без JavaScript, ...

От автора: мне нравятся эти маленькие посты, где какой-то хитроумный дизайн решается одной строкой CSS с использованием малоизвестного свойства. В этом случае дизайн представляет собой эффект матового стекла, а свойство CSS — backdrop-filter. Подход? Очень простой: .container { backdrop-filter: blur(10px); } Комментарии также стоит изучить, потому что они касаются поддержки браузерами. Покрытие на самом деле довольно хорошее. Caniuse показывает 83% ...

От автора: как браузер определяет, в каком порядке произвести отрисовку контента? Первое предположение может состоять в том, что браузеры будут рисовать контент в порядке, указанном в DOM, который для HTML-страницы соответствует порядку, который соответствует исходному коду страницы. Мы можем построить простой пример, показывающий, что два div перекрываются в этом порядке. Мы перекрываем два div, задавая одному из них отрицательное верхнее ...

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

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

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