Svojstvo CSS box-shadow vam omogućava da postavite sjenu html element. Često ga koriste dizajneri web stranica kako bi nekako ukrasili i istaknuli okvire tekstom, slikama i učinili sadržaj čitljivijim.

CSS sintaksa box-shadow

... box-shadow : X Y R1 R2 boja ; ...

• X - pomak duž X ose (horizontalno)
• Y - pomak duž Y ose (vertikalno)
• R1 - zamućenje (što je veća vrijednost, to je glatkiji prijelaz)
• R2 - radijus proširenja (ako je pozitivan, rasteže se, negativan, sabija)
• boja - boja (može se navesti u bilo kojem formatu: #RGB, naziv boje)
• umetnuti - ako je ova vrijednost prisutna, sjena će se nalaziti unutar bloka (elementa)

Primjer 1. HTML okvir sa sjenom okvira bez pomaka

Ispod je najjednostavniji način za korištenje sjene sa uključenim svojstvom CSS box-shadow html stranica kada ravnomjerno teče oko cijelog okvira bez pomaka.

Пример №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

ovo je upravljanje promjenama.

Sun Tzu, trans. Nikolaj Konrad

Rezultat ovog primjera prikazan je na sl. 2. Sjena prati zaokruživanje uglova bloka.

Rice. 2. Pojava sjene na pozadinskoj slici

Kada dodajete "široku" sjenku, imajte na umu da se ona može proširiti izvan vidljivih granica prozora pretraživača i tako rezultirati pojavom horizontalne trake za pomicanje.

Sjene se također mogu dodati pseudoelementima; to je ponekad potrebno za složene rasporede. Na sl. Slika 3 prikazuje blok zaglavlja sa dodanom sjenom. Da biste izbjegli bilo kakve linije na spoju, morate koristiti pseudoelement ::after i dodati mu sjenu.

Rice. 3. Blok sa sjenom

Primjer 2 prikazuje kreiranje takvog bloka.

Naslov

Rice. 3. Blok sa sjenom

Primjer 2 prikazuje kreiranje takvog bloka.

Element može imati više od jedne sjene, ali nekoliko njihovih parametara je navedeno odvojeno zarezima u vrijednosti svojstva box-shadow. Primjer 3 pokazuje kako dodati dvostruku sjenu svim slikama.

Slika

Prva senka se prikazuje levo od slike sa radijusom zamućenja od 20px, čija je veličina smanjena za četvrti parametar (-20px). Parametri druge sjene su naznačeni nakon decimalne točke sjena se prikazuje desno od slike i također je smanjena radi simetrije.

Danas ćemo naučiti kako napraviti CSS sjene bez slika. Nakon što završite ovaj vodič, više vam neće trebati CSS generator senki.

Glavna prednost senki kreiranih pomoću CSS3 je jednostavnost implementacije i smanjenje broja zahteva prema serveru (pošto više ne koristimo slike). Da bismo napravili CSS sjenu, potrebna nam je div oznaka i CSS box-shadow svojstvo. Neće vam trebati nikakve dodatne oznake jer ćemo kreirati :after i :before pseudo elemente koje ćemo postaviti iza glavnog objekta (div sa klasom blok).

Pogledajte HTML kod za koji ćemo kreirati CSS3 sjenu:

Dalje možete vidjeti gotovi primjeri i kod potreban za njihovu implementaciju. Kako bismo minimizirali tekst na stranici, izostavićemo CSS svojstva sa prefiksima pretraživača. Pun kod Možete ga vidjeti klikom na vezu “Primjer” koja odgovara primjeru.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset ) .block:before, .block:after ( content:""; position:apsolute; z-index:-2; bottom:15px; left:10px; ; širina: 20 % : 15 px rgba (0, 0, 0, 0,7);

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetnuti border:1px solid #efefef:0 0 120px 120px / 0 0 6px ) .block:before, .block:after ( content:""; position:apsolute ; z-indeks:-2; poslije (desno:10px; lijevo:auto; transform:koso(8deg) rotirati(3deg); )

Koristeći senku možete dati blok perspektivu. Vidi primjer.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetnuti ) .block:prije, .block:after (sadržaj:""; pozicija:apsolutna; z-index:-2; ) .block:prije (lijevo:80px; dno:5px; širina:50% max-width:-80px rgba(0,0,0,0,4) .block:after (display:none);

CSS senka za podignuti blok. Vidi primjer.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetnuti box-shadow: 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, 0.1) umetnuti ) .block:prije, .block:after (sadržaj:""; pozicija:apsolutna; z-indeks:-2; )

Primjer CSS3 sjene za okomito presavijeni blok. Vidi primjer.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetnuti ) .block:prije, .block:poslije (sadržaj:""; pozicija:apsolutna; z-index:-2; ) .block:prije (vrh:10px; dolje:10px; lijevo: 50% box-shadow: 0 15px rgba(0,0,0,0,6);

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetnuti ) .block:prije, .block:poslije (sadržaj:""; pozicija:apsolutna; z-index:-2; ) .block:prije (vrh:10px; dolje:10px; lijevo: 0 0,0,0,0,6;

Primjer CSS3 sjene za horizontalno presavijeni blok. Vidi primjer.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetnuti ) .block:prije, .block:poslije (sadržaj:""; pozicija:apsolutna; z-indeks:-2; ) .block:prije (gore:50%; dolje::) 0px:10px-sjena:0 15px rgba(0,0,0,0,6);

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetnuti ) .block:prije, .block:poslije (sadržaj:""; pozicija:apsolutna; z-index:-2; ) .block:prije (vrh:0px; dno:0px); ; lijevo: 10 px;

CSS3 senka za rotirani blok. Vidi primjer.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) umetnuti box-shadow:none (-3deg .block) (sadržaj:""; -index:-1; desno:0px-sjena:0 1px 4px rgba(0,0,0,0,3), 0 40px rgba (0, 0, 0,1) .block; :before, .block:after ( content:""; position:apsolute; z-index:-2; bottom:15px; left:10px; width:50% ; height:20%; max-width:300px; box- shadow:0 15px 10px rgba(0, 0, 0, 0.7);

Redoslijed snimanja je suštinski važan. Prva vrijednost je uvijek pomak duž X ose, druga - duž Y ose.

Ako pomak nije potreban duž jedne od osi, postavite ga na nulu:

Class(box-shadow: 0 8px;) – pomaknite senku samo duž Y ose

Rezultat

Class(box-shadow: 8px 8px;) – pomak duž obje ose

Rezultat

Negativna vrijednost za ose senke okvira

Senka će se kretati u suprotnom smeru:

Class(box-shadow: -8px 8px;) – pomaknite senku sa negativnom vrijednošću duž X ose

Rezultat

Radijus zamućenja senke

Treći parametar svojstva box-shadow. Ako nije navedeno, vrijednost je 0, a veličina sjene jednaka je veličini elementa na koji se primjenjuje.

Class(box-shadow: 0 48px 0;) – sjena duplira dimenzije elementa na koji je primijenjena

Rezultat

Kada je vrijednost veća od nule, rubovi gube definiciju, sjena postaje veća i vizualno svjetlija. Zamućenje se primjenjuje sa svih strana:

Class(box-shadow: 0 0 8px;) – bez pomaka, samo zamućenje

Rezultat

Class(box-shadow: 0 8px 8px;) – pomak Y-ose i zamućenje

Rezultat

Negativna vrijednost se smatra greškom i sjena se uopće neće prikazati.

Radijus rastezanja sjene

Četvrti parametar svojstva box-shadow. Mijenja veličinu sjene u odnosu na element. Proteže se u svim smjerovima:

Class(box-shadow: 0 0 0 8px;) – bez pomaka ili zamućenja, samo rastezanje

Rezultat

U ovom slučaju, sjena je 16 piksela veća od elementa po širini i visini: 8px lijevo + 8px desno i 8px gore + 8px dolje.

Negativna vrijednost rastezanja sjene u CSS-u

Sjena se ne rasteže, već se sužava sa svih strana za određenu vrijednost:

Class(box-shadow: 0 16px 0 -8px;) – smanjite sjenu negativnom vrijednošću

Rezultat

Boja senke

Podrazumevano, boja senke duplira boju fonta: kao u gornjim primerima.

Boja senke je navedena u bilo kom dostupnom CSS formatu:

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

Dajte elementu plavu sjenu:

Class(box-shadow: 0 8px #3a8fe7;)

Rezultat

Unutrašnja senka

Parametar umetnuti prikazuje senku unutar bloka.

Za razliku od gore navedenih opcija, ne postoji strogi redoslijed pisanja. Obje opcije će dati isti rezultat:

Box-shadow: 0 8px #3a8fe7 inset; box-shadow: umetnuti 0 8px #3a8fe7;

Rezultat

Druga opcija je lakša za razumevanje kada čitate kod.

Nekoliko senki

Više senki je navedeno odvojeno zarezima. Prikaži redoslijed od vrha do dna:

Class( box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; )

Rezultat

Ako promijenite mjesta, plava sjena neće biti vidljiva:

Class( box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; )

Rezultat

Unutrašnja i vanjska senka se postavljaju istovremeno:

Class( box-shadow: 0 16px #3ae7af, umetnuti 0 8px #3a8fe7; )

Rezultat

Zaobljena senka

Ako je elementu dato svojstvo granica-radijus, senka će imati zaobljene uglove.

Class( box-shadow: 0 16px #3a8fe7; border-radius: 8px; )

Rezultat

Postavljanjem rastezanja sjene povećavamo i njegovo zaokruživanje. Na primjer, radijus granice je 8 piksela, a rastezanje sjene je 4.

8+4=12px je radijus zaokruživanja sjene.

Class( box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; )

Rezultat

Isti princip vrijedi za smanjenje sjene kada je vrijednost negativna.

8+(-4)=4px - dobijamo duplo manje zaokruživanje senke.

Ako je kompresija senke veća od radijusa granice, dobićemo senku sa pravim uglovima. Na primjer, kompresija je 16px.

8+(-16)=(-8), ali file ne može imati negativnu vrijednost i nula će biti primijenjena.

Class( box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; )

Rezultat

CSS svojstvo box-shadow Podržavaju svi popularni pretraživači osim Opera Mini.

Recenzije