domov
Ocene
Notranja senca css3. Notranje sence v CSS. Premaknite se malo navzdol in močno zameglite

Notranja senca css3. Notranje sence v CSS. Premaknite se malo navzdol in močno zameglite

Lastnost box-shadow CSS vam omogoča nastavitev sence html element. Oblikovalci spletnih strani ga pogosto uporabljajo, da nekako okrasijo in poudarijo okvirje z besedilom, slikami in naredijo vsebino bolj berljivo.

Sintaksa box-shadow CSS

... box-shadow : X Y R1 R2 barva ; ...
  • X - odmik vzdolž osi X (vodoravno)
  • Y - odmik vzdolž osi Y (navpično)
  • R1 - zamegljenost (višja kot je vrednost, bolj gladek je prehod)
  • R2 - polmer raztezka (če je pozitiven, se razteza, negativen, se stisne)
  • barva - barva (lahko se določi v kateri koli obliki: #RGB, ime barve)
  • vložek - če je ta vrednost prisotna, bo senca znotraj bloka (elementa)

Primer 1. Okvir HTML s box-shadow brez odmika

Spodaj je najpreprostejši način uporabe sence z vklopljeno lastnostjo box-shadow CSS html stran ko enakomerno teče po celotnem okvirju brez premikanja.

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

Блок с тенью

Ne nasprotujte sovražnikovim transparentom, ko so v popolnem redu;

ne napadajte sovražnikovega tabora, ko je nepremagljiv;

to je upravljanje sprememb.

Sun Tzu, prev. Nikolaj Konrad

Rezultat tega primera je prikazan na sl. 2. Senca sledi zaokrožitvi vogalov bloka.

riž. 2. Videz sence na sliki ozadja

Ko dodajate "široko" senco, se zavedajte, da lahko sega čez vidne meje okna brskalnika in tako povzroči pojav vodoravnega drsnega traku.

Za zapletene postavitve so včasih potrebne tudi sence. Na sl. Slika 3 prikazuje blok glave z dodano senco. Da se izognete črtam na stičišču, morate uporabiti psevdoelement ::after in mu dodati senco.

riž. 3. Blokirajte s senco

Primer 2 prikazuje izdelavo takega bloka.

Primer 2. Blok s senco

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Blok s senco

Naslov

riž. 3. Blokirajte s senco

Primer 2 prikazuje izdelavo takega bloka.

Blokiraj vsebino

Element ima lahko več kot eno senco, vendar več njihovih parametrov, ki so navedeni z vejicami v vrednosti lastnosti box-shadow. Primer 3 prikazuje, kako dodati dvojno senco vsem slikam.

Slika

Prva senca je prikazana na levi strani slike s polmerom zameglitve 20 slikovnih pik, njena velikost pa je zmanjšana za četrti parameter (-20 slikovnih pik). Parametri druge sence so navedeni za decimalno vejico; senca je prikazana desno od slike in je prav tako pomanjšana zaradi simetrije.

Danes se bomo naučili narediti sence CSS brez slik. Ko končate to vadnico, ne boste več potrebovali generatorja senc CSS.

Glavna prednost senc, ustvarjenih s CSS3, je enostavna implementacija in zmanjšanje števila zahtev do strežnika (ker ne uporabljamo več slik). Za izdelavo sence CSS potrebujemo oznako div in lastnost box-shadow CSS. Ne boste potrebovali dodatnih oznak, ker bomo ustvarili psevdo elemente :after in :before, ki jih bomo postavili za glavni objekt (div z razredom blok).

Oglejte si kodo HTML, za katero bomo ustvarili senco CSS3:

Vsebina

Naprej lahko vidite že pripravljeni primeri in kodo, potrebno za njihovo implementacijo. Da bi minimizirali besedilo na strani, ga bomo izpustili Lastnosti CSS s predponami brskalnika. Polna koda Ogledate si ga lahko s klikom na povezavo »Primer«, ki ustreza primeru.

.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:absolute; z-index:-2; bottom:15px; left:10px ; širina: 20 %; polje-senca: 15 pikslov rgba (0, 0, 0, 7); transformacija: vrtenje (-3 stopinje);


.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) border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px ) .block:before, .block:after ( content:""; position:absolute ; z-index:levo:55%;box-shadow:0 8px rgba(0,0,0,0.5);transformation:skew(-3deg) po (right:10px; left:auto; transform:skew(8deg) rotate(3deg); )

Z uporabo sence lahko daste perspektivo bloka. Glej primer.


.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) vstavek; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before (levo:80px; bottom:5px ; width:50%; max-width:-80px rgba(0, 0, 0, 0.4); .block:after (prikaz:none;)

Senca CSS za dvignjen blok. Glej primer.


.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) vložek; senca polja: 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) vstavi;

Primer sence CSS3 za navpično prepognjen blok. Glej primer.


.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) vložek; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; bottom:10px ; levo: 50%; box-shadow: 0 15px rgba(0,0,0,0.6); border-radius:10px;


.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) vložek; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; bottom:10px levo:0; polje-senca:0 15px rgba(0,0,0,0,6);

Primer sence CSS3 za vodoravno prepognjen blok. Glej primer.


.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) vložek;) .block:before, .block:after (vsebina:""; položaj:absolutno; z-index:-2; ) .block:before (zgoraj:50%; spodaj: 0px; left:10px; box-shadow: 0 15px rgba(0,0,0,0.6); border-radius:100px / 10px;


.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) vstavek; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:0px; bottom:0px ;levo:10px;box-shadow:0 15px rgba(0,0,0,0.6);

Senca CSS3 za zasukan blok. Glej primer.


.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 40px rgba(0, 0, 0, 0.1) box-shadow:none; transform:rotate(-3deg); :first-child:before ( content:""; position:absolute; z -index:-1; bottom:0px; box-shadow:0 1px rgba(0, 0, 0, 0.3), 0 40px rgba (0, 0, 0, 1) .block; :before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px; width:50% ; height:20%; max-width:300px; box- shadow:0 15px rgba(0, 0, 0, 0,7); transform:rotate(-3deg);auto transform:rotate(3deg);

Bistveno pomemben je vrstni red snemanja. Prva vrednost je vedno odmik vzdolž osi X, druga - vzdolž osi Y.

Če odmik vzdolž ene od osi ni potreben, ga nastavite na nič:

Class(box-shadow: 0 8px;) – premakni senco samo vzdolž osi Y

Rezultat

Razred (box-shadow: 8px 8px;) – premik po obeh oseh

Rezultat

Negativna vrednost za osi box-shadow

Senca se bo premikala v nasprotno smer:

Class(box-shadow: -8px 8px;) – premakni senco z negativno vrednostjo vzdolž osi X

Rezultat

Polmer zameglitve sence

Tretji parameter lastnosti box-shadow. Če ni podana, je vrednost 0 in velikost sence je enaka velikosti elementa, na katerega je uporabljena.

Razred (box-shadow: 0 48px 0;) – senca podvaja dimenzije elementa, na katerega je uporabljena

Rezultat

Ko je vrednost večja od nič, robovi izgubijo definicijo, senca postane večja in vizualno svetlejša. Zameglitev se uporablja z vseh strani:

Razred (box-shadow: 0 0 8px;) – brez odmika, samo zameglitev

Rezultat

Razred (box-shadow: 0 8px 8px;) – zamik in zameglitev osi Y

Rezultat

Negativna vrednost se šteje za napako in senca sploh ne bo prikazana.

Polmer raztezanja sence

Četrti parameter lastnosti box-shadow. Spremeni velikost sence glede na element. Razteza se v vse smeri:

Razred (box-shadow: 0 0 0 8px;) – brez premika ali zamegljenosti, samo raztezanje

Rezultat

V tem primeru je senca 16 slikovnih pik večja od elementa po širini in višini: 8px levo + 8px desno in 8px zgoraj + 8px spodaj.

Negativna vrednost raztezanja sence v CSS

Senca se ne razteza, ampak se zoži z vseh strani za določeno vrednost:

Razred (box-shadow: 0 16px 0 -8px;) – zmanjša senco z negativno vrednostjo

Rezultat

Barva sence

Privzeto barva sence podvaja barvo pisave: kot v zgornjih primerih.

Barva sence je določena v katerem koli razpoložljivem formatu CSS:

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

Elementu dajte modro senco:

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

Rezultat

Notranja senca

Parameter vložek prikaže senco znotraj bloka.

Za razliko od zgoraj navedenih možnosti ni strogega vrstnega reda pisanja. Obe možnosti bosta dali enak rezultat:

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

Rezultat

Druga možnost je lažje razumljiva pri branju kode.

Več senc

Več senc je podanih ločenih z vejicami. Vrstni red prikaza od zgoraj navzdol:

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

Rezultat

Če zamenjate mesta, modra senca ne bo vidna:

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

Rezultat

Notranja in zunanja senca se nastavita istočasno:

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

Rezultat

Zaobljena senca

Če je elementu podana lastnost mejni polmer, bo imela senca zaobljene vogale.

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

Rezultat

Z nastavitvijo raztezanja sence povečamo tudi njeno zaokroženost. Na primer, polmer obrobe je 8 slikovnih pik, razteg sence pa 4.

8+4=12px je polmer zaokrožitve sence.

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

Rezultat

Enako načelo velja za krčenje sence, ko je vrednost negativna.

8+(-4)=4px - dobimo dvakrat manjšo zaokroženost sence.

Če je stiskanje sence večje od polmera obrobe, bomo dobili senco s pravimi koti. Na primer, stiskanje je 16px.

8+(-16)=(-8), vendar filet ne more imeti negativne vrednosti in uporabljena bo ničla.

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

Rezultat

Lastnost CSS box-shadow Podpirajo ga vsi priljubljeni brskalniki razen Opera Mini.

Ocene

Morda vam bo tudi všeč