Статьи с тегом #css-only

Возможность реализации различных задач на чистом CSS не всегда очевидна. В сети можно встретить немало примеров, когда JavaScript и его огромные библиотеки заменяют собой то, с чем легко бы справился простой (а порой и не очень простой) код CSS. В частности, речь идёт, например, как о простых решениях — скрытии или отображении контента по требованию пользователя (spoiler), добавлении к элементу всплывающей подсказки (tooltip), переключении контента посредством табов (tabs), так и о более сложных вроде создания слайдера картинок или модальных окон.

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

Подборка рецептов для input

В рамках работы над полями ввода (input) существуют не всегда очевидные и, как правило, редко используемые CSS-приёмы и HTML-атрибуты, позволяющие без использования JavaScript преобразовать внешний вид элементов формы и позаботиться об их юзабилити. Вниманию читателя представляется небольшая подборка таких «фишек» — как уже давно применяемых, так и относительно новых, ещё не поддерживаемых всеми браузерами.

Плавные спойлеры (HTML5 & CSS3)

Существует несколько основных вариантов создания спойлеров, показывающих или скрывающих контент по требованию пользователя: посредством JavaScript, через псевдокласс с таргетированием идентификаторов и при помощи интерфейсных флажков. Благодаря специальному HTML5-элементу к этому списку добавился еще один, наиболее простой и правильный с точки зрения семантики способ реализовать спойлеры.

Стиль «сломанных» изображений

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

Всплывающие подсказки (CSS)

Стандартную всплывающую подсказку в браузере иногда требуется заменить более презентабельным, а главное кроссбраузерным с точки зрения визуального представления решением. Не секрет, что простой и красивый tooltip можно реализовать исключительно средствами CSS.

Адаптивный вертикальный ритм

При вёрстке адаптивного дизайна существенное внимание должно уделяться правильному расположению элементов на вертикальной сетке. Соблюдение вертикального ритма является особенно кропотливой задачей в условиях, когда размер сетки варьируется вместе с запросами @media. В данной ситуации уместно создать адаптивный вертикальный ритм, благодаря которому высоты, границы, поля и отступы элементов всегда будут соответствовать изменяющимся базовым линиям.