Примери за използване на CSS текстови сенки

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

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

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

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

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

текст с класа:

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

Сега нека да попитам за текст атрибут текст сянка. Но първо да разберем какво ценности отнема този атрибут:

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

Тя се определя, както следва:

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

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

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

2. Ефект отпечатък

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

Използване на кода за RGBA, можете да зададете цвят непрозрачността. Имайте предвид, че цвета на текста има непрозрачност на 60% (0.6). сянка DIV CSS 10% (0.1).