CSS е пълен с опции за подобряване на външния вид на вашите уебсайтове; сенките на текста и кутията са отлични примери. Те предлагат подобни резултати на сенките, открити в софтуера за редактиране на изображения като Photoshop.
Но как работят CSS сенките? Нека се потопим направо.
Как да използвате CSS Box Shadow
Можете да приложите сянка на CSS кутия с един ред CSS, съдържащ диапазон от до шест стойности. Редът на стойностите е от решаващо значение за работата на сянката на вашата CSS кутия и изглежда така:
кутия-сянка: отместване-x отместване-y размазване разпространение на цвят вмъкване;Нека да разгледаме всяка от стойностите по ред.
Позиция на сенчеста кутия в CSS
Стойностите offset-x и offset-y контролират позицията на сянката на вашата кутия. Стойността на offset-x представлява хоризонталната позиция на сянката, докато offset-y е вертикалното изместване.
кутия-сянка: 10px 10px;Положителните стойности водят до сянка под и вдясно от елемента.
Можете също да използвате отрицателни стойности за h-офсет и v-офсет:
кутия-сянка: -10px -10px;Отрицателното h-отместване премества сянката наляво, докато отрицателното v-отместване я премества нагоре:
CSS Box Shadow Blur
Както можете да видите, добавянето на h-офсет и v-офсет към вашата сянка създава солидна сянка без никакво оперение. Стойността на замъгляване размазва сянката на вашата CSS кутия и влиза в сила, ако предоставите трета стойност:
кутия-сянка: 10px 10px 20px;Колкото по-голямо е числото, което добавите към стойността на размазването, толкова по-размазана ще бъде вашата сянка на CSS кутия. Тази стойност не може да бъде отрицателна.
CSS Box Shadow Spread
Стойността на разпространението ви позволява да промените размера на сянката си, без да променяте нейната позиция.
кутия-сянка: 10px 10px 20px 30px;Положителната стойност на разпространението ще направи сянката на вашето CSS поле по-голяма, докато отрицателната стойност ще я направи по-малка.
Цвят на сянката на кутията в CSS
Сенките на полето на CSS по подразбиране са с цвета на текста на елемента, но можете да го замените, като добавите цвят:
кутия-сянка: 10px 10px 20px 10px #0000ff;Цветът, който използвате, трябва да бъде в легален цветови формат на CSS, като шестнадесетичен код, RGB код или предварително зададен цвят. Можеш научете за шестнадесетичните кодове и други легални цветови опции на CSS, преди да започнете със сенките си.
CSS Box Shadow Inset
Сенките на CSS кутията по подразбиране попадат извън присвоения им елемент. Като добавите вмъкване към свойството box-shadow, можете да покажете сянката от вътрешната страна на елемента.
кутия-сянка: 10px 10px 20px 10px #0000ff вмъкване;Това е предварително дефинирана текстова стойност; просто го добавете или премахнете, за да зададете стойността.
Как да използвате CSS Text Shadow
Текстовите сенки в CSS са като кутийките, но имат по-малко стойности за промяна. Синтаксисът за CSS текстова сянка изглежда така:
текст-сянка: отместване-x отместване-y цвят на радиус на размазване;Но как работят тези ценности?
Позиция на сянка на CSS текст
Отместванията на сянка на текст в CSS работят много подобно на същите стойности на сянка на полето:
текст-сянка: 10px 10px;Положителните стойности ще позиционират сянката под и вдясно от текста.
Отрицателните стойности правят обратното, поставяйки сянката над и отляво на текста.
текст-сянка: -10px -10px;Можете да смесвате отрицателни и положителни стойности, за да позиционирате идеално вашата CSS текстова сянка.
Радиус на замъгляване на сянка в CSS текст
Радиусът на замъгляване на сянка в CSS ви позволява да замъглите сянката зад вашия текст.
текст-сянка: 10px 10px 10px; Стойността по подразбиране за тази стойност е 0 (без замъгляване).
Цвят на сянката на CSS текст
По подразбиране сенките на текста в CSS съответстват на цвета на текста. Можете да промените цвета на вашия текст, като го добавите в края на свойството CSS text shadow.
текстова сянка: 10px 10px 10px #0000ff;Подобно на цветовете на сенчестите кутии на CSS, за това трябва да използвате законен CSS цвят.
Примери за дизайн на CSS кутия и текстова сянка
Можете да започнете да експериментирате с използването на CSS кутия и текстови сенки, след като разберете основите. Идеите по-долу трябва да ви вдъхновят да измислите свои собствени творчески начини за използване на тези CSS свойства.
Двуцветни граници с две сенки на CSS кутия
Можете да добавите повече от една сянка на кутия или сянка на текст към HTML елемент. Стига да има запетаи между тях, можете да добавяте нови сенки към едно свойство.
кутия-сянка: 30px 30px#0000ff, -30px-30px 0px#00ff00;Тази двуцветна рамка е добър пример за това. Две сенки на CSS кутия с противоположни позиции и без размазване/разпръскване създават отлична творческа граница.
Двойни CSS текстови сенки за драматичен ефект
Подобно на идеята по-горе, можете да добавите и позиционирате текста с множество текстови сенки за интересни резултати.
текстова сянка: 35px 20px 4px тъмно сиво, -35px -20px 4px тъмно сиво;Този пример показва ред текст със сянка отгоре и сянка отдолу, като и двата имат базирани на текст цветови стойности.
Многоцветни фонове с вмъкнати CSS кутийки
CSS е достатъчно мощен, за да създава уникални и интересни активи без външни файлове. Използването на вмъкната сянка на CSS кутия като фон е чудесен пример за това.
кутия-сянка: 20px 10px 10px 40px #000000 вмъкване, -50px -30px 8px 60px сиво вмъкване, 30px 20px 6px 90px светлосиво вмъкване;Това поле има бял фон, заедно с три вмъкнати сенки в различни цветове. Сенките се припокриват, за да създадат уникален фон.
По-нататъшното засилване на този ефект е лесен въпрос добавяне на стилен CSS градиент на фона към твоя елемент.
CSS Box Shadows & Text Shadows за креативен уеб дизайн
CSS кутията и текстовите сенки са лесни за използване, след като знаете как да работите с тях. Вече имате инструментите, от които се нуждаете, за да започнете да работите върху собствения си дизайн, но трябва да продължите да проучвате CSS, за да подобрите уменията си.