Описание

Добавя сянка към текста и също така задава параметрите му: цвят на сянката, отместване спрямо надписа и радиус на замъгляване. Свойството 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);

Влад Мержевич

Едно време имаше известна мода за текст със сенки и подобен ефект можеше да се намери на почти всеки уебсайт. В графичен редактор добавянето на сянка е просто, изглежда страхотно, тук е текстът със сянка и е избутан на уеб страници, независимо от стила на сайта и чувството за пропорция на дизайнера. Когато повечето браузъри започнаха да поддържат свойството стил на текстова сянка, модата вече беше преминала и сега текстът със сянка е доста рядък. Text-shadow обаче има редица други неявни приложения, за които малко хора подозират. Използвайки това свойство, можете да направите контурен текст, да го „екструдирате“, да създадете блясък, замъгляване и много повече.

Използване на текстова сянка

Четири параметъра са записани като стойности: цвят на сянката, хоризонтално и вертикално изместване и радиус на размазване на сянката (фиг. 1).

Ориз. 1. Параметри на текст-сянка

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

Голямо предимство на text-shadow е възможността да добавяте няколко различни сенки наведнъж, като изброявате параметрите им, разделени със запетаи. Тази функция ви позволява да създавате различни ефекти.

За съжаление IE преди версия 10.0 не поддържа text-shadow, така че няма да видим никаква красота в този браузър.

Контурният текст се характеризира с това, че всяка буква е оградена с линия, чийто цвят се различава от цвета на текста (фиг. 2). Този ефект изглежда най-добре с безсерифен шрифт. голям размер, например заглавия. За основния текст използването на контур само влошава четливостта.

Ориз. 2. Очертайте текст

Контурът може да бъде създаден по два метода. В първия метод задаваме нулево отместване на сянка и малък радиус на размазване, буквално 1-2 пиксела (пример 1). Увеличаването на стойността на размазването превръща контура в блясък около текста, което е различен ефект.

Пример 1: Контурен текст

Контурен текст

Контурът, направен по този метод, е показан на фиг. 1. Очертанията се оказват леко замъглени, така че за тези, които искат да получат ясна линия, е предназначен вторият метод. Състои се от използване на четири резки сенки от един и същи цвят, които се изместват под различни ъгли с един пиксел (пример 2).

Пример 2. Четири сенки за контура

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Контурен текст

Появата на такъв контур е показана на фиг. 3. Прави впечатление, че контурът е по-изразителен.

Ориз. 3. Контур с четири сенки

За да добавите 3D текстов ефект, показан на фиг. 4 се прилагат едновременно няколко сенки, които се изместват един спрямо друг с един пиксел хоризонтално и вертикално.

Ориз. 4. 3D текст

Лично на мен този тип текст напомня на надписи в ретро стил и отново е най-подходящ за заглавия, а не за основна част на уеб страница.

Броят на сенките зависи от това колко искате да „издърпате“ текста напред. По-голямото число увеличава „дълбочината“ на буквите, по-малкото, напротив, намалява триизмерността. Пример 3 използва пет сенки от един и същи цвят.

Пример 3: Сянка за добавяне на триизмерност

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Десет камерен хладилник

За всички сенки задаваме радиуса на размазване на нула и същия цвят. Сенките се различават само по своите стойности на отместване.

Щамповане на текст

За да създадете ефект на релефен текст или, с други думи, релеф, цветът на текста трябва да съответства на цвета на фона. Една част от „стърчащите“ над повърхността букви изглеждат осветени, а другата част е в сянка (фиг. 5).

Ориз. 5. Релефен текст

За да добавим подобен ефект са ни нужни две сенки - бялата сянка преместваме с един пиксел нагоре наляво, а тъмносивата надолу надясно (пример 4).

Пример 4: Релефен текст

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Релефен текст

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

Текстова сянка: #333 -1px -1px 0, #fff 1px 1px 0;

Сияние

Сиянието около текста е същата сянка, само че е ярко и контрастно. По този начин, за да създадете ефект на сияние, просто променете цвета на сянката и задайте желания радиус на размазване. Тъй като светенето около текста трябва да е равномерно, отместването на сянката трябва да бъде зададено на нула. На фиг. Фигура 6 показва пример за светене в различни цветове.

Ориз. 6. Светещ текст

Пример 5. Сияние

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Светлата страна

Тъмна страна

Размазване

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

Ориз. 7. Текст със замъгляване

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

Пример 6: Замъгляване на текст

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

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

Сенки и псевдокласове

Сянката не трябва да се добавя директно към текста; Благодарение на това се получават интересни ефекти с текст, като контурирана първа буква на абзац или блясък на връзка, когато задържите курсора на мишката върху него. Пример 7 показва такива техники.

Пример 7: Използване на псевдо-класове

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

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

Друг начин да украсите уеб страница е да направите текст със сянка в CSS. С правилното използване на този стил можете успешно да подчертаете заглавие, параграф или част от текста. Можете да регулирате цвета на сянката, отместването и замъгляването.

Можете да зададете текстова сянка в CSS, като използвате свойството text-shadow, което се поддържа от всички браузъри с изключение на Internet Explorer версия 9 и по-стари. Има проблеми и с Opera Mini - този браузър поддържа само частично собствеността. По-долу е даден пример за стил на писане и стойности на свойства:

H1 (текстова сянка: 3px 5px 6px #6C9;)

Както можете да видите, посочихме до четири стойности, разделени с интервал. Нека да го прегледаме по ред:

• 3px – първата стойност отговаря за изместването на сянката по оста X (дясно, ляво). Положителната стойност премества сянката надясно, а отрицателната стойност премества сянката наляво.
• 5px – втората стойност отговаря за отместването на сянката по оста Y (надолу, нагоре). Положителната стойност премества сянката надолу, а отрицателната стойност премества сянката нагоре.
• 6px – третата стойност отговаря за радиуса на замъгляване на сянката. Този параметър не е задължителен. По подразбиране размазването е 0 пиксела, което прави сянката ясна и незамъглена.
• #6c9 – четвъртата стойност отговаря за цвета на сянката. Този параметър не е задължителен. По подразбиране цветът на сянката е зададен на същия цвят като текста, към който се прилага стилът.

Как изглежда сянката в браузъра (екранна снимка):

Множество CSS сенки за текст

Също така е възможно да се използват множество групи от стойности за свойството text-shadow. Това означава, че можете да зададете няколко сенки за един текст. За да направите това, трябва да напишете групи от стойности, разделени със запетаи.

H1 (текстова сянка: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )

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

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

Дори и най-зеленият дизайнер знае как да прави сенки във 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) цвят: [низ] (по подразбиране = " черно") размяна: [булева стойност] (по подразбиране = невярно)

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

Типографията е любимата ми играчка, когато става въпрос за уеб дизайн. Разбира се, с негова помощ можете да привлечете вниманието на човек, като просто промените леко стила или размера на шрифта. Много просто и много ефективно; много книги са написани по тази тема и много копия са счупени в спорове. Днес няма да давам съвети за типографията като цяло - нямам достатъчно квалификация, но как да проектирате текста на уебсайта си винаги е добре дошъл. Затова днес ще ви покажа няколко начина да използвате свойството CSS3. текст-сянка, много просто, но в правилните ръце може да направи чудеса.

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

Този имот CSS3Работи във всички най-нови браузъри, без префикси на доставчици като -moz и -webkit. Дори IE може да бъде научен да разбира това свойство, трябва да използва Modernizr или аналози.

Text-shadow: x-offset y-offset цвят на размазване;

Това е целият основен синтаксис. Първата стойност е хоризонталното отместване, втората е вертикалното отместване, размазването на сянката и цвета на сянката. Да разгледаме един пример:

Текстова сянка: 2px 4px 3px rgba(0,0,0,0.3);

Преместихме сянката, замъглихме я с 3 пиксела и присвоихме черния цвят с прозрачност 30%. Защо използвам алфа канал или прозрачност? Това ви дава повече свобода в действията ви; можете да го направите малко по-светъл или по-тъмен, като просто промените стойността на прозрачността, без да се налага да се притеснявате за избора на цвят. Става доста бързо, препоръчвам го.

Депресирани букви

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

Твърда сянка

Сега ретро стилът е на мода и там използват сянка без размазване. Е, ние сме готови за това

Двойна сянка

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

Надолу и далеч

Текстът е обемен и сякаш виси над фона, нали? Тук използвахме 4 сенки с различни нивазамъгляване и местоположение. Като цяло, колкото повече сенки се използват, толкова по-реалистичен е ефектът; вземете това предвид във вашите проекти.

Малък 3D текст

Подобно на предишния пример, три сенки, но разположени по-близо, оттук и ефектът на триизмерност и тежест на текста.

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

Попаднах на работата на този дизайнер онлайн и не можах да я подмина. Впечатляващ реализъм.

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

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

Текст за блясък

И тук всичко е просто - не местим сянката, размазваме я по-силно и я правим бяла. Това е целият блясък.

Ретро стил

По-горе говорих за ретро стила, това е от същата опера. Сега е толкова модерно, множество ясни сенки. Използвайте по свое усмотрение

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

Ето ефекта от множество източници на светлина, които дават сенки във всички посоки.

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

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

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