="justify"> Для повороту тексту ми будемо використовувати властивість transform. Для Webkit браузерів і браузера Firefox бажано використовувати власні конструкції:
1 - webkit-transform: rotate (- 90deg);
-moz-transform: rotate (- 90deg);
Для того щоб побачити поворот елемента нам потрібно використовувати властивість display: block. Використовуйте його у того елемента, який ви хочете повернути. Додайте display: block в span. (Рис 14.)
Як виглядатиме повернений текст? Нижче ви можете подивитися як дана властивість відображається в IE, Safari і Firefox e. Самое велике упущення в тому, як рендерится текст в кожному з браузерів. Те як це властивість відображається в різних браузерах створює проблему пошуку ідеального відображення. Можливо в самому найближчому майбутньому ми побачимо рішення цієї проблеми розробниками браузерів.
Рис 14.
Додавання зовнішньої обведення для тексту використовуючи text-stroke
Обведення тексту зробити досить просто. Давайте для початку поставимо колір тексту. У нашому випадку нехай буде червоний. Далі задаємо обведення. Тут 2 параметра: перший - колір обведення (возмем чорний), другий - товщина лінії (1px). Для цього прикладу створимо клас stroke:
1.stroke {
color : # c00;/* Колір тексту * /
text-stroke: 1px # 000;/* Товщина і колір обведення * /
}
Виглядати ефект буде таким чином: (рис 15.)
Рис 15.
Розглянемо ще один варіант застосування даної властивості. Зробимо основний текст прозорим, а обведення чорного кольору. Щоб зробити текст прозорим, скористаємося ще однією властивістю CSS3 text-fill-color.
1.stroke-transparent {
text-stroke: 1px # 000;
3 text-fill-color: transparent;
}
Виглядати це буде так: (рис 16.)
Рис. 16.
Ефект виїзду пункту меню при наведенні без застосування JavaScript
Один з цікавих ефектів, який з'явився в CSS3 це можливість зробити виїжджають пункти меню без застосування JavaScript. Раніше такий ефект реалізовувався за допомогою MooTools, jQuery або DojoToolkit. Тепер же ми можемо відмовитися від JavaScript на користь CSS3.
Спочатку задамо «натуральне» стан пункту меню:
1 # animateList li a {
cursor : pointer;
-webkit-transition: padding-left 250ms ease-out;
-moz-transition: padding-left 250ms ease-out;
5}
Анімація, яку ми задаємо вище досить звичайна і гладка з використанням зсуву (padding). Тепер після того як ми задали звичайний стан пункту меню, давайте задамо стан, коли наведений курсор миші (hover):
1 # animateList li a: hover {
padding-left : 20px;
3}
Тепер коли ми підводимо курсор миші до наших п...
