Частенько натхнення приходить після прочитання чергової цікавої статті в мережі, і сьогодні ми пропонуємо вам навчальну статтю про обертання тексту за допомогою CSS.
У нашій сьогоднішній статті ми пропонуємо вам приклад використання спрайту і анітрохи коду CSS для того щоб розташувати всі елементи правильно. Хоча, може і не таку вже трішки. Ситуація нагадує, коли ви хочете поперчити тарілку з їжею, але кришечка злітає, і у вас виходить гірка перцю. Зазвичай після цього чхають.
На щастя, у багатьох сучасних браузерах є підтримка функції обертання HTML-елементів. Більш того, ми можемо змусити наш приклад працювати в Internet Explorer (навіть у версії 5.5). Ви запитаєте: «як !?». Добре, давайте поглянемо на код HTML.
Красивий і охайний код і нічого зайвого. Ми підсвідомо вибрали такий порядок дат, щоб уникнути ком. В іншому випадку, нам міг би знадобитися додатковий span, щоб прибрати коми у фінальній версії дизайну.
У браузерах сімейства WebKit і браузері Firefox (щодо версії 3.5) ви можете отримувати користь із запропонованої функції трансформації, скориставшись параметрами з управління обертанням. Кожен браузер вимагає префікс перед параметрами.
Коли мова заходить про ефекти в Internet Explorer, то тут з'являються дивовижні можливості для використання фільтрів. Існує фільтр під назвою BasicImage (хоча і оманливий), який пропонує нам можливість обертання будь-якого елементу, у якого є розмітка.
Параметри обертання фільтру BasicImage можуть включати в себе 4 значення: 0, 1, 2, 3 - вони будуть обертати елементи на 0, 90, 180 і 270 градусів відповідно.
Також параметр фільтра BasicImage може бути виставлений на відображення, маскування, знебарвлення і так далі. Ще ви можете скористатися перевагою фільтра Matrix. але координати навіть нам не зовсім зрозумілі.
Як же це поводиться в дії? Подивіться цю сторінку через Safari, Firefox або IE, і ви, ймовірно, побачите щось схоже на це зображення. Єдиною проблемою, за ідеєю, може бути лише недостатня чіткість створюваного тексту. Internet Explorer буде скидати стиль ClearType для всього тексту, до якого приставлений фільтр. Ви також можете помітити, що прогалини між числами відрізняються в Firefox і Safari. Такі відмінності у відображенні тексту створюють перешкоду створення ідеально чіткого шаблону.