Wiki-учебник по веб-технологиям: CSS/ПоворотТекстаСредствамиCSS ...

Главная | |

Поворот nекста cредствами CSS


В этой статье мы предлагаем вам пример использования спрайта и чуточки кода CSS для того чтобы расположить все элементы правильно. Хотя, может и не такую уж чуточку. Ситуация напоминает, когда вы хотите поперчить тарелку с едой, но крышечка слетает, и у вас получается горка перца. Обычно после этого чихают.

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

<div class="example-date">
  <span class="day">25</span> 
  <span class="month">Июн</span> 
  <span class="year">2011</span>
</div>


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

Волшебный CSS-код


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

transform: rotate(-90deg); /* для CSS3 совместимых барузеров, но таких пока нет и эта строка фактически не нужна */
-o-transform: rotate(-90deg); /* для Opera 10.50+ */
-webkit-transform: rotate(-90deg); /* для Safari, Chrome и других Webkit */
-moz-transform: rotate(-90deg); /* для Mozilla */ 


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

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

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* для IE */ 


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

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

В действии




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

Код примера полностью:

<html>
<head>
<style>
.example-date { 
  background-color:#987; 
  float:right;
  position:relative;
  padding:45px 5px 0px;
  margin-left:10px;
  } 
.example-date .example-month {
  text-transform: uppercase;
  font-size:25px;
  }
.example-date .example-day {
  font-size:45px;
  line-height:45px;
  position:absolute;left:5px;top:0px;
  }
.example-date .example-year { 
  display:block; 
  position:absolute;right:-5px;top:15px;
  transform: rotate(-90deg); /* для CSS3 совместимых барузеров */
  -o-transform: rotate(-90deg); /* для Opera 10.50+ */
  -webkit-transform: rotate(-90deg); /* для Safari, Chrome и других Webkit */
  -moz-transform: rotate(-90deg); /* для Mozilla */
  }
 </style>
<!--[if IE]>
<style>
.example-date .example-year {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* для IE */
  right:-15px; top:5px;
  }
</style>
<![endif]-->
</head>
<body>

<div class="example-date">
<span class="example-day">25</span>
<span class="example-month">Июн</span>
<span class="example-year">2011</span>
</div>

</body>
</html>