Автоматический интерлиньяж

Плохо не только ставить нецелочисленные размеры шрифтов, но также и интерлиньяж. Это делает неровным как макет, так и вёрстку. Очень часто дизайнеры, выбрав в Фотошопе размер шрифта, не задают ему интерлиньяж, оставляя параметр Auto. В вёрстке это равносильно line-height: 1.2.

Возьмём, к примеру, размер шрифта, равный 18. Интерлиньяж рассчитывается следующим образом: 18 × 1,2 = 21,6. Но расстояние между базовыми линиями не  может быть дробным, поэтому будет округляться, причём в разных местах по-разному.

Auto line-height

Старайтесь всегда ставить целочисленные значения.

Как сверстать экраны в перспективе

source

В одном макете встретился данный элемент. Его можно было бы вставить просто картинкой, как это сделано выше, но по задумке эти карточки должны «падать» друг на друга. В чём же проблема выдернуть из слоёв эти элементы и заанимировать их? Проблема в тени.

Если тень добавлять программно к элементам, то она будет не только на соседнем элементе, но и вокруг, на белом фоне; а если пытаться её сместить, то тени наоборот может не хватать.

Что если вырезать тень отдельным слоем? Возникает вопрос, когда её вставлять. Очевидно, что она должна появляться постепенно, для этого мы можем менять ей непрозрачность. Но есть два нюанса. Во-первых, в данном макете тень нарисована только там, где мы сейчас её видим, и если убрать один элемент сверху, то под ним её не будет. Во-вторых, слой с тенью в режиме умножения, что для вёрстки не годится. А это значит, что тень надо рисовать заново.

Допустим, верстальщик смог сам нарисовать новую тень, или попросил дизайнера, всё равно остаётся ещё одна проблема. Когда объект отбрасывает тень на поверхность, то при изменении расстояния меняется не только насыщенность, но и степень размытия тени, повлиять на которую мы не можем в текущем решении. Что ж, тогда попробуем сделать всё при помощи CSS.

Кнопки в лифте

У меня в доме установлены лифты со следующей кнопочной панелью:

elevator-panel

Никак не пойму, почему выделили девятый этаж, когда можно было поднять средний и правый столбцы, тогда бы самый частонажимаемый первый этаж был обособлен.

Кстати, расстояние между соседними столбцами гораздо меньше расстояний между кнопками в горизонтальном ряду, а должно быть наоборот.

А ещё шрифтом Брайля на 24-м этаже написано «14».

Иконки с анимацией

Некоторые из иконок, иллюстрирующие работу сервиса, связанного с такси. Анимируются при наведении или по тапу. (В IE и FF анимация так себе.)

Сайт. Пишем правильно

Прошло более двадцати лет с появления сайтов в рунетов, но до сих пор люди не научились писать это простое слово правильно. Причём чаще всего ошибки встречаются как раз в профессиональной среде. Давайте разбираться.

В 1990 году появилась WWW (World Wide Web, всемирная паутина), которую сокращённо стали называть web. Логически связанные массивы данных в этой самой паутине получили название web-site, т. е. «место в паутине». Но, как и со множеством других слов, мы не стали заимствовать первоначальное значение слова (паутина), а воспользовались транслитерацией (веб). То же и со словом site, обозначающим в английском языке некоторое место, не только в интернете.

Значит, по-русски нужно писать «веб-сайт»? Нет, поскольку слово «сайт» имеет одно значение, в словарях оно давно зафиксировано, а язык всегда стремится к упрощению. В английском языке слово стало писаться без дефиса (website, как и email), а когда в контексте понятно, что речь об интернете, то и web отбрасывают.

Анимация логотипов

Экспериментируя со связкой SVG-CSS-JS, сделал для студии анимацию логотипов, возникающую при переключении между разными страницами. (Не работает в IE и FF.)
Здесь их можно увидеть по клику на кнопки. У первого и последнего есть не только анимация появления-исчезновения, но и небольшие движения, вызываемые раз в 10 секунд.

  • 1
  • 2