12 интересни възможности сянка за текста с помощта на имот CSS текст сянка

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

Ние се опитваме да разгледа няколко варианта за сенки с имот текст сянка за текст. Всичко това може да се копира и в работата си.

Основна сянка.

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

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

Сега на практика сянка се понижава до 2 пиксела е изместен в дясно от 4 пиксела с размазването 4 черен пиксел с прозрачността на 30%

текстови сянка: 2 пиксела 4px 3px RGBA (0,0,0,0.3);

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

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

Illusion пробив текст.

Голямото нещо за работа с текст сянка е, че той ви дава повече възможности от сянката на собственост. Така например, създаване на текст илюзия пробив.

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

текстови сянка: 2 пиксела 2px 3px RGBA (255,255,255,0.1);

Както можете да видите, ние сме попита главния фон цвета на # 222, а текстът - черен с прозрачността на 60%. И нашата бяла сянка се намира малко по-долу и вдясно от основния текст.

Tough сянка.

Не забравяйте, че това не е необходимо, за да отмие сянката. Чувствайте се свободни да експериментирате, например, с твърди ретро текстове.

текстови сянка: 6 пиксела 6 пиксела 0px RGBA (0,0,0,0.2);

Двойна сянка.

Истинско удоволствие да се извлекат от знаейки, че вие ​​не сте ограничени до една сянка. С текстови сянка могат да бъдат разделени със запетаи, за да постави нов нюанс.

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

текстови сянка: shadow1, shadow2, shadow3;

Така например е възможно да се направи това, както е показано на фигурата, като Vintage текст за вестника.

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

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

текстови сянка: 0px 3px 0px # b2a98f,

Подчертавайки важността.

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

текстови сянка: 0px 4px 3px RGBA (0,0,0,0.4)

Ако погледнем отвъд това, което се предлага от други дизайнери да използвате сенки, два метода са били открити, които са идеални за нашите "асистент" по-малък.

Тук, за да се получи желания резултат, използвайки 12 отделни сенки.

текстови сянка: 0 0 1 пиксел #ccc,