Този урок представя няколко 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. С правилното използване на този стил можете успешно да подчертаете заглавие, параграф или част от текста. Можете да регулирате цвета на сянката, отместването и замъгляването.

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

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

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

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

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

Екранна снимка: текст със сянка, CSS

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

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

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

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

Екранна снимка: Множество сенки за CSS текст

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

Екранна снимка: 3D текстова сянка в 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);

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

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

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

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

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

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

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

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

тяло (фон: #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);

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

Двойна сянка

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

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

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

текстова сянка: 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) );

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

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

текстова сянка: 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 текст от Марк Дото

текстова сянка: 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);

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

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

цвят на фона: #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);

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

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

Имали ли сте някога неприятно усещане, когато вашите надписи не съответстват на цветовете на бутони, панели или просто текстът контрастира лошо с фона на страницата? Като се използва 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 сенки.