animating label Анимируем label у input

За последние месяцы уже было много дискуссий по поводу доступности (accessibility), которая относится к использованию labels, и я думаю это здорово. Веб-дизайнеры и разработчики должны рассматривать доступность как основополагающий элемент развития, а не задвигать ее на задний фон. Я по-прежнему вижу множество реализаций, где labels  игнорируются для более привлекательных решений, что в свою очередь создает проблемы доступности. Любопытно, что существует масса шаблонов с дружелюбным дизайном, […]

adaptive table Делаем адаптивную таблицу на CSS

В мой список раздражающих меня вещей в веб-дизайне входят таблицы, часто не оптимизированые для устройств меньше компьютера. Допустим, я открыл Википедию на  iPhone и  просматриваю список эпизодов  из  «Звёздный путь: Следующее поколение» (я вырос в конце 80 — х), в таблице много данных, и состоит она из множества столбцов. Заканчивается это дело множеством тыканий пальцем в экран , переворачиванием устройства, и раздражением. Это […]

центрирование Работающие методы центрирования с помощью CSS

# Горизонтальное центрирование Тема центрирования довольно популярная, существует уже множество разных способов. В этой статье вы найдете работающие способы как горизонтального, так вертикального центрирования, которые реализуются достаточно просто.   1. Центрируемый элемент строчный (inline): Можно назначить родительскому контейнеру свойство text-align:center. Ниже пример:   2. Центрируемый элемент блочный (block): В этом случае задаем ему ширину (иначе он займёт всю ширину родительского […]

адаптивная типографика Viewport-единицы в типографике

На сегодняшний день различают  четыре viewport-единиц: vw — процент от ширины вьюпорта vh — процент от высоты вьюпорта vmax — наибольшее значение  viewport по высоте/ширине vmin — наименьшее значение viewport по высоте/ширине В данном случае, подразумевается окно браузера, то есть 1 vw — это 1% от ширины окна браузера, а 100 vw — это уже полная ширина окна. Сконцентрируемся  на первых двух, так как они […]