×
HeadHunter and Superjob rezume updater on Ruby on Rails (21 авг 2017)

Практикуемся в написании кода под rails.

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

Больше
6 года 6 мес. назад - 6 года 6 мес. назад #1 от ralf
ralf создал эту тему: Вращаем текст при помощи CSS
Продолжаем интересную тематику; и сегодня - перевод статьи о вращении текста с помощью CSS.

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

Нельзя не заметить, что в современных браузерах реализована поддержка функции вращения HTML-элементов. Даже больше; мы вполне способны заставить наш пример работать в Internet Explorer (даже в версии 5.5). Вы спросите: «как!?». ОК, обратимся к коду HTML.
<div class="example-date">
  <span class="day">31</span>
  <span class="month">July</span>
  <span class="year">2009</span>
</div>

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

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

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

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

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

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

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

В действии



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

Прочесть оригинал статьи
Последнее редактирование: 6 года 6 мес. назад от ralf.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.