Hjem
Anmeldelser
Indre skygge css3. Indre skygger i CSS. Skift ned et lite stykke og uskarp kraftig

Indre skygge css3. Indre skygger i CSS. Skift ned et lite stykke og uskarp kraftig

CSS box-shadow-egenskapen lar deg sette en skygge html-element. Det brukes ganske ofte av nettsteddesignere for på en eller annen måte å dekorere og fremheve rammer med tekst, bilder og gjøre innhold mer lesbart.

CSS box-shadow syntaks

... box-shadow : X Y R1 R2 farge ; ...
  • X - forskyvning langs X-aksen (horisontal)
  • Y - forskyvning langs Y-aksen (vertikal)
  • R1 - uskarphet (jo høyere verdi, jo jevnere er overgangen)
  • R2 - forlengelsesradius (hvis positiv, strekker den seg, negativ, komprimerer den)
  • farge - farge (kan spesifiseres i alle formater: #RGB, fargenavn)
  • innfelt - hvis denne verdien er til stede, vil skyggen være plassert inne i blokken (elementet)

Eksempel 1. HTML-ramme med boks-skygge uten offset

Nedenfor er den enkleste måten å bruke en skygge med CSS box-shadow-egenskapen på html-side når det flyter jevnt rundt hele rammen uten forskyvning.

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

Блок с тенью

Ikke gå mot fiendens bannere når de er i perfekt orden;

ikke angrip fiendens leir når den er uinntagelig;

dette er endringsledelse.

Sun Tzu, overs. Nikolai Konrad

Resultatet av dette eksemplet er vist i fig. 2. Skyggen følger avrundingen av blokkens hjørner.

Ris. 2. Utseende av skygge på bakgrunnsbildet

Når du legger til en "bred" skygge, vær oppmerksom på at den kan strekke seg utover de synlige grensene til nettleservinduet og dermed resultere i at en horisontal rullelinje vises.

Skygger kan også legges til pseudo-elementer, dette er noen ganger nødvendig for komplekse oppsett. I fig. Figur 3 viser en overskriftsblokk med en skygge lagt til. For å unngå linjer i krysset, må du bruke ::after pseudo-elementet og legge til en skygge til det.

Ris. 3. Blokk med skygge

Eksempel 2 viser opprettelsen av en slik blokk.

Eksempel 2. Blokk med skygge

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Blokk med skygge

Overskrift

Ris. 3. Blokk med skygge

Eksempel 2 viser opprettelsen av en slik blokk.

Blokker innhold

Et element kan ha mer enn én skygge, men flere på en gang er oppført med kommaer i verdien av boks-skygge-egenskapen. Eksempel 3 viser hvordan du legger til en dobbel skygge til alle bilder.

Bilde

Den første skyggen vises til venstre for bildet med en uskarphetradius på 20px, størrelsen redusert med den fjerde parameteren (-20px). Parametrene til den andre skyggen er angitt etter desimaltegn skyggen vises til høyre for bildet og er også redusert for symmetri.

I dag skal vi lære hvordan du lager CSS-skygger uten bilder. Etter å ha fullført denne opplæringen, trenger du ikke lenger en CSS-skyggegenerator.

Den største fordelen med skygger opprettet ved hjelp av CSS3 er den enkle implementeringen og reduksjonen i antall forespørsler til serveren (siden vi ikke lenger bruker bilder). For å lage en CSS-skygge trenger vi en div-tag og en CSS box-shadow-egenskap. Du trenger ikke noe ekstra markering fordi vi lager :after og :before pseudoelementer som vi plasserer bak hovedobjektet (en div med klassen blokkere).

Ta en titt på HTML-koden som vi skal lage en CSS3-skygge for:

Innhold

Neste kan du se ferdige eksempler og koden som trengs for å implementere dem. For å minimere teksten på siden vil vi utelate CSS-egenskaper med nettleserprefikser. Full kode Du kan se det ved å klikke på koblingen "Eksempel" som tilsvarer eksemplet.

.block (posisjon:relativ; bredde:40%; polstring:1em; margin:2em 10px 4em; bakgrunn:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0,1) innfelt; ;bredde:50%;høyde:0 15px rgba(0,0,0,0,7;


.block ( posisjon:relativ; bredde:40%; polstring:1em; margin:2em 10px 4em; bakgrunn:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) innfelt; border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px ). z-indeks:-2; venstre: 10px høyde: 0 8px rgba(0, 0, 0, 0,5; etter ( høyre:10px; venstre:auto; transform:skew(8deg) rotate(3deg); )

Ved å bruke en skygge kan du gi et blokkperspektiv. Se eksempel.


.block ( posisjon:relativ; bredde:40%; polstring:1em; margin:2em 10px 4em; bakgrunn:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0; 0 ; width: 50%; høyde:-80px 0 8px rgba(0, 0, 0,4) .block: after (display:none;

CSS-skygge for den hevede blokken. Se eksempel.


.block ( posisjon:relativ; bredde:40%; polstring:1em; margin:2em 10px 4em; bakgrunn:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) innfelt; boksskygge: 0 15px 10px -10px rgba(0, 0, 0, 0,5), 0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px . , 0, 0, 0.1) innfelt; ) .blokk:før, .blokk:etter ( innhold:""; posisjon:absolutt; z-indeks:-2; )

Eksempel CSS3-skygge for en vertikalt brettet blokk. Se eksempel.


.block ( posisjon:relativ; bredde:40%; polstring:1em; margin:2em 10px 4em; bakgrunn:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0; 0 ; venstre:0; høyre: 0 15px rgba(0,0,0,0.6);


.block ( posisjon:relativ; bredde:40%; polstring:1em; margin:2em 10px 4em; bakgrunn:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0; 0 ; venstre:0; box-shadow:0 0 15px rgba(0,0,0,0.6);

Eksempel CSS3-skygge for en horisontalt brettet blokk. Se eksempel.


.block ( posisjon:relativ; bredde:40%; polstring:1em; margin:2em 10px 4em; bakgrunn:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) innfelt; ) .blokk:før, .blokk:etter ( innhold:""; posisjon:absolutt; z-indeks:-2; ) .blokk:før (øverst:50%; nederst: 0px; venstre:10px; box-shadow:0 0 15px rgba(0,0,0,0.6);


.block ( posisjon:relativ; bredde:40%; polstring:1em; margin:2em 10px 4em; bakgrunn:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) innfelt; ) .block:before, .block:after ( innhold:""; posisjon:absolutt; z-indeks:-2; ) .block:before (top:0px; bottom:0px ; venstre:10px; boks-skygge:0 15px rgba(0.

CSS3 skygge for rotert blokk. Se eksempel.


.block (posisjon:relativ; bredde:40%; polstring:1em; margin:2em 10px 4em; bakgrunn:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) innfelt boks-skygge: ingen; transform:rotate(-3deg); -indeks:-1; bunn:0; høyre: 0px; 4px rgba(0, 0, 0,3), 0, 0, 0, 0 :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,7 transform:rotate(-3deg auto);

Rekkefølgen på opptak er grunnleggende viktig. Den første verdien er alltid forskyvningen langs X-aksen, den andre - langs Y-aksen.

Hvis en forskyvning ikke er nødvendig langs en av aksene, sett den til null:

Class(box-shadow: 0 8px;) – skift skyggen bare langs Y-aksen

Resultat

Klasse(boksskygge: 8px 8px;) – skift langs begge akser

Resultat

Negativ verdi for boks-skygge-akser

Skyggen vil bevege seg i motsatt retning:

Class(box-shadow: -8px 8px;) – skift skyggen med en negativ verdi langs X-aksen

Resultat

Skyggesløringsradius

Tredje egenskapsparameter boks-skygge. Hvis ikke spesifisert, er verdien 0 og skyggestørrelsen er lik størrelsen på elementet den er brukt på.

Class(box-shadow: 0 48px 0;) – skyggen dupliserer dimensjonene til elementet den er brukt på

Resultat

Når verdien er større enn null, mister kantene definisjon, skyggen blir større og visuelt lysere. Uskarphet påføres fra alle sider:

Class(box-shadow: 0 0 8px;) – ingen forskyvning, kun uskarphet

Resultat

Klasse(boksskygge: 0 8px 8px;) – Y-akseforskyvning og uskarphet

Resultat

En negativ verdi betraktes som en feil, og skyggen vil ikke vises i det hele tatt.

Skyggestrekningsradius

Fjerde egenskapsparameter boks-skygge. Endrer størrelsen på skyggen i forhold til elementet. Strekker seg i alle retninger:

Klasse(boksskygge: 0 0 0 8px;) – ingen forskyvning eller uskarphet, kun strekking

Resultat

I dette tilfellet er skyggen 16 piksler større enn elementet i bredde og høyde: 8px venstre + 8px høyre og 8px topp + 8px bunn.

Negativ skyggestrekkverdi i CSS

Skyggen strekker seg ikke, men smalner på alle sider med den angitte verdien:

Class(box-shadow: 0 16px 0 -8px;) – reduser skyggen med en negativ verdi

Resultat

Skygge farge

Som standard dupliserer skyggefargen skriftfargen: som i eksemplene ovenfor.

Skyggefargen er spesifisert i et hvilket som helst tilgjengelig CSS-format:

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

Gi elementet en blå skygge:

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

Resultat

Indre skygge

Parameter innfelt viser en skygge inne i blokken.

I motsetning til alternativene som er oppført ovenfor, er det ingen streng skriverekkefølge. Begge alternativene vil gi samme resultat:

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

Resultat

Det andre alternativet er lettere å forstå når du leser koden.

Flere skygger

Flere skygger er spesifisert atskilt med komma. Vis rekkefølge fra topp til bunn:

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

Resultat

Hvis du bytter plass, vil den blå skyggen ikke være synlig:

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

Resultat

Den indre og ytre skyggen settes samtidig:

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

Resultat

Avrundet skygge

Hvis et element er gitt egenskapen grense-radius, vil skyggen ha avrundede hjørner.

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

Resultat

Ved å stille inn skyggestrekningen øker vi også avrundingen. For eksempel er kantradius 8px og skyggestrekning er 4.

8+4=12px er avrundingsradiusen til skyggen.

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

Resultat

Det samme prinsippet gjelder for å krympe skyggen når verdien er negativ.

8+(-4)=4px – vi får en skyggeavrunding som er dobbelt så liten.

Hvis skyggekomprimeringen er større enn kantradius, vil vi få en skygge med rette vinkler. For eksempel er komprimering 16px.

8+(-16)=(-8), men filet kan ikke ha negativ verdi og null vil bli brukt.

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

Resultat

CSS-eiendom boks-skygge Støttes av alle populære nettlesere unntatt Opera Mini.

Anmeldelser

Du kan også like