Du kan lägga till skugga till element och ändra den utseende med egenskapen box-shadow CSS. Denna stil låter dig realisera intressanta effekter, till exempel volym och tredimensionalitet av blocket. Fastigheten stöds av alla moderna webbläsare. Undantagen är IE8 och Opera Mini.

box-shadow-egenskap: syntax

Denna stil är skriven så här:

Box-skugga: infälld 4px 4px 8px 5px #333333;

Låt oss överväga i ordning vad varje parameter är ansvarig för (från vänster till höger):

• Nyckelord insättning: parameter som inte behöver anges; ritar en skugga inuti element.
• X offset: Anger i vilken grad skuggan är förskjuten horisontellt i förhållande till elementet. Ett positivt värde betyder förskjutning till höger, negativ - till vänster. Ett värde på 0 betyder att skuggan inte är förskjuten.
• Y Skift: Anger mängden vertikal förskjutning av skuggan. Ett positivt värde betyder en förskjutning nedåt, ett negativt värde betyder en förskjutning uppåt. Ett värde på 0 är en skugga utan förskjutning.
• Oskärpa radie: Detta är graden av skuggoskärpa. Ju högre värde, desto suddigare blir skuggan. Om parametern inte anges är standardvärdet 0. I det här fallet kommer skuggan att vara helt klar.
• Förlängning: valfri parameter ansvarig för att sträcka skuggan längs båda axlarna; ju högre värde, desto större sträckning. Tillägget fungerar bara om föregående parameter finns. Standardvärdet är 0.
• Skuggfärg: allt är klart med den här parametern - den ställer in färgen på elementets skugga. Standardfärgen är svart.

Notera. Android webbläsare och äldre iPhone-versioner Safari kräver prefixet -webkit- för att fungera korrekt CSS-egenskaper box-skugga.

Den här egenskapen kan ta flera grupper av värden (gör flera skuggor samtidigt). För att göra detta måste du lista dessa grupper av parametrar separerade med kommatecken. Till exempel:

Box-skugga: 15px 15px 20px #8b0163, infälld 15px 15px 20px #630046;

Box-skugga exempel

För att hjälpa dig att bättre förstå kraften och skönheten i CSS box-shadow-egenskapen visar vi dig några exempel som du säkert kan omsätta i praktiken. Denna fastighet kan i hög grad förvandla ett vanligt kvarter!

Ljus skugga

Box-shadow: 0 2px 4px rgba(0, 0, 0, .25);

Papperseffekt

Box-skugga: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), infälld 0 0 40px rgba(0, 0, 0, .1);

Flera lager

Box-shadow: 6px 6px #ccc, 12px 12px #a3a3a3;

Trippel ram

Box-skugga: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0,6), 0 0 0 21px rgba(118, 46, 177,);

Hörn

Box-skugga: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Som du kan se lämnar egenskapen box-shadow mycket utrymme för fantasi. Du kan förvandla blocken som du vill - huvudsaken är att ha en känsla för proportioner! 😉

I nästa kapitel kommer du att utforska egenskaperna för bredd och höjd, som bestämmer storleken på element.

Ordningen för inspelningen är fundamentalt viktig. Det första värdet är alltid offset längs X-axeln, det andra - längs Y-axeln.

Om en offset inte behövs längs en av axlarna, ställ in den på noll:

Class(box-shadow: 0 8px;) – flytta skuggan endast längs Y-axeln

Resultat

Class(box-shadow: 8px 8px;) – skift längs båda axlarna

Resultat

Negativt värde för box-skuggyxor

Skuggan kommer att röra sig i motsatt riktning:

Class(box-shadow: -8px 8px;) – flytta skuggan med ett negativt värde längs X-axeln

Resultat

Skuggoskärpa radie

Tredje egenskapsparametern box-skugga. Om det inte anges är värdet 0 och skuggstorleken är lika med storleken på elementet det appliceras på.

Class(box-shadow: 0 48px 0;) – skuggan duplicerar måtten på elementet som den appliceras på

Resultat

När värdet är större än noll tappar kanterna definitionen, skuggan blir större och visuellt ljusare. Oskärpa appliceras från alla sidor:

Class(box-shadow: 0 0 8px;) – ingen offset, bara oskärpa

Resultat

Klass(box-skugga: 0 8px 8px;) – Y-axelförskjutning och oskärpa

Resultat

Ett negativt värde anses vara ett fel och skuggan kommer inte att visas alls.

Skuggsträckningsradie

Fjärde egenskapsparametern box-skugga. Ändrar storleken på skuggan i förhållande till elementet. Sträcker sig åt alla håll:

Class(box-shadow: 0 0 0 8px;) – ingen förskjutning eller oskärpa, bara sträckning

Resultat

I det här fallet är skuggan 16 pixlar större än elementet i bredd och höjd: 8px vänster + 8px höger och 8px topp + 8px botten.

Negativt skuggsträckvärde i CSS

Skuggan sträcker sig inte, utan smalnar av på alla sidor med det angivna värdet:

Class(box-shadow: 0 16px 0 -8px;) – minska skuggan med ett negativt värde

Resultat

Skuggfärg

Som standard duplicerar skuggfärgen teckensnittsfärgen: som i exemplen ovan.

Skuggfärgen anges i alla tillgängliga CSS-format:

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

Ge elementet en blå skugga:

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

Resultat

Inre skugga

Parameter infälld visar en skugga inuti blocket.

Till skillnad från alternativen som anges ovan finns det ingen strikt skrivordning. Båda alternativen ger samma resultat:

Box-shadow: 0 8px #3a8fe7 infälld; box-shadow: infälld 0 8px #3a8fe7;

Resultat

Det andra alternativet är lättare att förstå när man läser koden.

Flera skuggor

Flera skuggor anges avgränsade med kommatecken. Visa ordning uppifrån och ned:

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

Resultat

Om du byter plats kommer den blå skuggan inte att synas:

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

Resultat

Den inre och yttre skuggan ställs in samtidigt:

Klass( box-shadow: 0 16px #3ae7af, infälld 0 8px #3a8fe7; )

Resultat

Rundad skugga

Om ett element ges egenskapen gräns-radie, kommer skuggan att ha rundade hörn.

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

Resultat

Genom att ställa in skuggans sträckning ökar vi dess avrundning. Till exempel är gränsradien 8 px och skuggsträckningen är 4.

8+4=12px är skuggans avrundningsradie.

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

Resultat

Samma princip gäller för att krympa skuggan när värdet är negativt.

8+(-4)=4px – vi får en skuggavrundning som är dubbelt så liten.

Om skuggkomprimeringen är större än kant-radie får vi en skugga med räta vinklar. Till exempel är komprimeringen 16px.

8+(-16)=(-8), men filé kan inte ha ett negativt värde och noll kommer att tillämpas.

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

Resultat

CSS-egenskap box-skugga Stöds av alla populära webbläsare utom Opera Mini.

Vanliga skuggor är lätta att implementera med box-shadow eller text-shadow. Men vad händer om du behöver göra inre skuggor? Den här artikeln beskriver hur man gör dessa skuggor med bara några rader kod.

Syntax

Låt oss först titta på de två huvudsakliga sätten att implementera skuggor i CSS.

box-skugga

Design box-skugga innehåller flera olika betydelser:

Horisontell offset Och vertikal offset- horisontell respektive vertikal förskjutning. Dessa värden indikerar i vilken riktning objektet kommer att kasta sin skugga:

Oskärpa radie Och spridningsradie lite mer komplicerat. Vad är skillnaden? Låt oss titta på ett exempel med två element, där värdena oskärpa radie skilja sig:

Kanten på skuggan är helt enkelt suddig. Med olika värderingar spridningsradie vi ser följande:

I det här fallet ser vi att skuggan är spridd över ett stort område. Om du inte anger ett värde oskärpa radie Och spridningsradie, då blir de lika med 0.

text-skugga

Syntaxen är väldigt lik box-skugga:

Betydelserna är liknande, men inte spridningsskugga. Användningsexempel:

Infälld i box-skugga

För att "vända" skuggan inuti objektet måste du lägga till infälld i CSS:

När du väl förstår den grundläggande box-shadow-syntaxen är det väldigt lätt att förstå hur man implementerar inre skuggor. Värdena är fortfarande desamma, du kan lägga till färg (RGB i hex):

Färgen är i RGB-format, alfavärdet är ansvarigt för skuggans genomskinlighet:

Bilder med skuggor

Att lägga till en inre skugga till en bild är lite svårare än att lägga till en vanlig skugga div. Till att börja med, här är den vanliga bildkoden:

Det är logiskt att anta att du kan lägga till en skugga så här:

Img ( box-shadow: infälld 0px 0px 10px rgba(0,0,0,0.5); )

Men skuggan är inte synlig:

Det finns flera sätt att lösa detta problem, som var och en har sina för- och nackdelar. Låt oss titta på två av dem. Det första är att slå in bilden i en vanlig div:

Div ( höjd: 200px; bredd: 400px; box-shadow: infälld 0px 0px 10px rgba(0,0,0,0.9); ) img (höjd: 200px; bredd: 400px; position: relativ; z-index: -2 ;)

Allt fungerar, men du måste lägga till lite extra HTML-uppmärkning och CSS. Det andra sättet är att ställa in bilden som bakgrund önskat block:

Div (höjd: 200px; bredd: 400px; bakgrund: url(http://lorempixum.com/400/200/transport/2); box-shadow: infälld 0px 0px 10px rgba(0,0,0,0.9); )

Detta är vad som kan hända när du använder inre skuggor:

Infoga till text-skugga

För att implementera en inre textskugga, lägg helt enkelt till koden infälld fungerar inte:

För att lösa, applicera först på rubriken h1 Installera mörk bakgrund och en ljus skugga:

H1 (bakgrundsfärg: #565656; färg: transparent; text-skugga: 0px 2px 3px rgba(255,255,255,0.5); )

Så här händer:

Lägga till en hemlig ingrediens bakgrundsklipp som skär av allt som sträcker sig utanför texten (till en mörk bakgrund):

H1 (bakgrundsfärg: #565656; färg: transparent; text-skugga: 0px 2px 3px rgba(255,255,255,0.5); -webkit-bakgrundsklipp: text; -moz-bakgrundsklipp: text; bakgrundsklipp: text ;)

Det blev nästan precis vad vi behövde. Nu mörkar vi bara texten lite (alfa), och resultatet är:

Idag kommer vi att lära oss hur man gör CSS-skuggor utan bilder. När du har slutfört den här handledningen behöver du inte längre en CSS-skugggenerator.

Den största fördelen med skuggor skapade med CSS3 är den enkla implementeringen och minskningen av antalet förfrågningar till servern (eftersom vi inte längre använder bilder). För att göra en CSS-skugga behöver vi en div-tagg och en CSS box-shadow-egenskap. Du behöver ingen ytterligare markering eftersom vi skapar :after och :before pseudoelement som vi placerar bakom huvudobjektet (en div med klassen blockera).

Ta en titt på HTML-koden som vi kommer att skapa en CSS3-skugga för:

Nästa kan du se färdiga exempel och koden som behövs för att implementera dem. För att minimera texten på sidan kommer vi att utelämna CSS-egenskaper med webbläsarprefix. Den fullständiga koden kan ses genom att klicka på länken "Exempel" som motsvarar exemplet.

.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) insatt; ) .block:before, .block:after ( innehåll:""; position:absolut; z-index:-2; botten:15px; vänster:10px ; bredd:50%; höjd:20%; maxbredd:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); ) .block:after (höger :10px; left:auto; transform:rotate(3deg); )

.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) infälld; border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px; ) .block:before, .block:after ( content:""; position:absolute ; z-index:-2; botten:12px; vänster:10px; bredd:50%; höjd:55%; max-bredd:200px; box-shadow:0 8px 12px rgba(0, 0, 0, 0,5); transform:skew(-8deg) rotate(-3deg); ) .block:after ( höger:10px; left:auto; transform:skew(8deg) rotate(3deg); )

Med hjälp av en skugga kan du ge ett blockperspektiv. Se exempel.

.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) insatt; ) .block:before, .block:after ( innehåll:""; position:absolute; z-index:-2; ) .block:before (vänster:80px; botten:5px ; bredd:50%; höjd:35%; maxbredd:200px; box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); transform:skew(50deg); transform-origin:0 100% ; ) .block:after ( display:none; )

CSS-skugga vid det upphöjda blocket. Se exempel.

.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) infälld; box-skugga: 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) infälld; ) .block:before, .block:after ( innehåll:""; position:absolut; z-index:-2; )

Exempel CSS3-skugga för ett vertikalt vikt block. Se exempel.

.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) insatt; ) .block:before, .block:after ( innehåll:""; position:absolute; z-index:-2; ) .block:before ( top:10px; bottom:10px ; vänster:0; höger:50%; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:10px / 100px; )

.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) insatt; ) .block:before, .block:after ( innehåll:""; position:absolute; z-index:-2; ) .block:before ( top:10px; bottom:10px ; vänster:0; höger:0; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:10px / 100px; )

Exempel CSS3-skugga för ett horisontellt vikt block. Se exempel.

.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) infälld; ) .block:before, .block:after ( innehåll:""; position:absolut; z-index:-2; ) .block:before (top:50%; bottom: 0px; vänster:10px; höger:10px; box-shadow:0 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) insatt; ) .block:before, .block:after ( innehåll:""; position:absolute; z-index:-2; ) .block:before ( top:0px; bottom:0px ; vänster:10px; höger:10px; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:100px / 10px; )

CSS3-skugga för roterat block. Se exempel.

.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) insatt; box-shadow:ingen; transform:rotate(-3deg); ) .block > :first-child:before (innehåll:""; position:absolut; z-index:-1; top:0px; bottom:0; left:0; right:0px; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0,1) infälld; ) .block:before, .block:after ( innehåll:""; position:absolut; z-index:-2; bottom:15px; left:10px; width:50% ; höjd:20%; max-bredd:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); ) .block:after (höger:10px; vänster: auto; transform:rotate(3deg); )

Block shadow är en utmärkt tredimensionell effekt som ger webbplatsblock realism och volym. När jag började studera (för ca 5-6 år sedan) hade jag ingen aning om existensen, och när jag skapade en sida var jag tvungen att göra skuggan av blocken till en bild. Det var väldigt obekvämt, och det fungerade inte alltid som jag ville. Tack vare kraften i CSS, som har gjort webbdesigners arbete enklare. Idag ska jag visa dig hur du skapar en skugga för block i CSS.

För att lägga till en skugga i CSS, använd egenskapen box-skugga .

1. flytta skuggan horisontellt (upp till 100px till höger, upp till -100px till vänster);
2. vertikal förskjutning (upp till 100px ner, upp till -100px upp);
3. skuggoskärpa (0 - klar skugga, 100 - mycket suddig skugga);
4. sträcka ut skuggan (upp till 100px - stretching, upp till -100px - kompression);
5. skugga färg;
6. infälld - skuggan är inuti elementet, utan infällning kommer skuggan att vara utåt.

Resultat :

Bord med skuggor:

koda	Exempel:
box-shadow: 0px 13px 17px -6px #000000;
box-shadow: 10px -10px 0px -6px #000000;
box-shadow: 10px 13px 0px -6px #000000;
box-shadow: 1px 1px 32px -6px #000000;
box-shadow: -1px 23px 41px -25px #000000;
box-shadow: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 infälld;
box-shadow: 7px 10px 23px -8px #92a9e7;

Med hjälp av en skugga kan du skapa ett tredimensionellt block:

Koda	Exempel
box-shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(192,36,194,36p, 31,36p, 36px rgb(192,36,16p, 36px rgb(192,36,bx, 36px), 3 px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 6bx 5p, 8px 61p, 5px 61p, 5px 6b b(215 190, 30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,188,18p 18px 18px 18px 18px 18px 18px 18px 18px x 8px rgb(212,187,27), 9px 9px rgb(184,159,0);
box-shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(192,31,36p, 91,31x,b, 91, 36, 167, 7, ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,192,81,831, 831, 831, 831, ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,181,181,181,181,181,161,1b), ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
box-shadow: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,36x, -2px -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px,9b(1x) 31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,189,29), 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px 4bx,5b1,0p );
box-shadow: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(192,167,b), (192,167,b) ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,191,8px rgb(216,191,8b ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,161,2g ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);

Blok1 ( bredd: 70 %; maxbredd: 550 px; marginal: 10 px auto; utfyllnad: 1em; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -230px rgba , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) insatt; )

Resultat :

Blok1 (bredd: 30%; maxbredd: 550px; marginal: 2em auto; utfyllnad: 1em; bakgrund: #DADADA; box-shadow: 6px 6px #BBBBBB, 12px 12px #919191;)

Resultat :

Blok1 ( bredd: 30 %; marginal: 0 auto; utfyllnad: 2em; box-shadow: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, #0 -210px FFFF00, -20px 0 0 -10px #FF3399; )

Resultat :

Med hjälp av en skugga kan du göra en vacker ram.

Vacker ram med egenskaperlåda- skugga

Blok1 (bredd: 20%; maxbredd: 250px; marginal: 0 auto; utfyllnad: 1em; kant: 2px streckad #999; box-shadow: 0 0 0 1px #999, infälld 0 0 0 1px #999; )
Resultat
:

Blok1 (bredd: 30%; maxbredd: 250px; marginal: 2em auto; utfyllnad: 4em; bakgrund: #dcc005; box-shadow: 0 0 4em 4em #fff infälld;)
Resultat
:

Blok1 ( max-bredd: 250px; marginal: 0 auto; utfyllnad: 1em; kantradius: 10px; bakgrund: rgb(100,100,100) radiell-gradient(cirkel vid 0 0, rgba(255,255,255,.525,525,525,525,525,525,525), .35)); box-shadow: infälld rgba(0,0,0,.5) -3px -3px 8px, infälld rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px; )
Resultat
:


 
 
 
 
 
 
 

 

 
hemsida
 

 

Resultat
:

Det här är de vackra effekter kan uppnås med hjälp av skuggor i CSS.  Kom på något nytt och originellt, allt är i dina händer.  Du har kunskapen och förmågan. 
Och en av dessa dagar kommer jag att publicera en artikel om hur du kan skapa utan att använda Photoshop.  Så var i centrum och prenumerera på mina blogguppdateringar.  Missa inte ett ämne som intresserar dig.  Nåväl, det är det, lycka till!!!