Box Shadow CSS Tutorial - Как да добавите падаща сянка към всеки HTML елемент

Можем да добавим падаща сянка към всеки HTML елемент, използвайки свойството CSS box-shadow. Ето как.

Добавяне на основна падаща сянка

Нека първо настроим някои основни HTML елементи, за да добавим нашите сенки:

 Box1 Box2 Box3 

След това добавете няколко основни CSS:

p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }

Резултатът е само три черни кутии, за които ще бъде лесно да добавим сенки, като извикаме техните уникални идентификационни номера:

Настройка на HTML елементи

За да добавите основна сянка, нека използваме box-shadowсвойството в поле 1:

/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
Добавяне на основна сянка в поле 1

Тук имаме 3 параметъра. Първите 2 са съответно x-offset и y-offset. Те определят местоположението на падащата сянка.

Отместването е спрямо произхода, който в HTML винаги е горният ляв ъгъл на елемент. Положителното X-изместване ще премести сянката надясно, а положителното Y-отместване ще измести сянката надолу.

Третият параметър е цветът на вашата сянка.

Имайте предвид, че въпреки че използвахме елементи тук, box-shadowсвойството може да се приложи и към всеки друг HTML елемент.

Добавяне на радиус на замъгляване

Ако искаме сянката да изглежда малко по-реалистична, ще искаме да експериментираме с blur-radiusпараметъра.

Този параметър контролира колко да се размазва сянката, така че тя да стане по-голяма и по-лека. Нека го приложим към поле 2:

/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }
Добавяне на радиус на размазване към поле 2

Стойността от 4px задава радиуса на размазването, който да се приложи към нашата сянка.

Добавяне на радиус на разпространение

Ако искаме да контролираме размера на сянката, можем да използваме spread-radiusпараметъра, който контролира колко дадена сянка расте или се свива.

Нека добавим радиус на разпространение от 8px към Box 2:

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
Добавяне на радиус на разпространение в допълнение към размазване към поле 2

Запомнете реда на тези параметри!

Комбиниране на множество сенки в един имот

Ако искаме да измислим, можем да добавим множество сенки за падане към елемент, използвайки едно box-shadowсвойство.

Нека направим това с Box 3, като едновременно добавим синя и зелена сянка:

/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }
комбинирайте множество сенки

Бонус: Създайте вградена сянка

Въпреки че няма да създаде падаща сянка, insetпараметърът може да се използва и със box-shadowсвойството.

Както подсказва името, този параметър създава вградена сянка (т.е. сянка в кутия).

На insetпараметъра може да се постави или в началото или в края на

box-shadowИмот. Тук демонстрираме използването му с blockquoteелемент.

HTML:

 The key to success is to start before you're ready. 

— Marie Forleo

CSS:

blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }
Създайте вградена сянка

Разбира се, можете да добавите малко размазване и разпространение, за да подобрите сянката, или дори множество сенки:

 box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
Вмъкната сянка, комбинирана с падаща сянка

С box-shadowимота можем лесно да направим елементите на уеб страница да се открояват, за да създадем приятен 3D светлинен ефект.

Ако искате да експериментирате сами, ето кодова писалка, която създадох с примерите, използвани в този урок.

Поиграйте и вижте какво можете да измислите!

Искате ли да видите повече съвети и знания за уеб разработка?

  • Абонирайте се за седмичния ми бюлетин
  • Посетете моя блог на 1000 Mile World
  • Последвай ме в Туйтър