| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 5.0+ | 10.5+ | 3.1+ | 3.5+ | 2.1+ | 2.0+ |
Завдання
Зробити горизонтальне меню, пункти якого мають довільний нахил (рис. 1).
Рис. 1. Вигляд меню з похилими пунктами
Рішення
За трансформацію елемента відповідає стильове властивість transform, як його значення використовується функція skewX, яка і задає потрібний нахил. Кут нахилу простіше встановлювати в градусах, наприклад, 30deg — це 30º від вертикалі. Трансформація діє і на всі дочірні елементи, тому текст всередині елемента також буде нахилений, що не кращим чином відбивається на його читабельності і красі. Тому до тексту важливо ще раз застосувати нахил, але вже в іншу сторону, для цього досить просто поміняти знак перед значенням градусів.
Браузери підтримують властивість transform переважно зі своїми префіксами, так що для універсальності в стилях слід повторити його кілька разів з одним і тим же значенням, додаючи -moz - для Firefox, -webkit - для Safari і Chrome, -o - для Opera і -ms - для браузера Internet Explorer як показано в прикладі 1.
Приклад 1. Нахил пункту меню
HTML5,CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Меню</title>
<style>
li {
display: inline-block; /* Терміново-блокові елементи */
background: #CA181A; /* Колір фону */
margin-right: 3px; /* Відстань між пунктами меню */
-webkit-transform: skewX(-30deg); /* Для Safari і Chrome */
-moz-transform: skewX(-30deg); /* Для Firefox */
-o-transform: skewX(-30deg); /* Для Opera */
-ms-transform: skewX(-30deg); /* Для IE */
transform: skewX(-30deg); /* CSS3 */
}
a {
color: #fff; /* Колір посилань */
display: block; /* Блоковий елемент */
padding: 5px 15px; /* Поля навколо тексту */
text-decoration: none; /* Прибираємо підкреслення */
-webkit-transform: skewX(30deg); /* Для Safari і Chrome */
-moz-transform: skewX(30deg); /* Для Firefox */
-o-transform: skewX(30deg); /* Для Opera */
-ms-transform: skewX(30deg); /* Для IE */
transform: skewX(30deg); /* CSS3 */
}
li:hover {
background: #333; /* Колір фону при наведенні курсору */
}
</style>
</head>
<body>
<ul>
<li><a href="1.html">Джокер</a></li>
<li><a href="2.html">Пазузу</a></li>
<li><a href="3.html">Палпатин</a></li>
<li><a href="4.html">Доктор Дум</a></li>
</ul>
</body>
</html>
В даному прикладі горизонтальне меню створюється з допомогою маркірованого списку. Щоб список був саме горизонтальним, в стилях до елемента li додається властивість display зі значенням inline-block. Для нахилу застосовується властивість transform з функцією skewX і значенням -30º. До посилань усередині списку також застосовується це властивість, але вже з позитивним значенням 30º, це забезпечує правильне, а не похиле відображення букв.
Браузери Chrome, Safari і Firefox використовують властивість transform для блокових або терміново-блочних елементів, тому для посилань встановлено властивість display зі значенням block.