Типографията е любимата играчка на уеб дизайнерите. CSS има един много интересен инструмент - текст-сянка(текстова сянка), което на пръв поглед изглежда доста просто, но с негова помощ можете да създадете запомнящи се ефекти, ако използвате изобретателност и въображение.

Основи на сенките

Имот текст-сянкамного лесен за използване. Поддържа се от всички съвременни браузъри и дори без използването на префикси. Но няма поддръжка в IE (дори в IE9). Можете да използвате инструменти като Modernizr, за да помогнете за извличането на CSS3 ефекти дори на по-стари версии на IE.

Синтаксис

За да създадете текстова сянка, използвайте синтаксиса на свойството текст-сянкакойто е даден по-долу. Има четири параметъра за дефиниране: първите два задават позицията на сянката, третият задава нивото на замъгляване, а четвъртият определя цвета на сянката.

Text-shadow: horizontal_offset vertical_offset цвят на размазване;

По-долу е даден пример за текстова сянка, която е изместена с два пиксела надолу и четири пиксела надясно, замъглена с три пиксела и зададена на черно при 30% непрозрачност.

Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

Резултатът от използването на това свойство ще изглежда така:

Защо се използва rgba?

Не е нужно да използвате rgba, за да укажете цвета на сянката, когато дефинирате свойство. Rgba обаче добавя още едно измерение при дефинирането на сянка - нивото на прозрачност.

Този метод е много по-прост от другите методи за определяне на цвета. Не е нужно да се фокусирате върху определянето на нюанса на цвета на сянката, който може да е само малко по-тъмен или по-светъл от цвета на фона. С rgba можете просто да използвате бяло или черно и да увеличите тяхната непрозрачност, за да постигнете желания цвят на фона при смесване на цветове.

Използване на собственост текст-сянкаМожете да създавате различни ефекти за текст, без да се ограничавате до обикновени падащи сенки. Например, тук е кодът за създаване на илюзията за депресиран текст.

Първо трябва да зададете цвета на текста малко по-тъмен от цвета на фона. И тогава трябва да използвате имота текст-сянкас бял цвят и повишена прозрачност.

Цветът на фона е #222, а цветът на текста е настроен на 60% непрозрачност. Бялата сянка е разположена леко надолу и вдясно с ниво на непрозрачност от 10%.

Тяло (фон: #222;) #текст h1 (цвят: rgba(0,0,0,0.6); сянка на текста: 2px 2px 3px rgba(255,255,255,0.1); )

Изобщо няма нужда да размазвате сянката. Ясната сянка може да върви добре с дизайн на уебсайт.

Текстова сянка: 6px 6px 0px rgba(0,0,0,0.2);

Истинското забавление започва, когато отхвърлите ограничението да имате само една сянка. Като използвате запетая за разделяне на дефиниции, можете да използвате толкова сенки, колкото са ви необходими!

Text-shadow: shadow1, shadow2, shadow3;

Ето пример за използване на две сенки. Първият има същия цвят като фона.

Текстова сянка: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Преместване надолу на дълги разстояния

След като овладеете използването на множество сенки, резултатите ще стават все по-драматични. Много е лесно да създадете 3D ефект за текст.

Примерът използва четири сенки, всички изместени надолу на различни разстояния и замъглени.

Текстова сянка: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1) );

Преместете малко надолу и размажете силно

Ето още едно въплъщение на същата идея. Трите сенки са изместени на по-малко разстояние и са по-размазани.

Текстова сянка: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

3D текст от Марк Дото

Ефектът се използва на уебсайта MarkDotto.com. Той използва 12 различни сенки, за да създаде страхотен 3D ефект.

Текстова сянка: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Текст с отстъп от Гордън Хол

Забележете, че в примера по-горе нарекох моята техника „бърз и мръсен“ ефект на висок печат. Това е така, защото има много по-сложен начин за създаване на сериозно вмъкнат текст, който е много по-правдоподобен.

Гордън използва сериозно CSS вуду, за да извади не само външна сянка, но и истинска вътрешна сянка. Вижте публикацията в неговия блог за пълно обяснение на техниката.

Цвят на фона: #666666; -webkit-background-clip: текст; -moz-background-clip: текст; фонов клип: текст; цвят: прозрачен; текстова сянка: rgba(255,255,255,0.5) 0px 3px 3px;

Сияние

Текстова сянка: 0px 0px 6px rgba(255,255,255,0.7);

Текстова сянка: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Множество източници на светлина

Текстова сянка: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Цвят: rgba(0,0,0,0.6); текстова сянка: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Заключение

Като повечето CSS ефекти, сенките са много лесни за прилагане. Но комбинация от прости действия може да доведе до невероятни ефекти.

Този урок представя няколко CSS техники за създаване на различни ефекти за очертанията на елементите.

Прост ефект на светла сянка може да се постигне чрез използване на сиво върху щриха. CSS3 има способността да създава истинска сянка, използвайки свойството кутия-сянка, но простият начин ще работи във всички браузъри:

Shadow (padding: 20px; border: 1px solid #f0f0f0; border-bottom: 2px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; )

Ефектът на вдлъбнатия блок също се постига много лесно. Добавянето на CSS3 заоблени ъгли подобрява ефекта:

Натиснат (цвят: #fff; подложка: 20px; фон: #111; рамка: 1px плътен #000; border-right: 1px плътен #353535; border-bottom: 1px плътен #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; )

Този ефект е много подобен на двоен удар, който често се използва за изображения. Използват се настройките за отстъп и щрих, което води до ефект на двойна граница.Допълнителната работа с настройките и използването на свойството контур ви позволява да постигнете ефекта на скосени ръбове.

Img.light ( контур: 1px плътен #ddd; граница отгоре: 1px плътен #fff; подложка: 10px; фон: #f0f0f0; ) img.dark ( контур: 1px плътен #111; граница отгоре: 1px плътен #555; подложка: 10px; фон: #333; )

Този ефект може да се използва в менюта или списъци. Това е проста комбинация от горни и долни щрихи с различни нюанси на цвета на фона. Едно нещо, което трябва да имате предвид е, че CSS селекторите за първо дете и последно дете не се поддържат от по-стари браузъри. За да заобиколите тази неприятна ситуация, можете да използвате jQuery.

#indented ul( margin: 20px 0; padding: 0; list-style: none; ) #indented ul li ( border-top: 1px solid #333; border-bottom: 1px solid #111; ) #indented ul li:first -child (border-top: none;) #indented ul li:last-child (border-bottom: none;) #indented ul li a (padding: 10px; display: block; color: #fff; text-decoration: none ; ) #indented ul li a:hover (фон: #111;)

Имали ли сте някога неприятно усещане, когато вашите надписи не съответстват на цветовете на бутони, панели или просто текстът контрастира лошо с фона на страницата? Като се използва CSS сенкиТози проблем може лесно да бъде решен чрез използване на свойството text-shadow за подобряване на четливостта и контраста на текста.

В дадените примери използваме текстови сенки в различни ситуации, което ще ви даде необходимата основа, за да можете да проучите допълнително този въпрос сами.

1. Основна настройка

Създайте нов HTML файли добавете следния код към него HTMLИ CSS:

В секцията HTML добавете етикет

с текстовия клас:

Уеб код маниаци

За този елемент ще добавим CSS текстова сянка. Зададох първоначални свойства за този елемент, така че да изглежда добре на екрана:

Сега нека зададем атрибута text-shadow на текста. Но първо, нека разберем какви стойности приема този атрибут:

Text-shadow: 4px 4px 4px #ccc;

1. 4px - X отместване ( хоризонтална);
2. 3px - отместване на оста Y ( вертикален);
3. 2px - стойност на размазване;
4. #ccc - цвят.

Това се задава, както следва:

Сянка на текст: цвят на размазване с хоризонтално отместване и вертикално отместване;

de цветът може да бъде представен с шестнадесетичен код #ccc или RGBA (0,0,0,0.3); . В CSS можем да приложим CSS вътрешна сянка към нашия текст по следния начин:

.текст(
размер на шрифта: 5em; /* направи текста по-голям */
текстова сянка: 4px 3px 2px #ccc;
}

Представянето на този засенчен текст в браузъра ще изглежда така:

ПРИМЕРЕН уебсайт

След това ще променим цвета на фона на елемента body по различни начини. Правим това, защото някои CSS сенки изискват специфичен фон, в противен случай няма да бъдат забележими. За да изглежда текстът по-красив, ще го настроим с главни букви.

2. Импринт ефект

Задайте цвета на текста на малко по-тъмен нюанс от фона. След това приложете малка бяла текстова сянка с намалена непрозрачност:

тяло (
фон: #222;
}
.текст(
размер на шрифта: 5em;
цвят: rgba(0,0,0,0.6); /* цвят на текста */
текстова сянка: 2px 2px 3px rgba(255,255,255,0.1); /* добавяне на сянка */
}

С помощта на кода RGBA можете да зададете непрозрачността на цвета. Забележете, че цветът на текста има непрозрачност от 60% (0,6), а CSS сенките на div имат непрозрачност от 10% (0,1).

ПРИМЕРЕН уебсайт

3. Ретро ефект на сянка

Ретро сенките не винаги трябва да бъдат замъглени. Вземете например тази ретро сянка:

тяло (
}
.текст(
размер на шрифта: 5em;
цвят: бял; /* промяна на цвета на текста на бял */
текстова сянка: 6px 6px 0px rgba(0,0,0,0.2); /* добавяне на ретро сянка */
}

ПРИМЕРЕН уебсайт

4. Ефект на двойна сянка

Интересното е, че можете да добавите повече от една сянка на CSS шрифт. Това може да стане по следния начин: text-shadow: shadow1, shadow2, shadow3; Нека добавим две сенки, едната с цвета на фона, а втората малко по-тъмна:

Текст (
размер на шрифта: 5em;
текстова сянка: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /* дава две сенки */
}

Нашият фон е бял, така че нямаме нужда от друг цвят за него. В браузъра ефектът ще изглежда така:

ПРИМЕРЕН уебсайт

5. Ефект на отдалечена сянка

Този ефект се основава на функцията за дефиниране на няколко красиви CSS сенки. По-долу можете да видите ефекта с четири сенки, хвърлени надолу с различна степен на интензивност:

тяло (
фон: #fff3cd; /* промяна на цвета на фона */
}
.текст(
размер на шрифта: 5em;
цвят: бял;
текстова сянка: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
}

ПРИМЕРЕН уебсайт

6. 3D ефект от Марк Дото

тяло (
фон: #3495c0; /* промяна на цвета на фона */
}
.текст(
размер на шрифта: 5em;
цвят: бял;
текстова сянка: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

Сега вижте как изглеждат тези CSS вътрешни текстови сенки в браузъра:

ПРИМЕРЕН уебсайт

7. Реалистичен ефект на Gordon Hall Cut Text

Гордън използва някои усъвършенствани CSS магии, за да даде не само външна сянка, но и реалистична вътрешна сянка:

тяло (
фон: #cbcbcb; /* промяна на цвета на фона */
}
.текст(
размер на шрифта: 5em;
цвят: прозрачен;
цвят на фона: #666666;
-webkit-background-clip: текст;
-moz-background-clip: текст;
фонов клип: текст;
текстова сянка: rgba(255,255,255,0.5) 0px 3px 3px;
}

И това създава ефекта на изрязан текст.

ПРИМЕРЕН уебсайт

8. Ефект на светещ текст

тяло(
фон: #992d23; /* промяна на цвета на фона */
}
.текст(
размер на шрифта: 5em;
цвят: бял;
текстова сянка: 0px 0px 6px rgba(255,255,255,0.7);
}

Тази сянка създава светещ ефект за текста:

ПРИМЕРЕН уебсайт

9. Повдигнат текстов ефект

тяло(
фон: #629552; /* промяна на цвета на фона */
}
.текст(
размер на шрифта: 5em;
цвят: rgba(0,0,0,0.6);
текстова сянка: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
}

ПРИМЕРЕН уебсайт

10. Ефект на дълга сянка

Този ефект може да се постигне с помощта на

Цвят на фона: rgb(147, 201, 67);
текстова сянка: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px rgb(131, 179, 60), 5px 5px rgb(131, 179, 60), 6px 6px rgb(131, 179, 60), 7px 7px rgb(131, 179, 60), 8px 8px rgb(131, 179, 60), 9px 9px rgb(131, 179, 60), 10px 10px rgb(131, 179, 60), 11px 11px rgb(131, 179, 60), 12px 12px rgb(131, 179, 60), 13px 13px rgb(131, 179, 60), 14px 14px rgb (131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 60), 18px 18px rgb(131, 179, 60) ), 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px rgb(131, 179, 60), 23px 23px rgb( 131, 179, 60), 24px 24px rgb(131, 179, 60), 25px 25px rgb(131, 179, 60), 26px 26px rgb(131, 179, 60), 27px 27px rgb(131, 179, 60) ;
цвят: #eaeaea;

ПРИМЕРЕН уебсайт

Заключение

Както можете да видите, свойството text-shadow е много лесно за използване и можете да го използвате, за да създадете свои собствени творчески CSS сенки.

Описание

Добавя сянка към текста и също така задава параметрите му: цвят на сянката, отместване спрямо надписа и радиус на замъгляване. Свойството text-shadow може да работи във връзка с псевдоелементите :first-letter и :first-line.

Синтаксис

текстова сянка: няма | сянка [,сянка]*
къде е сянката:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

Стойности

Няма Отменя добавянето на сянка. цвят Цветът на сянката във всеки наличен CSS формат. По подразбиране цветът на сянката съответства на цвета на текста. Незадължителен параметър. x-shift Хоризонталното отместване на сянката спрямо текста. Положителна стойност на този параметър измества сянката надясно, отрицателна стойност я измества наляво. Задължителен параметър. y отместване Вертикалното отместване на сянката спрямо текста. Също така е приемливо да се използва отрицателна стойност, която повдига сянката по-високо от текста. Задължителен параметър. радиус Задава радиуса на замъгляването на сянката. Колкото по-висока е тази стойност, толкова повече сянката се изглажда, ставайки по-широка и по-лека. Ако тази опция не е посочена, по подразбиране е зададено 0. Моля, обърнете внимание, че алгоритъмът за антиалиасинг обикновено се различава в различните браузъри, така че външният вид на сянката може леко да варира в зависимост от настройките за антиалиасинг, които сте посочили.

Можете да посочите няколко параметъра на сенките, като ги разделите със запетая. CSS3 взема предвид следния ред: първата сянка в списъка се поставя най-отгоре, последната в списъка се поставя най-долу. В CSS2 редът е обратен: първата сянка се поставя най-отдолу, а последната - най-отгоре.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Ще живеят ли цитрусите в гъсталаците на юг? Да, но фалшиво копие!

Резултатът от примера е показан на фиг. 1.

Ориз. 1. Изглед в сянка в браузъра Safari

Браузъри

Opera поддържа максимум 6–9 опции за сянка. Увеличаването на тази стойност, както и увеличаването на радиуса на замъгляване над 100px, се отразява на производителността на браузъра. Версии 9.5–10 на Opera използват дисплей с множество сенки, подобен на CSS2.

Safari преди версия 4.0 поддържа само една опция за сянка, останалите се игнорират. От версия 4.0 много сенки вече работят.

Internet Explorer разбира свойството text-shadow само от версия 10.0. Вместо това се използва свойството на филтъра: Shadow(parameters) . Например, следната конструкция определя цвета на сянката (#666666), нейната посока (45° от вертикала) и размера на отместването (4 пиксела).

филтър: Сянка (Цвят=#666666, Посока=45, Сила=4);

Дори и най-зеленият дизайнер знае как да прави сенки във Photoshop. Сенките добавят измерение към дизайна и сега са много популярни. Сенките за текстове, елементи от менюто и заглавия не са изключение. Достатъчно е да си припомним дизайна на интерфейсите от Apple

Ще бъде полезно да имате умения за работа с текстови сенки във вашия арсенал от техники.

Задача

Направете сянка за текст с помощта на CSS, без да използвате изображения. Какво ще постигнем с това?

• гъвкавост - не са необходими изображения, текстът се променя лесно
• скорост - по-малко изображения - по-малко тегло на страницата, по-малко обаждания към сървъра
• SEO - текстът е оптимизиран по-добре от снимките и е по-надежден от използването на техниката за замяна на текст с картина

Текстови сенки за нормални браузъри

Нормалните браузъри включват всички съвременни браузъри, които се придържат повече или по-малко към препоръките на W3C. В този случай тези браузъри разбират свойството CSS3 text-shadow, което беше препоръчано през 2003 г.

И така, ето списък с браузъри, които поддържат свойството text-shadow:

• Safari 3.1 (Mac/Win) - поддържа, не поддържа множество сенки
• Safari 4 (Mac/Win) - напълно поддържан
• Opera 9.5+ (Mac/Win/Lin) - поддържа напълно
• Firefox 3.1/3.5 (Mac/Win/Lin) - поддържа се напълно
• Google Chrome 2 (Win) - напълно поддържан
• Shiira (Mac) - поддържа, не поддържа множество сенки
• Konqueror (Lin/Mac/Win) - поддържа напълно
• iCab (Mac) - поддържа, не поддържа множество сенки
• Safari на iPhone - поддържа се, множество сенки не се поддържат
• Nokia Symbian-смартфони (серия 60) - поддържа
• Opera Mini 4.1 - поддържа, не поддържа размазване на сенки

За тези браузъри един ред CSS е достатъчен, за да засенчи текст:

H1 (текстова сянка: 0px 1px 3px #000;)

Получаваме това фантастично заглавие:

Можете да постигнете различни интересни ефекти със сянка на текст.

Размазан текст

H1 (цвят: #fff; фон: #666; текстова сянка: 0px 0px 3px #fff; )

Дублиран текст

H1 (текстова сянка: 0px 20px #000;)

Множеството сенки ви позволяват да постигнете още няколко ефекта:

Вдлъбнат текст

H1 (фон: #ccc; цвят: #ccc; текстова сянка: -1px -1px #666, 1px 1px #FFF; семейство шрифтове: serif; )

Повдигнат текст

H1 (фон: #999; цвят: #999; текстова сянка: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; семейство шрифтове: serif; )

(IE няма да ви позволи да се насладите на красотата тук, защото не поддържа text-shadow). Можете да измислите много различни ефекти, като използвате текстова сянка, единственото практическо ограничение е вашето въображение.

Сега относно тъжното - какво да правим с "любимия" IE на всички?

Текстови сенки в IE

Въпреки че IE до версия 8 не разбира text-shadow, той има много свои собствени „звънци и свирки“. По-специално, има филтър dropShadow() за създаване на сенки. За да се появят сенки, елементът трябва да има зададено оформление. Можете да инсталирате по няколко начина:

• като зададете свойствата на елемента: block + height() или width())
• давайки елемента : абсолютен
• като посочите: ляво/дясно
• настройка на мащаба: 1

H1 (filter:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,positive="true"); увеличение: 1; )

Изглеждаше, че човек може да извика „Ура!!!“ и се наслаждавайте на живота, но вижте как работи този филтър в действителност:

Ето как ще изглежда текстът, ако приложите филтъра dropShadow към него

За тези, които не разбират, ето недостатъците на този филтър:

• сянката изглежда ужасно: ъглова, без плавен преход към фона с полупрозрачност
• стилът на шрифта е изкривен
• сянката е практически невъзможна за регулиране (можете да контролирате само позицията на сянката) - това може да бъде частично заобиколено чрез използване на филтъра за сянка вместо dropShadow, но критичните първи два недостатъка остават
• задължителното присъствие на оформление донякъде ограничава разработчика

Този резултат не е приемлив в реални проекти. Не е ясно кой и как е поел тази работа от разработчиците.

Kilian Valkhof предложи да се използва емулация на сянка:

1. не прилагайте филтъра директно към текста
2. използвайте комбинация от филтри за сияние и замъгляване вместо dropShadow и сянка

Това ще избегне изкривяването на текста и ще направи сянката по-гъвкава.

Тестова заглавкаТестовый заголовок

H1 (text-shadow: 3px 3px 3px #cccccc; позиция: относителна; мащабиране: 1; цвят: #000; ) h1 span (позиция: абсолютна; ляво: -3px; горе: -3px; z-индекс: -1; филтър: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled="true") ; мащабиране: 1; )

Но дори и при този подход все още има редица недостатъци:

• несемантичният код е допълнителен елемент и дори при дублиране на текст няма да има най-добър ефект върху логическата структура на съдържанието и SEO оптимизацията. Този проблем може да бъде разрешен с помощта на javascript, който ще вмъкне допълнителен елемент за IE, когато страницата се зареди
• не съответства на дисплея в други браузъри (които разбират текстова сянка) - филтрите ви позволяват да емулирате сянка с минимални настройки. Не винаги е възможно да се постигне сходство в сянка с други браузъри
• по-малко гъвкавост - филтрите няма да осигурят всички възможности на text-shadow, например няма да е възможно да се внедрят множество сенки

За да създадете сенки за IE, можете да използвате javascript (не за първи път javascript спасява положението)

Текстови сенки с помощта на javascript

От скриптовете, които тествах, избрах jquery плъгина „Drop Shadow“. Неговите предимства:

• емулира сенки чрез вмъкване на множество контейнери, т.е. без използване на филтри за IE. Това прави възможно сенките в IE да бъдат възможно най-подобни на други браузъри + няма нужда да се притеснявате за оформлението за IE
• създава сенки не само за IE, което понякога може да бъде полезно
• скриптът е лек - 4Kb (ако премахнете коментарите от кода), а ако приложите компресия, ще бъде още по-малко. Има изисквания за писане на скрипт - наличието на скрипта jquery.dimensions.js, но все още не разбирам защо е необходим. Сенките се създават, изтриват, дефинират по id и без него.
• лесен и ясен за използване
• Можете да емулирате множество сенки с известен успех

недостатъци:

• не можете да инициализирате скрипт чрез идентификатор на елемент
• ако на елемента е даден фон, сянката ще бъде създадена не за текста, а за елемента като цяло
• Задължително включване на библиотеката jquery (която е повече от 50Kb). Но популярността на jquery на практика елиминира този недостатък
• Според описанието на скрипта е необходима и връзката на jquery.dimensions.js (още 2Kb). Но не разбирам защо е необходима тази библиотека, всичко изглежда добре без нея

Използване на плъгина Drop Shadow

Синтаксис:

JQuery(селектор).dropShadow(опции); // създаване на сянка върху елемента jQuery(selector).redrawShadow(); // преначертаване на сянката jQuery(selector).removeShadow(); // премахване на сянката jQuery(селектор).shadowId(); // връща идентификатора на сянката на елемента

Отляво: [цяло число] (по подразбиране = 4) отгоре: [цяло число] (по подразбиране = 4) замъгляване: [цяло число] (по подразбиране = 2) непрозрачност: [дробно число] (по подразбиране = 0,5) цвят: [низ] (по подразбиране = " черно") размяна: [булева стойност] (по подразбиране = невярно)

Параметрите отляво и отгоре са координатите на началото на сянката спрямо горния ляв ъгъл на етикета (или обекта). Положителните стойности преместват сянката надясно и надолу, отрицателните стойности преместват сянката наляво и нагоре.