Усвои text-shadow до съвършенство 3
Сподели урока
До преди няколко години поставянето на сянка върху част от текста на нашата уеб страница бе трудна и неприятна задача. Резултата най-често бе текст запазен като изображение, което манипулирахме с допълнителен софтуер всеки път, когато искахме да направим и най-малката промяна. А това отнемаше доста време!
За щастие, с навлизането на HTML5 и CSS3 в нашето ежедневие имаме страхотната възможност да създадем неща, които преди изглеждаха невъзможни. В днешно време добавянето на сянка към текст е като детска игра, в което ще се убедиш, ако прочетеш урока докрай.
Структура на урока
- Какво е text-shadow?
- Настояща браузърна поддръжка
- Структура на свойството
- Упражнение
- Добавяне на множество сенки
- Няколко примера
- Онлайн инструменти
- Заключение
Какво е text-shadow?
text-shadow е CSS свойството, което ни позволява да добавим сянка към текст. То може да приеме множество сенки, разделени със запетайка, които се прилагат върху текстовото съдържание на даден елемент.
Настояща браузърна поддръжка
По-голямата част от съвременните браузърите поддържат това свойство. Виж следващата таблица:
- Firefox 3.5+
- Chrome 2+
- Safari 4+
- Internet Explorer (IE) поддържа text-shadow единствено във версия 10. Версиите преди нея игнорират това свойство
- iOS Safari 3.2+
- Opera 9.5+
- Opera Mini го поддържа частично (игнорира единствено стойността на blur-radius)
- Opera Mobile 10+
- Android 2.1+
За по-подробна информация разгледай страницата на text-shadow в caniuse.
Има начини за добавяне на сянка и в IE, но те са извън обсега на този урок.
Структура на свойството
- ос Х – Задължителна стойност. Определя мястото на сянката по оста х. Допуска се използването на отрицателни стойности.
- ос Y – Задължителна стойност. Определя мястото на сянката по оста y. Допуска се използването на отрицателни стойности.
- blur (радиус на размазаност) – По избор. Тази стойност определя нивото на размазаност на сянката. По подразбиране приема стойност 0. Не се разрешава използването на негативни стойности.
- цвят – По избор. Определя цвета на сянката чрез ключова дума, grb, grba или други стойности. Може да се зададе в началото или края на декларацията.
Стойността по подразбиране е none, което не прилага никаква сянка върху текста.
Ако пропуснем да зададем цвят на сянката, тя приема цвета на текста зададен чрез свойството color. В случай че свойството color също липсва, цвета се определя от браузъра.
Когато text-shadow се приложи върху родителски елемент, всички вместени елементи го унаследяват т.е. ако го приложим върху body, текста на цялата страница ще бъде със сянка.
Сянката застава между текста и фона.
- Когато стойностите на х и у са положителни, сянката се движи надясно и надолу (квадрант 4)
- Когато стойностите на х и у са отрицателни, сянката се движи наляво и нагоре (квадрант 2)
Упражнение
Време е за едно кратко упражнение, в което да приложиш всичко това.
Стъпка 1
Този път няма да обръщаме много внимание на html, тъй като ще се фокусираме изцяло върху CSS. Създай нова html страница по твой избор, но не забравяй да добавиш и няколко текстoви елемента (h1-h6 заглавия или параграфи), върху които да приложиш text-shadow. Моят пример ще съдържа h1 заглавие и кратък текстов параграф.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Усвояване на text-shadow</title>
<link href="style.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<h1>text-shadow</h1>
<p>В този урок ще разгледаме работата на
CSS свойството text-shadow.</p>
</body>
</html>
Стъпка 2
Създай CSS файл и го прикачи към страницата, която току що създаде. След като го направиш въведи следния базов стил.
style.css
body {
font:1.3em/1.5em Verdana, Arial, sans-serif;
width:450px;
}
Този код ще направи текста на страницата сравнително голям, което ще ни помогне да видим резултата по-ясно.
Стъпка 3
Преминаваме директно към прилагането на text-shadow. В CSS файла добави следното:
h1 {
text-shadow: 5px 5px 2px orange;
}
p {
text-shadow: 1px 3px #95cb6f;
}
Този код ще добави оранжева сянка към h1 заглавието, която е позиционирана 5px надясно и 5px надолу от текста, и е с 2px ниво на размазаност. Върху текстовия параграф сянката ще бъде 1px надясно и 3px надолу. Пропуснах да задам стойност на blur, което означава че ще приеме стойността си по подразбиране, която е 0.
Резултата е следния:
Не ти препоръчвам да използваш стила от упражнението в реален уеб сайт, защото както виждаш текста става труден за четене, но резултата доста добре илюстрира работата на text-shadow.
Кода от упражнението ще работи без проблеми в браузърите изброени в началото.
Това е магията на text-shadow!
Използвай това свойство умерено, за да подобриш стила на твоята уеб страница. Обаче бъди внимателен/-на, много лесно можеш да отблъснеш посетителите си с поставянето на прекалено много сенки.
Добавяне на множество сенки
Добрата новина е, че това свойство ни позволява да добавим няколко сенки и това съвсем не е сложно. Лошата новина е, че използването на прекалено много сенки може да увеличи времето за зареждане на страницата, което разбира се е нежелан ефект. По мое наблюдение, използването на няколко едва доловими сенки върху 4-5 заглавия от страницата ѝ придават приятен вид и същото време не я натоварват много.
Реда на подредба е отпред назад като първата в списъка застава най-отгоре.
За да добавиш две или повече сенки просто раздели всяка със запетайка. Например:
h1 {
text-shadow: 5px 5px 2px orange, 6px 6px 1px red;
}
Този код ще ни даде следния резултат:
Няколко примера
Като бонус към този урок ще ти дам няколко примера за вдъхновение.
Пример 1
h1 {
color: #72b24a;
text-shadow: 0 1px white, 0 2px gray;
}
Пример 2
h1 {
color: #72b24a;
text-shadow:3px -3px 1px yellow,
6px -6px 1px orange,
9px -9px 1px red,
12px -12px 1px lime,
15px -15px 1px blue,
18px -18px 1px violet;
}
Пример 3
h1 {
font-family:"Century Gothic", sans-serif;
color:#1c1c1c;
text-shadow:0px 2px 3px #555;
}
Пример 4
h1 {
color:#616365;
text-shadow:2px 2px #fff, 3px 3px #666;
}
Пример 5
h1 {
font-weight:normal;
color:#262c25;
text-shadow: 0 0 2px #999;
}
Онлайн инструменти
И съвсем накрая ти предоставям още три линка към полезни онлайн инструмента, които да допълнят (вече) майсторските ти умения.
Westciv
CSS3 Generator
CSS3 Gen
Заключение
text-shadow е фантастично CSS свойство, от което можеш да се възползваш още днес. Обаче внимавай! Прекалената му употреба може да отблъсне посетителя от твоята страница, а това със сигурност не е най-желаното нещо.
Надявам се, че урока ти хареса и откри много нова и полезна информация. А ти използваш ли вече text-shadow в твоя уеб сайт? Сподели своя опит в коментарите след урока.
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.
Хареса ли ти урока? Сподели го със света :)
1
Всичко това е useless, предвид, че IE 7,8 не го поддържа.
2
Статистиката показва друго. Ако погледнеш в настоящата браузърна поддръжка в началото на урока ще видиш, че понастоящем около 70% от браузърите го поддържат, което е една добра цифра.
Разбира се, дали е добре да се използва или не зависи най-вече от статистиката на самия сайт, но със сигурност не е безполезно :)
Също така браузърите, които не поддръжат text-shadow, просто го игнорират, което не е голяма загуба за цялостното преживяване в сайта.
3
Страхотни урочета и са много полезни. Надяваме се на нещо повече и да има други уроци с по-сложни трикове в CSS3. Благодарим!