Слоган Мотор.ру

Первая версия слогана для Мотора была такой:
Мотор — истории об автомобилях и людях

Верстать слоган нужно было текстом, но чтобы он точно умещался между крайними штрихами „m“ и „r“. Подбор межбуквенного растояния (letter-spacing) не дал никакого результата — в разных браузерах всё выглядело по разному, при масштабировании шрифтов дико разъезжалось, а убери пару букв — значение нужно опять подбирать экспериментально.

Спасение, как это часто бывает, нашлось в таблице. Код получился страшный, но работающий:
<table><tr><td>И</td><td class="r">&nbsp;</td><td>с</td><td class="r">&nbsp;</td><td>т</td><td class="r">&nbsp;</td><td>о</td><td class="r">&nbsp;</td><td>р</td><td class="r">&nbsp;</td><td>и</td><td class="r">&nbsp;</td><td>и</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>о</td><td class="r">&nbsp;</td><td>б</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>а</td><td class="r">&nbsp;</td><td>в</td><td class="r">&nbsp;</td><td>т</td><td class="r">&nbsp;</td><td>о</td><td class="r">&nbsp;</td><td>м</td><td class="r">&nbsp;</td><td>о</td><td class="r">&nbsp;</td><td>б</td><td class="r">&nbsp;</td><td>и</td><td class="r">&nbsp;</td><td>л</td><td class="r">&nbsp;</td><td>я</td><td class="r">&nbsp;</td><td>х</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>и</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>л</td><td class="r">&nbsp;</td><td>ю</td><td class="r">&nbsp;</td><td>д</td><td class="r">&nbsp;</td><td>я</td><td class="r">&nbsp;</td><td>х</td></tr></table>
У ячейки с буквой ширина 1px, с пробелом — auto. Магия в том, что ячейка таблицы не умеет быть меньше своего содержимого, и в данном случае принимает ширину своей буквы, а пустые ячейки автоматически и равномерно заполняют оставшееся от букв место.

Потом слоган поменяли на короткий «всё что движется». Таблица уже была не нужна, зачем тянуть 3 буквы на 300 пикселей. Но убивать своё изобретение мне не хотелось, и чтобы оправдать его жизнь я придумал прикольную анимацию слогана. Правда на боевой сервер она не попала (главный редактор не поверил арт-директору, что она — годная), и сейчас там моя табличка просто для того, чтобы вводить в ступор любопытствующих технологов.
Поделиться
Отправить
4 комментария
Леонид Назаров
Это очень круто, Артём!
У тебя отличный блог :)
Николай Гурьянов
Артём, вы можете попросить добавить запятую в слоган, или это не в ваших силах?
Артём Поликарпов
Отсутствие запятой для них почему-то принципиально.
Игорь Алексеенко
Мне кажется что это не лучшее решение. Чтобы в этом убедиться, достаточно просто выделить текст в слогане, скопировать и вставить его куда-то.

Если есть текст, то он должен быть честным текстом и скопироваться должно «Истории об автомобилях и людях». Поэтому не подходит решение прямо в коде написать большими буквами. Я бы использовал отличное css-свойство text-transform: uppercase; А пробелы бы убрал все-таки. Чем их заменить пока в голову не пришло, но что они не подходят — совершенно точно.
Артём Поликарпов
> А пробелы бы убрал все-таки. Чем их заменить пока в голову не пришло...

Игорь, вот и мне не пришло :-) Все остальные решения оказывались приблизительными, поэтому я и выбрал это — «не лучшее».

Я бы не стал здесь перегибать палку на счёт копипастности текста, всё-таки слоган, это не совсем текст, никто бы не умер если бы он и картинкой даже был. Хотя, продолжаю размышать вслух, если не удалось обеспечить нормальную функциональность это текста, как текста, нужно было, действительно, откатится на картинку и не париться.
Игорь Алексеенко
Логично )
Артём Поликарпов
Но поставь я картинку сразу, я бы не узнал, как прикольно можно анимировать таблички. Эффект «Ё-ё» может пригодится где-нибудь.
Популярное