Как да използвам CSS кутия-сянка: 13 трика и примери

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

Можете да промените цвета на фона на елемента, стила на шрифта, цвета на шрифта, сянката на полето, полето и много други свойства, като използвате CSS. Ще ви преведем през някои ефективни приложения на box-shadow в това ръководство.

Какво е CSS кутия-сянка?

The кутия-сянка свойството се използва за прилагане на сянка към HTML елементи. Това е едно от най-използваните CSS свойства за стилизиране на кутии или изображения.

CSS синтаксис:

box-shadow: [хоризонтално отместване] [вертикално отместване] [радиус на размазване] [радиус на разпръскване по избор] [цвят];

1. хоризонтално отместване: Ако хоризонталното отместване е положително, сянката ще бъде вдясно от полето. И ако хоризонталното отместване е отрицателно, сянката ще бъде вляво от полето.
instagram viewer
2. вертикално отместване: Ако вертикалното отместване е положително, сянката ще бъде под полето. И ако вертикалното отместване е отрицателно, сянката ще бъде над полето.
3. радиус на размазване: Колкото по-висока е стойността, толкова по-замъглена ще бъде сянката.
4. радиус на разпространение: Това означава колко трябва да се разпространи сянката. Положителните стойности увеличават разпространението на сянката, отрицателните стойности намаляват разпространението.
5. Цвят: Означава цвета на сянката. Също така поддържа всеки цветен формат като rgba, hex или hsla.

Параметрите за размазване, разпространение и цвят не са задължителни. Най-интересната част от box-shadow е, че можете да използвате запетая, за да разделите стойностите на box-shadow произволен брой пъти. Това може да се използва за създаване на множество граници и сенки върху елементите.

1. Добавете тъмна кутия-сянка отляво, отдясно и отдолу на кутията

Можете да добавите много тъмни сенки към три страни (вляво, вдясно и отдолу) на полето, като използвате следния CSS на полето-сянка с вашия целеви HTML елемент:

кутия-сянка: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Изход:

2. Добавете тъмна кутия-сянка към Всички страни

Можете да добавите светли сенки от всички страни на кутията, като използвате следния CSS на box-shadow с вашия целеви HTML елемент:

кутия-сянка: rgba (100, 100, 111, 0,2) 0px 7px 29px 0px;

Изход:

3. Добавете тънка кутия-сянка към долната и дясната страна

Можете да добавите сенки в долната и дясната страна на полето, като използвате следния CSS на box-shadow с вашия целеви HTML елемент:

box-shadow: rgba (0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Изход:

4. Добавете тъмна кутия-сянка към Всички страни

Можете да добавите тъмна сянка от всички страни на кутията, като използвате следния CSS на box-shadow с вашия целеви HTML елемент:

box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px;

Изход:

5. Добавете Spread Shadow към всички страни

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

box-shadow: rgba (0, 0, 0, 0.25) 0px 54px 55px, rgba (0, 0, 0, 0.12) 0px -12px 30px, rgba (0, 0, 0, 0.12) 0px 4px 6px, rgba (0, 0, 0, 0,17) 0px 12px 13px, rgba (0, 0, 0, 0,09) 0px -3px 5px;

Изход:

6. Добавете тънка гранична сянка към всички страни

Можете да добавите проста граница сянка от всички страни на полето, като използвате следния CSS с вашия целеви HTML елемент:

box-shadow: rgba (6, 24, 44, 0.4) 0px 0px 0px 2px, rgba (6, 24, 44, 0.65) 0px 4px 6px -1px, rgba (255, 255, 255, 0.08) 0px 1px 0px вложка;

Изход:

7. Добавете кутия-сянка към долната и лявата страна

Можете да добавите сянка в долната и лявата страна на кутията, като използвате следния CSS на box-shadow с вашия целеви HTML елемент:

box-shadow: rgba (0, 0, 0, 0.1) -4px 9px 25px -6px;

Изход:

8. Добавете тъмна кутия-сянка към горната и лявата страна, тъмна сянка към долната и дясната страна

Можете да добавите светла сянка в горната и лявата страна на кутията, както и тъмна сянка в долната и дясната страна на кутията, като използвате следния CSS с вашия целеви HTML елемент:

box-shadow: rgba (136, 165, 191, 0.48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;

Изход:

9. Добавете тънка, цветна гранична сянка към всички страни

Можете да добавите обикновена цветна гранична сянка от всички страни на полето, като използвате следния CSS на box-shadow с вашия целеви HTML елемент:

box-shadow: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;

Изход:

10. Добавете няколко цветни гранични сенки в долната и лявата страна на кутията

Можете да добавите множество цветни сенки в долната и лявата част на полето, като използвате следния CSS с вашия целеви HTML елемент:

box-shadow: rgba (50, 50, 93, 0.25) 0px 30px 60px -12px вложка, rgba (0, 0, 0, 0.3) 0px 18px 36px -18px вложка;

Изход:

11. Добавете няколко цветни гранични сенки отдолу

Можете да добавите множество цветни сенки в долната част на полето, като използвате следния CSS на полето-сянка с вашия целеви HTML елемент:

box-shadow: rgba (240, 46, 170, 0.4) 0px 5px, rgba (240, 46, 170, 0.3) 0px 10px, rgba (240, 46, 170, 0.2) 0px 15px, rgba (240, 46, 170, 0,1) 0px 20px, rgba (240, 46, 170, 0,05) 0px 25px;

Изход:

12. Добавете няколко цветни гранични сенки в долната и дясната страна на кутията

Можете да добавите множество цветни сенки в долната и дясната страна на полето, като използвате следния CSS с вашия целеви HTML елемент:

box-shadow: rgba (240, 46, 170, 0.4) 5px 5px, rgba (240, 46, 170, 0.3) 10px 10px, rgba (240, 46, 170, 0.2) 15px 15px, rgba (240, 46, 170, 0,1) 20px 20px, rgba (240, 46, 170, 0,05) 25px 25px;

Изход:

13. Добавете светли сенки към лявата и дясната страна, разнесете сянката отдолу

Можете да добавяте леки сенки от лявата и дясната страна и да разпространявате сянка в долната част на полето, като използвате следния CSS на box-shadow с вашия целеви HTML елемент:

box-shadow: rgba (0, 0, 0, 0.09) 0px 2px 1px, rgba (0, 0, 0, 0.09) 0px 4px 2px, rgba (0, 0, 0, 0.09) 0px 8px 4px, rgba (0, 0, 0, 0.09) 0px 16px 8px, rgba (0, 0, 0, 0.09) 0px 32px 16px;

Изход:

Интегрирайте CSS с HTML страница

Сега знаете как да добавяте страхотни ефекти на полето-сянка с помощта на CSS, можете лесно да ги интегрирате с HTML елементи по множество начини.

Свързани: 11 полезни инструмента за проверка, почистване и оптимизиране на CSS файлове

Можете да го вградите в самата HTML страница или да го прикачите като отделен документ. Има три начина да включите CSS в HTML документ:

Вътрешен CSS

Вградените или вътрешни таблици със стилове се вмъкват в раздел на HTML документ с помощта на елемент. Можете да създадете произволен брой елементи в HTML документ, но те трябва да бъдат затворени между и етикети. Ето пример, демонстриращ как да се използва вътрешен CSS с HTML документ:

Стил 4

Вграден CSS

Вграденият CSS се използва за добавяне на уникални правила за стил към HTML елемент. Може да се използва с HTML елемент чрез стил атрибут. Атрибутът style съдържа CSS свойства под формата на "свойство: стойност" разделени с точка и запетая (;).

Свързани: Научете как да създавате двуизмерни уебсайтове с CSS Grid

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

Стил 4

Външен CSS

Външният CSS е най-идеалният начин за прилагане на стилове към HTML документи. Външен лист със стилове съдържа всички правила за стил в отделен документ (.css файл), след което този документ се свързва с HTML документа с помощта на етикет. Този метод е най-добрият метод за дефиниране и прилагане на стилове към HTML документи, тъй като засегнатият HTML файл изисква минимални промени в маркирането. Ето пример, демонстриращ как да се използва външен CSS с HTML документ:

Създайте нов CSS файл с .css удължаване. Сега добавете следния CSS код вътре в този файл:

.heading {
подравняване на текст: център;
}
.image-box {
дисплей: блок;
поле вляво: автоматично;
поле вдясно: автоматично;
box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px;
}

И накрая, създайте HTML документ и добавете следния код вътре в този документ:

Стил 4

Имайте предвид, че CSS файлът е свързан с HTML документа чрез таг и href атрибут.

Всички горепосочени три метода (Вътрешен CSS, Вграден CSS и Външен CSS) ще покажат един и същ изход -

Направете вашата уеб страница елегантна с CSS

Чрез използването на CSS имате пълен контрол върху стила на вашата уеб страница. Можете да персонализирате всеки HTML елемент, като използвате различни CSS свойства. Разработчици от цял ​​свят допринасят за актуализации на CSS и го правят от пускането му през 1996 г. Като такива, начинаещите имат много да научат!

За щастие CSS е удобен за начинаещи. Можете да получите отлична практика, като започнете с няколко прости команди и видите къде ви отвежда творчеството.

10 прости примера за CSS кодове, които можете да научите за 10 минути

Искате ли да научите повече за използването на CSS? Опитайте тези основни примери за CSS код, за да започнете, след което ги приложете към собствените си уеб страници.

Прочетете Напред

За автора