Както се прави с CSS текст инсулт 3 примери с код

Приветствия към вас, скъпи читатели. Днес аз ще ви кажа, и ще ви покаже как можете да го направите в CSS текст ход. Всички манипулации ние ще извършват изключително с имот текст сянка.

Тънки ясни проследявания

Тъй като текстът на която ще се тества нашите идеи, предлагам ви да използвате това:

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

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

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

В нашия случай, ние първо попита малка промяна надолу и наляво, а после нагоре и надясно. В резултат на това, текстът около контура получи следа. Ако добавим към всяка сянка все още замъгляване на 10 пиксела, тя трябва да изглежда така:

размита инсулт

Друг подход е да се поиска да не се измести, но за да се определи размазване - тогава текстът ще бъде, тъй като тя беше обграден, но не е ясно. Добавете една и съща точния текст на HTML, но друг набор стил клас - текст DEC2:

Тя изглежда така:

мазна инсулт

Тя е по-трудна за изпълнение, тъй като твърде силна промяна на сенките може да доведе до нечетлив текст. И все пак, определен ефект може да се постигне, въпреки че ще трябва да добавите повече сенки, отколкото в предишните случаи. В съответствие с това в HTML добавяте нови текстови фрагменти с класове на текст dec3 и текст-dec4. И тук са стиловете за тях:

Както можете да видите, текстът запазва четливостта и все още се получи приличен черен инсулт. Същността на този подход е, че ние постепенно добавяне на нови сенки, увеличаване на офсет всеки път с 1 пиксел.

Повече мазнини проследявания от всички страни

CSS, докато не всемогъщ

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

Можете също така да се интересуват от