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

Fri, 15 Jul 2011 16:20:24 +0400

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

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

Спасение, как это часто бывает, нашлось в таблице. Код получился страшный, но работающий:

<table><tr><td>И</td><td class="r"> </td><td>с</td><td class="r"> </td><td>т</td><td class="r"> </td><td>о</td><td class="r"> </td><td>р</td><td class="r"> </td><td>и</td><td class="r"> </td><td>и</td><td class="r"> </td><td> </td><td class="r"> </td> <td>о</td><td class="r"> </td><td>б</td><td class="r"> </td><td> </td><td class="r"> </td> <td>а</td><td class="r"> </td><td>в</td><td class="r"> </td><td>т</td><td class="r"> </td><td>о</td><td class="r"> </td><td>м</td><td class="r"> </td><td>о</td><td class="r"> </td><td>б</td><td class="r"> </td><td>и</td><td class="r"> </td><td>л</td><td class="r"> </td><td>я</td><td class="r"> </td><td>х</td><td class="r"> </td><td> </td><td class="r"> </td> <td>и</td><td class="r"> </td><td> </td><td class="r"> </td> <td>л</td><td class="r"> </td><td>ю</td><td class="r"> </td><td>д</td><td class="r"> </td><td>я</td><td class="r"> </td><td>х</td></tr></table>

У ячейки с буквой ширина 1px, с пробелом — auto. Магия в том, что ячейка таблицы не умеет быть меньше своего содержимого, и в данном случае принимает ширину своей буквы, а пустые ячейки автоматически и равномерно заполняют оставшееся от букв место.

Потом слоган поменяли на короткий «всё что движется». Таблица уже была не нужна, зачем тянуть 3 буквы на 300 пикселей. Но убивать своё изобретение мне не хотелось, и чтобы оправдать его жизнь я придумал прикольную анимацию слогана. Правда на боевой сервер она не попала (главный редактор не поверил арт-директору, что она — годная), и сейчас там моя табличка просто для того, чтобы вводить в ступор любопытствующих технологов.

АП, заметки с тегом: Мотор

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