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

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

Эмуляция текстового поля input

Современный front end порой требует решения ряда нетривиальных задач, подходы к которым редко освещаются в тематических ресурсах. В частности, одна из таких дилемм, с которой можно столкнуться в процессе разработки, например, веб-чата, — это создание однострочного поля ввода (input) с возможностью вставки смайлов emoji.

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

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

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

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

Адаптивная веб-типографика

Как выбрать оптимальный размер шрифта, установить интерлиньяж и определить допустимую ширину линии, чтобы улучшить восприятие содержимого сайта и сделать текст визуально гармоничным? И чем в этом может помочь золотое сечение? Крис Пирсон в своей статье «The Ultimate Guide to Readable Web Typography» делится математическими секретами удобочитаемости текста, а на основе данного перевода вниманию читателя представляется туториал о том, как адаптивная веб-типографика, построенная на пропорциях золотого сечения, может быть реализована средствами CSS и JS.