Верстка \ CSS 3

Несколько фонов в CSS

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

Продолжить чтение

Верстка \ CSS 3

Анимированное, переносимое подчеркивание на чистом CSS

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

Продолжить чтение

Верстка \ CSS 3

Сетки Часть 1: Использовать сетку или таблицу

От автора: в своей повседневной работе я разговариваю со многими людьми, у которых много проблем с доступностью различных таблиц и сеток. Сетки иногда дают нам проблемы с комбобоксами и неудачными всплывающими подсказками, которые причиняют головную боль разработчикам, пытающимися правильно реализовать доступность.

Продолжить чтение

Верстка \ CSS 3

Три CSS альтернативы навигации в JavaScript

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

Продолжить чтение

Верстка \ CSS 3

Эффект фонового фильтра с помощью CSS

От автора: мне нравятся эти маленькие посты, где какой-то хитроумный дизайн решается одной строкой CSS с использованием малоизвестного свойства. В этом случае дизайн представляет собой эффект матового стекла, а свойство CSS — backdrop-filter.

Продолжить чтение

Верстка \ CSS 3

Необычные свойства CSS

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

Продолжить чтение

Верстка \ CSS 3

Гибкие изображения в макетах с изменяющимися пропорциями

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

Продолжить чтение

Верстка \ CSS 3

Порядок отрисовки CSS

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

Продолжить чтение

Верстка \ CSS 3

Ссылки нестандартной формы с помощью подсетки

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

Продолжить чтение

Верстка \ CSS 3

Выравнивание изображений логотипов в CSS

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

Продолжить чтение