Властивості CSS3, Частина 1, text-shadow 15 способів застосування, кросбраузерність, ShuBlog
| <Попередній запис Чому працювати вдома так само прикольно як і відстійно? Вся правда про життя фрілансерів | Наступний запис » Программісти жартують |
Розгляд CSS3 я хотів би почати саме з text-shadow з кількох причин:
Серед браузерів, які підтримують цю властивість, такі:
- Google Сhrome. Повна підтримка, починаючи з версії 2.0
- Mozilla Firefox Повна підтримка починаючи з версії 3.1
- Opera. Повна підтримка, починаючи з версії 9.5
Розглянемо найпростіший приклад.
Перше значення (1px) - усунення тіні по горизонталі. Приймає позитивні та негативні значення. При позитивному значенні зміщує тінь вправо, при негативному - вліво. Друге значення (2px) - зміщення тіні по вертикалі. Приймає позитивні та негативні значення. При позитивному значенні зміщує тінь вниз, при негативному - вгору. Третє значення (3px) - розмиття тіні. Коли розмиття не потрібне, параметр можна не вказувати. Параметр підтримується не всіма браузерами. Четверте значення (#000) – колір тіні. Параметр також можна не вказувати, і в цьому випадку використовуватиметься колір тексту.
Вище було згадано кілька тінь. Так, одному тексту можна вказувати кілька тіней і робиться так.
Іншими словами - набори параметрів всіх тіней послідовно перераховуються через кому.
А ось тепер перейдемо до практики та розглянемо ефекти, які можна створювати за допомогою тіней. Приклади будуть демонструватися безпосередньо кодом, тому переглядати ефекти в Internet Explorer і стародавніх браузерах не слід.
Методи застосування text-shadow
1) Текст зрушено праворуч і вниз на 1px.
background: #C4C4C4; color: #FF0000; text-shadow: 1px 1px #000;
2) Текст зрушений вліво та вгору на 1px.
background: #C4C4C4; color: #FFF; text-shadow: -1px -1px #888
3) Текст зрушений на 1px вниз
background: #C4C4C4; color: #FFF; text-shadow: 0 1px #000
4) Розмиття тексту та зсув
background: #C4C4C4; color: #FFF; text-shadow: 2px 1px 5px #000
5) Невелика виразність тексту (тіні ледь помітні)
background: #666; color: #FFF; text-shadow: 0 1px 1px #000
6) Свічення тексту (колір шрифту та фону однакові)
background: #000; color: #FFF; text-shadow: 1px 1px 6px #FFF
background: #666; color: #FFF; text-shadow: 0 0 3px #FFF
7) Примарний текст
background: #000; color: #000; text-shadow: 1px 1px 4px #FFF
Одноманітний колір фону та тексту
background: #fff; color: #fff; text-shadow: 1px 0 5px #000
9) Дубльований текст
background: #fff; color: #000; text-shadow: 0 20px #000
10) Неонове світіння Його можна імітувати як за допомогою однієї тіні, так і за допомогою кількох
background: #fff; color: #000; text-shadow: 0 0 4px #88FF77;
background: #fff; color: #000; text-shadow: 0 0 4px #FF8877; 0 0 4px #FF8877;
За бажання можна ще одну тінь додати
Використання багатошарових тіней
Багатошарові тіні не скрізь працюють, а в Хром ще вони трохи "дерев'яні". Порівняйте, наприклад, в Опері і Хромі і Ви зрозумієте про що мова.
background: #fff; color: #000; text-shadow: 50px 10px 2px #4d9edb, -50px 5px 2px #0ac213, 20px -10px 2px #ff1919
12) Опуклий текст
background: #ccc; color: #ccc; text-shadow: -1px -1px #fff, 1px 1px #333;
13) Увігнутий текст (або опуклий, хто як побачить)
background: #ccc; color: #ccc; text-shadow: 1px 1px #fff, -1px -1px #333;
Випуклий і увігнутий текст досягається шляхом використання світлої та темної тіней. Є одне суттєве обмеження - на дрібних розмірах шрифту працює не так, як хотілося б =(
14) Контурний текст
background: #C4C4C4; color: #FFF; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000
15) Гарячий текст
background: #000; color: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
Кросбраузерний text-shadow
На jQuery було написано скрипт, який дозволяє навчити старі браузери розуміти ефект text-shadow. Для цього потрібен jQuery, плагін (http://shublog.ru/files/js/jquery.textshadow.js) та наступна послідовність дій.
Вказуємо на CSS тіні.
Підключаємо бібліотеку зі скриптом
Тепер у тега p з'являтиметься тінь навіть у IE. Однак все в тому ж ішаку (IE6, IE7) може з'являтися баг - горизонтальний скролл для обробки блокових елементів. Лікується просто прописуванням display: inline, або width: 99%. Перший варіант навіть краще (нагадую про баг блоків з float-ом і padding'ом в IE6).
Загалом, використовувати text-shadow не тільки можна, а й потрібно, наплювавши при цьому на IE. Якщо не начхати на нього, то використовуємо скрипт jQuery. І ось Вам 100% кросбраузерність. Тож вперед до нових починань!