Поворот 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>