Вращаем текст при помощи CSS

Продолжаем интересную тематику; и сегодня - перевод статьи о вращении текста с помощью CSS.

Точнее - пример использования спрайта и немного CSS, чтобы грамотно расположить все элементы. Или - не немного... все в целом сильно похоже на ситуацию, когда вы хотите поперчить тарелку с едой, но крышка слетает, и у вас - лишь кучка перца. Чаще всего в этот момент чихают.

Нельзя не заметить, что в современных браузерах реализована поддержка функции вращения HTML-элементов. Даже больше; мы вполне способны заставить наш пример работать в Internet Explorer (даже в версии 5.5). Вы спросите: «как!?». ОК, обратимся к коду HTML.

Красивый, хорошо сделанный код - ни прибавить, ни отнять. Мы машинально выбрали этот порядок дат, чтобы избежать запятых. В любом ином случае - нам бы понадобился дополнительный span, чтобы убрать запятые в финальной версии дизайна.

Сказочный CSS-код

В браузерах семейства WebKit и браузере Firefox (касательно версии 3.5) вы можете извлечь преимущество из предложенной функции трансформации, воспользовавшись параметрами по управлению вращением. Любой браузер потребует префикс перед параметрами.

Чтобы выполнить трансформацию, элементу надо задать параметр display:block. Таким образом - просто добавьте объявление span’у, который вы намереваетесь вращать.

Если уж мы начали разговор об эффектах в Internet Explorer, то отметим, что здесь появляются удивительные возможности для использования фильтров. Существует фильтр под названием BasicImage (хотя и обманчивый), который предлагает нам возможность вращения любого элемента, у которого есть разметка.

Параметры вращения фильтра BasicImage могут включать в себя 4 значения: 0, 1, 2, 3 – они будут вращать элементы на 0, 90, 180 и 270 градусов соответственно.

Также параметр фильтра BasicImage может быть выставлен на отражение, маскирование, обесцвечивание и т.д. А ещё вы можете воспользоваться преимуществом фильтра Matrix, но координаты здесь не совсем ясны.

В действии



Как же все это выглядит на практике? Рассмотрев полученное через Safari, Firefox или IE, и вы, вероятно, увидите нечто похожее на это изображение. Единственной проблемой, по идее, может быть лишь недостаточная чёткость создаваемого текста. Internet Explorer будет сбрасывать стиль ClearType для всего текста, к которому приставлен фильтр. Вы также можете заметить, что пробелы между числами отличаются в Firefox и Safari. Такие различия в отображении текста создают преграду создания идеально четкого шаблона.

Прочесть оригинал статьи