В днешната статия ще говорим за това как да се направи сянката от текста или да блокира с помощта на CSS3.
Нека първо направя малко HTML код.
Lorem Ipsum печал седне Амет.
А сега нека да попитам за нея стил:
тяло фон: #ccc;
>
р шрифта: 18 пкс;
текстови сянка: 0 0 1 пиксел #eee;
>
Сянка на текста се задава с помощта на имот текст сянка. при което първата стойност - се отмества хоризонтално, а вторият - вертикалата, третият - параметър размазване и четвъртата - на цвят сянка. Ако се сблъскате с този пример, ще видите доста интересен ефект на един пиксел бяла сянка, която сега се използва често.
Можете също да настроите няколко сенки, разделени със запетаи:
р текст сянка: 0 0 1 пиксел #eee, 3px 3px 3px # 000;
>
Сега нека да поговорим за това как да настроите сянка за блока.
За да започнете да променим маркировка
И питам оригиналните стилове
блок фон: # 333;
ширина: 200px;
височина: 200px;
марж: 20px;
>
Сега ние определяме нашия блок, използвайки сянка кутия сянка
блок фон: # 333;
ширина: 200px;
височина: 200px;
марж: 20px;
кутия сянка: 7px 1px 7px 5px # 555, -7px 1px 7px 5px # c1ff05;
>
Абсолютно всичко, което говорих за сенки за текст. държи в сянка блокове. В този пример, определени на първия сянката компенсира по оста х на 7px, върху ордината 1 пиксел, замъгляване 7px и светлина черно. От втората сянката всички едно и също, само изместването на оста х не е правилно и отляво, като попитахме отрицателно число. Както можете да видите, има четвърти вариант, който е радиусът на сянката на присаждане, но тя се използва рядко.
Те са били извън сянката. но има и вътрешна
блок бокс-сянка: добавям 9px 9px 3px # 112233;
>
Както можете да видите, сянката става вътрешна, само трябва да се добави в началото на думата вложката.
Това е всичко за днешната статия. На добър час!
Свързани статии