меться в браузерах, які його не підтримують.
· Тіні можуть бути накладені на будь фон без додаткових зображень.
· Ефект застосовується до елементів будь-якого розміру.
· Поточний код займає набагато менше байт, ніж малюнок тіні.
· Тінь легко налаштовується. Ви можете змінити колір або глибину невеликою модифікацією коду.
Рис. 9.
9. Напівпрозорі блоки
Ефект напівпрозорості елемента добре помітний на фоновому малюнку і отримав поширенні в різних операційних системах, тому що виглядає стильно і красиво. У веб-дизайні напівпрозорість також застосовується і досягається за рахунок властивості opacity або формату кольору RGBA, який задається для фону. (Рис 10.)
Властивість opacity
Основна особливість цієї властивості полягає в тому, що значення прозорості діє на всі дочірні елементи всередині, а не тільки на фон. Це означає, що і фон і текст стануть напівпрозорими і збільшити рівень прозорості, додаючи opacity: 1, не вийде. У табл. 1 показаний вид тексту і фону з різними значеннями opacity.
Табл. 1. Вид блоку залежно від значення opacity
0.10.40.81
Рис 10.
. Ефект тиснення
таблиця стиль зображення навігація
Текст з ефектом тиснення застосовується на даний момент дуже широко. У 2009 році цей ефект був визнаний трендом року серед веб-дизайнерів. Яскравим прикладом застосування ефекту тиснення є додатки на пристроях Apple. Ось приміром як виглядає тексту на iPhone: (рис 11.)
Рис 11.
За допомогою CSS3 є можливість емулювати такий ефект як тиснення тексту. Для цього знову ж буде використовуватися властивість text-shadow. І найголовніше - ми уникнемо використання Photoshop для надання тексту потрібного ефекту.
Розглянемо два варіанти:
. Світлий текст на темному тлі . Нам потрібно використовувати text-shadow зі зміщенням по осі y на «- 1?, При цьому використовуючи більш темний колір. У даному прикладі використаний темно синій. (Рис 12.)
Рис 12.
text-shadow : 0px - 1px 0px # 374683;
2. Темний текст на світлому тлі . Тут ми будемо використовувати text-shadow з позитивним зміщенням по осі х і кольором світлішим ніж текст або максимально близьким до білого. (Рис 13.)
Рис 13.
text-shadow : 0px 1px 0px # e5e5ee;
. Поворот тексту
З недавнього часу майже всі браузери почали підтримувати обертання HTML-елементів. Працювати даний варіант буде навіть в IE 5.5. Давайте спочатку візьмемо простий HTML-код:
Порядок відображення дати ви можете вибрати свій. Тепер власне про CSS3.
