CSS langelio šešėlio ypatybė leidžia nustatyti šešėlį html elementas. Ją gana dažnai naudoja svetainių dizaineriai, norėdami kažkaip papuošti ir paryškinti rėmelius tekstu, vaizdais ir padaryti turinį skaitomesnį.

CSS langelio šešėlių sintaksė

... langelis-šešėlis : X Y R1 R2 spalva ; ...

• X – poslinkis išilgai X ašies (horizontalus)
• Y – poslinkis išilgai Y ašies (vertikalus)
• R1 – suliejimas (kuo didesnė reikšmė, tuo sklandesnis perėjimas)
• R2 - išplėtimo spindulys (jei teigiamas, ištempia, neigiamas, suspaudžia)
• spalva - spalva (gali būti nurodyta bet kokiu formatu: #RGB, spalvos pavadinimas)
• įdėklas – jei ši vertė yra, šešėlis bus bloko (elemento) viduje

1 pavyzdys. HTML rėmelis su langelio šešėliu be poslinkio

Toliau pateikiamas paprasčiausias būdas naudoti šešėlį, kai įjungta CSS langelio šešėlio ypatybė html puslapį kai jis tolygiai teka aplink visą rėmą be poslinkio.

Пример №1. Рамка с тенью

Пример №1. Рамка с тенью

Пример 2. HTML рамка со смещенной тенью box-shadow

Практически тот же пример, что и первый, но только со смещением рамки.

Пример №2. Рамка со смещенной тенью

На странице преобразуется в следующее

Пример №2. Рамка со смещенной тенью

Пример №3. Свечение рамки html

Реализация тени в виде свечения

Пример №3. Свечение

На странице преобразуется в следующее

Пример №3. Свечение

Пример 4. Внутреннее свечение границы html

Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset .

Пример №4. Внутреннее свечение

На странице преобразуется в следующее

Пример №4. Внутреннее свечение

Пример 5. Совмещение теней в html

Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.

Пример №5. Совмещение теней

На странице преобразуется в следующее

Пример №5. Совмещение теней

Примечание: старые браузеры

IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow

• -webkit-box-shadow - для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
• -moz-box-shadow - для Firefox до версии 4.0

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

Для добавления тени используется свойство box-shadow , у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.

Рис. 1. Значения свойства box-shadow

1. ключевое слово inset устанавливает тень внутри элемента;
2. сдвиг тени по горизонтали (5px - вправо, -5px - влево);
3. сдвиг по вертикали (5px - вниз, -5px - вверх);
4. радиус размытия тени (0 - резкая тень);
5. растяжение тени (5px - растяжение, -5px - сжатие);
6. цвет тени.

Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета.

За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. В табл. 1 представлен код и результат, к которому он приводит.

Табл. 1. Сочетания параметров тени

Код	Результат	Описание
box-shadow: 5px 5px;		Резкая тень справа и снизу.
box-shadow: -5px -5px;		Резкая тень слева и сверху.
box-shadow: 0 0 5px;		Размытая тень вокруг элемента.
box-shadow: 0 0 5px 2px;		Расширение тени на 2 пиксела.
box-shadow: 0 0 5px 2px red;		Красное свечение вокруг элемента.
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5);		Полупрозрачная тень.
box-shadow: inset 0 0 6px;		Тень внутри.

Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно. Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать.

Пример 1. Тень на фоновом рисунке

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Šio pavyzdžio rezultatas parodytas fig. 2. Šešėlis seka bloko kampų apvalinimą.

Ryžiai. 2. Šešėlio atsiradimas fono paveikslėlyje

Pridėdami „platų“ šešėlį, atminkite, kad jis gali išsikišti už matomų naršyklės lango kraštų ir dėl to atsiras horizontali slinkties juosta.

Šešėliai taip pat gali būti pridedami prie pseudo elementų. Fig. 3 paveiksle parodytas antraštės blokas su pridėtu šešėliu. Norėdami išvengti linijų sankryžoje, turite naudoti ::after pseudoelementą ir pridėti prie jo šešėlį.

Ryžiai. 3. Blokas su šešėliu

2 pavyzdyje parodytas tokio bloko sukūrimas.

2 pavyzdys. Blokas su šešėliu

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Elementas gali turėti daugiau nei vieną šešėlį, tačiau iš karto keli jų parametrai pateikiami atskirti kableliais langelio šešėlio reikšmėje. 3 pavyzdyje parodyta, kaip prie visų vaizdų pridėti dvigubą šešėlį.

2 pavyzdys. Blokas su šešėliu

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Šio pavyzdžio rezultatas parodytas fig. 4.

Ryžiai. 4. Dvigubo šešėlio vaizdas

Pirmasis šešėlis rodomas vaizdo kairėje su 20 pikselių suliejimo spinduliu, jo dydis sumažintas ketvirtuoju parametru (-20 pikselių). Antrojo šešėlio parametrai nurodomi po kablelio. Šešėlis rodomas paveikslėlio dešinėje ir taip pat sumažinamas siekiant simetrijos.

Šiandien mes sužinosime, kaip padaryti CSS šešėlius be vaizdų. Baigę šią pamoką, jums nebereikės CSS šešėlių generatoriaus.

Pagrindinis šešėlių, sukurtų naudojant CSS3, pranašumas yra diegimo paprastumas ir serverio užklausų skaičiaus sumažinimas (nes nebenaudojame vaizdų). Norėdami sukurti CSS šešėlį, mums reikia div žymos ir CSS langelio šešėlio savybės. Jums nereikės jokio papildomo žymėjimo, nes sukursime :after ir :befor pseudo elementus, kuriuos patalpinsime už pagrindinio objekto (div su klase blokas).

Pažvelkite į HTML kodą, kuriam sukursime CSS3 šešėlį:

Toliau galite pamatyti paruošti pavyzdžiai ir jiems įgyvendinti reikalingas kodas. Siekdami sumažinti tekstą puslapyje, praleisime CSS savybės su naršyklės priešdėliais. Pilnas kodas Jį galite pamatyti spustelėję pavyzdį atitinkančią nuorodą „Pavyzdys“.

.block ( padėtis: santykinis; plotis: 40 %; užpildas: 1 em; paraštė: 2 em 10 piks. 4 em; fonas: #fff; kraštinės spindulys: 4 piks.; langelio šešėlis: 0 1 piks. 4 piks. rgba(0, 0, 0, 0,3) , 0 0 40 tšk. rgba(0, 0, 0, 0,1) įterptas ; plotis: 50% aukštis: 15 piks.

Block 0, 0, 0, 0,1) rėmelis: 1px solid #efefef z-indeksas: -2; aukštis: 55%; po (dešinėn: 10 tšk.; kairėn: automatinis; transformuoti: pakreipti (8 laipsnių) pasukti (3 laipsniais); )

Naudodami šešėlį galite suteikti bloko perspektyvą. Žiūrėti pavyzdį.

Block 0, 0, 0, 0,1) įdėklas ; plotis: 50%; maks. plotis: 80 piks.

CSS šešėlis pakeltam blokui. Žiūrėti pavyzdį.

Block 0, 0, 0, 0,1) langelis-šešėlis: 0 15px 10px -10px rgba(0, 0,0,0,5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba , 0, 0, 0,1) įdėklas

CSS3 šešėlio pavyzdys vertikaliai sulankstytam blokui. Žiūrėti pavyzdį.

Block 0, 0, 0, 0,1) įdėklas ; kairysis: 50% 0 15 piks.

Block 0, 0, 0, 0,1) įdėklas ; kairėje: 0;

CSS3 šešėlio pavyzdys horizontaliai sulankstytam blokui. Žiūrėti pavyzdį.

Block 0, 0, 0, 0,1) įdėklas 0px:10px; box-shadow:0 15px rgba(0,0,0,0.6):

Block 0, 0, 0, 0,1) įdėklas ; kairėje: 10px;

CSS3 šešėlis pasuktam blokui. Žiūrėti pavyzdį.

.block ( padėtis: santykinis; plotis: 40 %; užpildas: 1 em; paraštė: 2 em 10 piks. 4 em; fonas: #fff; kraštinės spindulys: 4 piks.; langelio šešėlis: 0 1 piks. 4 piks. rgba(0, 0, 0, 0,3) , 0 0 40px rgba(0, 0, 0, 0.1) inset: box-shadow:none . -indeksas:-1; dešinėje: 0px :prieš, .blokas:po ( turinys:""; padėtis: absoliutus; z indeksas: -2; apačioje: 15 tšk.; kairėje: 10 pikselių; plotis: 50% ; aukštis: 20%; maksimalus plotis: 300 pikselių; dėžutė- šešėlis:0 15px rgba(0, 0, 0, 0.7 transform: rotate(-3deg);

Įrašymo tvarka yra iš esmės svarbi. Pirmoji reikšmė visada yra poslinkis išilgai X ašies, antroji - išilgai Y ašies.

Jei poslinkis išilgai vienos iš ašių nereikalingas, nustatykite jį į nulį:

Class(box-shadow: 0 8px;) – perkelkite šešėlį tik išilgai Y ašies

Rezultatas

Klasė (box-shadow: 8px 8px;) – poslinkis išilgai abiejų ašių

Rezultatas

Neigiama langelio šešėlių ašių reikšmė

Šešėlis judės priešinga kryptimi:

Klasė (dėžutės šešėlis: -8px 8px;) – perkelkite šešėlį su neigiama reikšme išilgai X ašies

Rezultatas

Šešėlių suliejimo spindulys

Trečiasis nuosavybės parametras dėžutė-šešėlis. Jei nenurodyta, reikšmė yra 0, o šešėlio dydis yra lygus elemento, kuriam jis taikomas, dydžiui.

Klasė (dėžutės šešėlis: 0 48 piks. 0;) – šešėlis dubliuoja elemento, kuriam jis taikomas, matmenis

Rezultatas

Kai reikšmė didesnė už nulį, kraštai praranda ryškumą, šešėlis tampa didesnis ir vizualiai šviesesnis. Suliejimas taikomas iš visų pusių:

Klasė (dėžutės šešėlis: 0 0 8 piks.;) – nėra poslinkio, tik suliejimas

Rezultatas

Klasė (dėžutės šešėlis: 0 8 piks. 8 piks.;) – Y ašies poslinkis ir suliejimas

Rezultatas

Neigiama reikšmė laikoma klaida ir šešėlis iš viso nebus rodomas.

Šešėlio tempimo spindulys

Ketvirtasis nuosavybės parametras dėžutė-šešėlis. Keičia šešėlio dydį elemento atžvilgiu. Tempiasi visomis kryptimis:

Klasė (dėžutės šešėlis: 0 0 0 8 piks.;) – nėra poslinkio ar suliejimo, tik tempimas

Rezultatas

Šiuo atveju šešėlis yra 16 pikselių didesnis už elementą pločio ir aukščio atžvilgiu: 8 pikseliai kairėje + 8 pikseliai dešinėje ir 8 pikseliai viršuje + 8 pikseliai apačioje.

Neigiama šešėlio tempimo vertė CSS

Šešėlis neišsitempia, o susiaurėja iš visų pusių nurodyta verte:

Class(box-shadow: 0 16px 0 -8px;) – sumažinti šešėlį su neigiama reikšme

Rezultatas

Šešėlių spalva

Pagal numatytuosius nustatymus šešėlio spalva dubliuoja šrifto spalvą: kaip ir anksčiau pateiktuose pavyzdžiuose.

Šešėlio spalva nurodoma bet kuriuo turimu CSS formatu:

• #ff0009
• rgb(255, 0, 9)
• hsl(358, 100%, 50%);

Suteikite elementui mėlyną šešėlį:

Klasė (dėžutės šešėlis: 0 8px #3a8fe7;)

Rezultatas

Vidinis šešėlis

Parametras intarpas bloko viduje rodomas šešėlis.

Skirtingai nuo aukščiau išvardytų parinkčių, nėra griežtos rašymo tvarkos. Abi parinktys duos tą patį rezultatą:

Dėžutė-šešėlis: 0 8px #3a8fe7 intarpas; langelis-šešėlis: inset 0 8px #3a8fe7;

Rezultatas

Antrasis variantas lengviau suprantamas skaitant kodą.

Keli šešėliai

Keli šešėliai nurodomi atskirti kableliais. Rodyti tvarką iš viršaus į apačią:

Klasė (dėžutės šešėlis: 0 8px #3a8fe7, 0 16px #3ae7af;)

Rezultatas

Jei pakeisite vietas, mėlynas šešėlis nebus matomas:

Klasė (dėžutės šešėlis: 0 16 piks. #3ae7af, 0 8px #3a8fe7; )

Rezultatas

Vidinis ir išorinis šešėlis nustatomi tuo pačiu metu:

Klasė (dėžutės šešėlis: 0 16 piks. #3ae7af, įdėtas 0 8px #3a8fe7; )

Rezultatas

Apvalus šešėlis

Jei elementui suteikiama savybė pasienio spindulys, šešėlis turės užapvalintus kampus.

Klasė (dėžutės šešėlis: 0 16 pikselių #3a8fe7; kraštinės spindulys: 8 pikseliai; )

Rezultatas

Nustatydami šešėlio tempimą padidiname jo apvalinimą. Pavyzdžiui, kraštinės spindulys yra 8 pikseliai, o šešėlio ruožas yra 4.

8+4=12px yra šešėlio apvalinimo spindulys.

Klasė (dėžutės šešėlis: 0 16 piks. 0 4 piks. #3a8fe7; kraštinės spindulys: 8 piks.; )

Rezultatas

Tas pats principas taikomas ir šešėlio mažinimui, kai reikšmė yra neigiama.

8+(-4)=4px – gauname dvigubai mažesnį šešėlių apvalinimą.

Jei šešėlio suspaudimas yra didesnis nei kraštinės spindulys, gausime šešėlį su stačiais kampais. Pavyzdžiui, suspaudimas yra 16 pikselių.

8+(-16)=(-8), bet filė negali turėti neigiamos reikšmės ir bus taikomas nulis.

Klasė (dėžutės šešėlis: 0 24 piks. 0 -16 piks. #3a8fe7; kraštinės spindulys: 8 piks.; )

Rezultatas

CSS nuosavybė dėžutė-šešėlis Palaikomos visose populiariose naršyklėse, išskyrus „Opera Mini“.

Atsiliepimai