Css lapos árnyék. Belső árnyékok a CSS-ben. Váltson lejjebb egy kis távolságot, és erősen homályosítsa el

Sziasztok kedves olvasók. Ma veled fogunk csinálni szép árnyék tömböknek, amikor CSS segítség . Azt hiszem, ez nagyon hasznos lesz számodra, különösen, ha sablonokat készítesz. Az árnyékokkal ellátott blokkok pedig nagyon vonzóak és modernek.

Böngésző támogatás

Alapvetően minden modern böngésző támogatja az árnyékhatásokat:

Internet Explorer 9.0 és újabb;
Firefox 3.5 és újabb;
Chrome 1 és újabb;
Safari 3 és újabb;
Opera 10.5 és újabb.

Szeretnék még egy fontos dolgot megemlíteni: egyes böngészőknél bizonyos előtagokat fogunk használni. Firefoxhoz használt -moz-, Chrome és Safari esetén az előtagot kell használni -webkit.

Nos, most térjünk át a legérdekesebb részre. Nézzük meg az összes árnyékot külön, 8 effekt lesz.

Árnyékhatás 1

BAN BEN ebben a példában A blokk árnyéka lent van.

HTML

1. hatás

CSS

text-align:center; pozíció:relatív; felső:80px; ) .box (szélesség:70%; magasság:200px; háttér:#FFF; margó:40px automatikus; ) /*========= =============== ========== * 1. hatás * ==================== ================ ===========*/ .effect1( -webkit-box-shadow: 0 10px 6px -6px #777; -moz- box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777;)

Árnyékhatás 2

Ebben a példában a blokk árnyéka balra és jobbra megy, de középen nincs. Nagyon érdekes hatásnak bizonyul.

HTML

2. hatás

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box (szélesség:70%; magasság:200px; háttér:#FFF; margó:40px auto; ) /*====== =================================================== ========= * 2. hatás * == =================================== ========================*/ .effect2 ( pozíció: relatív; ) .effect2:before, .effect2:after ( z-index: - 1. pozíció: abszolút #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o -transform: forgatás (-3 fok); -ms-transform: forgatás (-3 fok); transzformáció: forgatás (-3 fok); ) . effect2:after ( -webkit-transform: forgatás (3 fok); -moz-transform: forgatás (3 fok); -o-transzformáció: forgatás (3 fok); -ms-transzformáció: forgatás (3 fok); transzformáció: elforgatás (3 fok); jobbra: 10 képpont; balra: automatikus; )

Árnyékhatás 3

Itt a blokk árnyéka csak a bal oldalon van.

HTML

3. hatás

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box (szélesség:70%; magasság:200px; háttér:#FFF; margó:40px auto; ) /*====== =================================================== ========= * 3. hatás * == =================================== =========================*/ .effect3 ( pozíció: relatív; ) .effect3:before ( z-index: -1; pozíció: abszolút ; tartalom: ""; alul: 15px; bal: 10px; szélesség: 50%; felül: 80%; max-width: 300px; háttér: #777; -webkit-box-shadow: 0 15px 10px #777; -moz -box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg ); -moz-transform: rotate(-3deg); -o-transform: rotate( -3 fok); -ms-transzformáció: forgatás (-3 fok); transzformáció: forgatás (-3 fok); )

Árnyékhatás 4

Árnyék a jobb oldalon.

HTML

4. hatás

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box (szélesség:70%; magasság:200px; háttér:#FFF; margó:40px auto; ) /*====== =================================================== ========= * 4. hatás * == =================================== =========================*/ .effect4 ( pozíció: relatív; ) .effect4:after ( z-index: -1; pozíció: abszolút; tartalom: ""; alsó: 15 képpont; jobb: 10 képpont; bal: automatikus; szélesség: 50%; felül: 80%; maximális szélesség: 300 képpont; háttér: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform : forgatás (3 fok); -ms-transzformáció: forgatás (3 fok); transzformáció: forgatás (3 fok); )

Árnyékhatás 5

Ebben az esetben mindkét oldalon az árnyék erősebben lefelé mozdult el.

HTML

5. hatás

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box (szélesség:70%; magasság:200px; háttér:#FFF; margó:40px auto; ) /*====== =================================================== ========= * 5. hatás * == =================================== ========================*/ .effect5 ( pozíció: relatív; ) .effect5:before, .effect5:after ( z-index: - 1. pozíció: abszolút #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o -transform: forgatás (-8 fok); -ms-transform: forgatás (-8 fok); transzformáció: forgatás (-8 fok); ) . Effect5:after ( -webkit-transzform: forgatás (8 fok); -moz-transform: forgatás (8 fok); -o-transzformáció: forgatás (8 fok); -ms-transzformáció: forgatás (8 fok); transzformáció: elforgatás (8 fok); jobbra: 10 képpont; balra: automatikus; )

Árnyékhatás 6

Itt látható az ívelt árnyékok hatása a blokk alján.

HTML

6. hatás

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box (szélesség:70%; magasság:200px; háttér:#FFF; margó:40px auto; ) /*====== =================================================== ========= * 6. hatás * == =================================== ========================*/ .effect6 ( pozíció:relatív; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) beillesztés; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) beillesztés; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; ) .effect6:before, .effect6:after ( tartalom:""; pozíció:abszolút ,0,0,0,8); box-shadow:0 0 20px rgba(0,0,0,0,8); felső:50%; lent:0; bal:10px; jobb:10px; -moz-border-radius: 100px / 10px; border-radius:100px / 10px; ) .effect6:after (jobbra:10px; balra:auto; -webkit-transform :skew(8deg) rotate(3deg); -moz-transform:skew(8deg) forgatás (3 fok); -ms-transzformáció: ferde (8 fok) forgatás (3 fok); -o-transzformáció:ferdítés(8deg) forgatás(3de); transzformáció:ferdítés(8deg) forgatás(3de); )

Árnyékhatás 7

Ugyanez a hatás csak egy árnyék a blokk alatt és fölött.

HTML

7. hatás

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box (szélesség:70%; magasság:200px; háttér:#FFF; margó:40px auto; ) /*====== =================================================== ========= * 7. hatás * == =================================== ========================*/ .effect7 ( pozíció:relatív; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) beillesztés; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) beillesztés; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; ) .effect7:before, .effect7:after ( tartalom:""; pozíció:abszolút ,0,0,0,8); box-shadow:0 0 20px rgba(0,0,0,0,8); fent: 0; lent: 0; bal: 10px; jobb: 10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect7:after ( right:10px; left:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate( -ms-transzformáció: ferde (8 fok) forgatás (3 fok); -o-transzformáció:ferdítés(8deg) forgatás(3de); transzformáció:ferdítés(8deg) forgatás(3de); )

Árnyékhatás 8

Az ívelt árnyékok hatása a blokk oldalain.

HTML

8. hatás

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box (szélesség:70%; magasság:200px; háttér:#FFF; margó:40px auto; ) /*====== =================================================== ========= * 8. hatás * == =================================== ========================*/ .effect8 ( pozíció:relatív; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) beillesztés; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) beillesztés; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0 , 0, 0, 0,1) inset; ) .effect8:before, .effect8:after ( tartalom:""; pozíció:abszolút ,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); felső:10px; lent:10px; bal:0;jobb:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect8:after ( right:10px; left:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate( -ms-transzformáció: ferde (8 fok) forgatás (3 fok); -o-transzformáció:ferdítés(8deg) forgatás(3de); transzformáció:ferdítés(8deg) forgatás(3de); )

Ennyi, kedves barátaim. Ha valamit nem értesz, kérdezz kommentben. Hamarosan találkozunk.

Hozzáadhat árnyékot az elemekhez, és megváltoztathatja azt kinézet a box-shadow CSS tulajdonság használatával. Ez a stílus lehetővé teszi érdekes hatások megvalósítását, például a blokk hangerejét és háromdimenziósságát. Mindenki által támogatott ingatlan modern böngészők. Ez alól kivételt képez az IE8 és az Opera Mini.

box-shadow tulajdonság: szintaxis

Ez a stílus a következőképpen van írva:

Box-shadow: inset 4px 4px 8px 5px #333333;

Nézzük meg sorrendben, hogy az egyes paraméterek miért felelősek (balról jobbra):

Kulcsszó inset: paraméter, amelyet nem kell megadni; árnyékot rajzol belül elem.
X eltolás: Megadja, hogy az árnyék milyen mértékben legyen eltolva vízszintesen az elemhez képest. A pozitív érték jobbra tolódást jelent, a negatív - balra. A 0 érték azt jelenti, hogy az árnyék nincs eltolva.
Y Shift: Megadja az árnyék függőleges elmozdulásának mértékét. A pozitív érték lefelé, a negatív érték felfelé tolódást jelent. A 0 érték eltolás nélküli árnyékot jelent.
Elmosási sugár: Ez az árnyék elmosódásának mértéke. Minél magasabb az érték, annál elmosódottabb az árnyék. Ha a paraméter nincs megadva, az alapértelmezett érték 0. Ebben az esetben az árnyék tökéletesen tiszta lesz.
Kiterjesztés: opcionális paraméter, amely az árnyék mindkét tengely mentén történő nyújtásáért felelős; minél nagyobb az érték, annál nagyobb a nyújtás. A kiterjesztés csak akkor működik, ha az előző paraméter jelen van. Az alapértelmezett érték 0.
Árnyék színe: ezzel a paraméterrel minden világos - beállítja az elem árnyékának színét. Az alapértelmezett szín a fekete.

Jegyzet. Android böngészőkés régebbi iPhone verziók A Safari a -webkit- előtagot igényli a box-shadow CSS tulajdonság megfelelő működéséhez.

Ez az ingatlan több értékcsoportot is felvehet (egyszerre több árnyékot is létrehozhat). Ehhez fel kell sorolnia ezeket a paramétercsoportokat vesszővel elválasztva. Például:

Box-shadow: 15px 15px 20px #8b0163, betét 15px 15px 20px #630046;

Box-shadow példák

Hogy jobban megértsd annak erejét és szépségét CSS tulajdonságok box-shadow, mutatunk több, a gyakorlatban is biztonságosan használható példát. Ez az ingatlan nagymértékben átalakít egy közönséges blokkot!

Világos árnyék

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

Papír hatás

Box-shadow: 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), inset 0 0 40px rgba(0, 0, 0, .1);

Több réteg

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

Háromszoros keret

Box-shadow: 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, 0.4);

Sarkok

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

Mint látható, a box-shadow tulajdonság sok teret hagy a képzeletnek. A blokkokat tetszés szerint alakíthatja át - a lényeg az arányérzék! 😉

A következő fejezetben az elemek méretét meghatározó szélességi és magassági tulajdonságokkal fogunk foglalkozni.

Magyarázatok:

, - Az árnyékok létrehozásához használt CSS nyelv tulajdonságai.
, , — árnyéktulajdonság paraméterei.
, , , — CSS-tulajdonságok, amelyek az elemek méretének és helyének megváltoztatásáért felelősek.
— címke, amely a linkek létrehozásáért felelős.

A szelektorok egyfajta hivatkozások, amelyek segítségével a CSS meghatározza, hogy mely elemeknek kell bizonyos stílusokat alkalmazniuk.

Az egérmutató egy állapotválasztó.

— az animált objektum változás tulajdonsága.

Az árnyékokat gyakran használják háromdimenziós hatás eléréséhez. Lehetővé teszik a szövegek és blokkok egyedi stílusát, és speciális betűtípusokkal kombinálva nagyszerű hatást érhet el.

A CSS annyi teret ad a képzeletnek és a kísérletezésnek, hogy évekbe telhet, amíg mindegyiket kipróbálja.

Ebben a cikkben részletesen bemutatjuk az árnyékok CSS-ben történő létrehozását. A szokásos külső árnyékok mellett megmutatjuk, hogyan hozhat létre belső és állapotárnyékokat.

CSS – doboz árnyéka. doboz-árnyék tulajdonság

html( háttér: #fff; ) body(szélesség: 80%; margó: 0 automatikus; háttérszín: rgba(150,60,60,0,54) box-shadow: -1px 5px 5px 5px rgba(77,63,63) ,0,88) )

html (

háttér : #fff ;

test (

szélesség: 80%;

margó: 0 auto;

box-shadow : -1px 5px 5px 5px rgba (77,63,63,0,88)

Az eszközzel egy vagy több árnyékot hozhatunk létre egy blokk körül, bármilyen színnel.

Lényegében mi az az árnyék? Ez pontos másolat egy adott színnel és hellyel rendelkező elem területe. Ezek a paraméterek a box-shadow tulajdonsággal állíthatók be.

Az árnyéktulajdonságok a következő sorrendben kerülnek felhasználásra:

Mozgás vízszintesen.
Mozgás függőlegesen.
A homályosság szintje.
Nyújtás.
Árnyék színe.

Ebben a sorrendben kell megadni az árnyékparamétereket. A lényeg az, hogy ne keverjük össze az értéket, mivel az első 4 ugyanúgy van beállítva, számértékek használatával - , , stb.

Az első paraméter, amely az ún — vízszintesen eltolja az árnyékot a blokkhoz képest. Bármilyen értéket elfogad, beleértve a negatívakat is.

A negatív értékek balra, a pozitív értékek pedig jobbra tolják el az árnyékot. A függőleges tengely mentén lévő árnyékok elmosásakor a paraméter értéke 0 lehet.

A következő sorrend az ingatlan . Felelős az árnyék függőleges mozgatásáért. Elfogad minden értéket - pozitív és negatív. A negatív értékek felfelé, a pozitív értékek pedig lefelé mozgatják az árnyékot.

Ez a paraméter 0-ra állítható. Általában vízszintes árnyékelmosáshoz használatos.

Figyelem! Javasoljuk, hogy az értéket pixelben adja meg. Más értékeket is használhat - , , % és mások, de ez nem ajánlott. Mindezek az értékek meglehetősen nagyok az árnyékok létrehozásához. Ezek megadásával túlzásba lehet lépni a méretekkel.

3 érték - vagy elmosódott. Ezt az értéket Nem szükséges megadni, megadása nélkül az árnyékok továbbra is működnek.

A megadott érték határozza meg azt a sugarat, amely mentén az árnyék elmosódik. A negatív értékek nincsenek feltüntetve.

Itt nagyobb értékek is használhatók. Az erős elmosódás segít színes hatást létrehozni, de csak bizonyos helyzetekben.

Az utolsó előtti érték, amely az árnyék nyújtásáért felelős. Ez szintén nem kötelező, de némi színt adhat az árnyéknak.

A kitágulás az árnyék központi szilárd részének megnyúlása miatt következik be, amely az elmosódott élek között helyezkedik el.

Ez a paraméter bármilyen értéket elfogad, pozitív és negatív egyaránt. A pozitív értékek feszítik az árnyékot, míg a negatív értékek szűkítik.

És az utolsó paraméter - . Szintén nem szükséges megadni, mivel alapértelmezés szerint a doboz árnyékának saját színe van - fekete.

A szín megváltoztatásához bármilyen színrendszer alkalmas - csakúgy, mint a szabványos színek.

Figyelem! Ha azt szeretné, hogy a tulajdonság működjön a Safariban, akkor ezt a paramétert meg kell adni, még akkor is, ha a szabványos fekete színt használja.

Belső árnyék - CSS

html( háttér: #fff; ) body(szélesség: 80%; margó: 0 automatikus; háttérszín: rgba(150,60,60,0,54) box-shadow: -1px 5px 5px 5px rgba(77,63,63) ,0,88) betét; )

html (
háttér : #fff ;
test (
szélesség: 80%;
margó: 0 auto;
háttérszín: rgba (150,60,60,0,54)
box-shadow : -1px 5px 5px 5px rgba (77,63,63,0,88 ) inset ;

Nézzük tehát az árnyékok használatának első példáját. Itt megvizsgáljuk a testblokk belső árnyékának létrehozását.

A kezdéshez nyissa meg a mi HTML dokumentumés töltse ki. Nem kell címkét megadnod, ne töltsd ki a tartalmat, a lényeg a tag létrehozása .

Nyissa meg a CSS-dokumentumunkat, és írja be a címkét , ez lesz a fő válogatónk.

Legközelebb nyitunk kapcsos zárójelés írja le az ingatlant . Állítsa be a helyet, homályosítsa el, nyújtsa. Ön már tudja, hogyan kell ezeket az értékeket beállítani. Ezt követően beállítottuk az árnyék színét, fehérre készítettük, de te beállíthatod tetszés szerint.

Most a legfontosabb. Egy blokk belső árnyékának létrehozásához a CSS-ben meg kell adnia a beillesztett értéket. A szín meghatározása után azonnal megadhatja.

Ennek eredményeként a következő blokkhoz jutottunk:

HTML/CSS – Szövegárnyék

html( háttér: #fff; ) body(szélesség: 80%; margó: 0 automatikus; háttérszín: rgba(150,60,60,0,54) box-shadow: -1px 5px 5px 5px rgba(77,63,63) ,0,88) beillesztés; ) div(margó: 150px; box-shadow: -1px 5px 5px 5px rgba(77,63,63,0,88); betűméret: 25px; )

html (
háttér : #fff ;
test (
szélesség: 80%;
margó: 0 auto;
háttérszín: rgba (150,60,60,0,54)
5px rgba(77,63,63,0,88);
betűméret: 25 képpont;

Hasonló módon készült, de a box-shadow helyett a tulajdonság használatával . A tulajdonság paraméterei a következő sorrendben vannak.

Vízszintes eltolódás.

Függőleges eltolódás.

Elmosási sugár. Nem szükséges.

Szín.

Mint látható, ebben az ingatlanban nincs nyújtási lehetőség. Az árnyék mérete mindig megegyezik a szöveg méretével, ez nem javítható.

Nagyon kényelmes az árnyékokat egymásra felvinni. Ehhez több paramétercsoportot kell felsorolni

Az első árnyék közelebb lesz a szöveghez, a második pedig felette. Emlékeztet a körvonal és szegély tulajdonságokkal való munkavégzésre, de itt 2, 3 vagy több árnyékot hozhat létre.

Hover Shadows – CSS

Most nézzük meg az árnyékok létrehozását egy adott állapothoz. Példánkban egy gombot fogunk használni.

Ahhoz, hogy árnyékot hozzon létre egy gombhoz, először el kell helyeznie azt. Nyissa meg az a címkét, írja le a gomb osztályát és a szöveges értéket a jobb megjelenítés érdekében.

Először állítsuk be az elhelyezést a margó tulajdonság segítségével, és növeljük a gombot egy bizonyos méretre. Növeléséhez használhatja a szélesség és magasság tulajdonságokat, vagy használhatja a padding tulajdonságot.

Most beállítjuk a háttérszínt, a szöveget és a keretet. A gombunk készen áll, kezdjük el az árnyék létrehozását.

Először is hozzunk létre egy szabályos, kis méretű árnyékot box-shadow segítségével. Alapértelmezés szerint látható lesz, anélkül, hogy az egérmutatót a gomb fölé vinné.

Tegyük a legegyszerűbb hatást - növeljük az árnyékot. Ízlés szerint homályossá teheti, vagy módosíthatja a nyújtást.

A legjobb hatás érdekében állítsuk be az átmeneti tulajdonságot egy normál hivatkozáshoz, és állítsuk be az időt 0,5 másodpercre.

Most van egy nagyszerű gombunk egy gyönyörű árnyékkal, amely simán kitágul, ha lebegtetjük.

Következtetés

Ebben a cikkben megismertük az árnyékok létrehozásának összes alapvető módját. Megbeszéltük az árnyékok összes tulajdonságát és paraméterét.

A képernyőképeken bemutatott összes elem megtalálható a forrás mappában. Ha akarod, magad is felfedezheted őket, és kísérletezhetsz az értékekkel. Talán sokkal jobban fog sikerülni, mint mi.

rövid tájékoztatás

CSS verziók

CSS 1 CSS 2 CSS 2.1 CSS 3

Leírás

Árnyékot ad egy elemhez. Több árnyékot is használhatunk, paramétereiket vesszővel elválasztva, árnyékok alkalmazásakor a lista első árnyéka magasabb, az utolsó alacsonyabb lesz. Ha egy elemhez a border-radius tulajdonságon keresztül lekerekítési sugarat adunk meg, akkor az árnyéknak is lekerekített sarkai lesznek. Árnyék hozzáadása megnöveli az elem szélességét, így vízszintes görgetősáv jelenhet meg a böngészőben.

Szintaxis

doboz-árnyék: nincs |<тень> [,<тень>]*
Ahol<тень>:
betét<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Értékek
none Megszakítja az árnyék hozzáadását. beillesztés Az árnyék az elem belsejébe rajzolódik. Opcionális paraméter. x offset Az árnyéknak az elemhez viszonyított vízszintes eltolása. A paraméter pozitív értéke jobbra, negatív értéke balra tolja el az árnyékot. Kötelező paraméter. y offset Az árnyék függőleges eltolása az elemhez képest. Pozitív érték lefelé tolja az árnyékot, negatív érték felfelé. Kötelező paraméter. blur Beállítja az árnyék elmosódási sugarát. Minél magasabb ez az érték, annál jobban kisimul az árnyék, szélesebb és világosabb lesz. Ha ez a paraméter nincs megadva, az alapértelmezett érték 0, ami az árnyékot inkább élessé teszi, mint elmosódottá. stretch A pozitív érték megnyújtja az árnyékot, a negatív érték éppen ellenkezőleg, összenyomja. Ha ez a paraméter nincs megadva, az alapértelmezett érték 0, ami miatt az árnyék az elem méretével megegyező méretű lesz. color Az árnyék színe bármely elérhető CSS formátumban, az alapértelmezett árnyék fekete. Opcionális paraméter.
Lehetőség van több árnyék megadására is, paramétereiket vesszővel elválasztva. A következő sorrendet veszik figyelembe: a lista első árnyéka a legfelül, a lista utolsó árnyéka pedig a legvégére kerül.

HTML5 CSS3 IE Cr Op Sa Fx
doboz-árnyék
A citrusfélék élnének a déli bozótosban? Igen, de hamis másolat!

A példa eredménye az ábrán látható. 1.

Rizs. 1. Árnyéknézet a Safari böngészőben

Böngészők

A Safari az 5.1-es verzió előtt, a Chrome a 10.0-s verzió előtt, az Android a 4.0-s verzió előtt, az iOS Safari pedig az 5.0-s verzió előtt támogatja a -webkit-box-shadow tulajdonságot.

A 4.0-s verzió előtti Firefox támogatja a -moz-box-shadow tulajdonságot.

Az Internet Explorer 9.0 előtti verziója nem támogatja a box-shadow tulajdonságot; ehelyett használhatja a nem szabványos szűrőtulajdonságot:
Szűrő: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Itt: offX - vízszintes árnyékeltolás; offY — függőleges árnyékeltolás; szín — árnyékszín.

A dropshadow szűrő alkalmazása tiszta, éles árnyékot eredményez, így használhatja az árnyékszűrőt az elmosódáshoz.
Szűrő: progid:DXImageTransform.Microsoft.shadow(irány=120, szín=#000000, erősség=10);
Itt: irány – árnyék irányszöge 0 és 360° között; color — árnyék színe; erő – árnyékeltolás pixelben.

A blokkárnyék egy kiváló háromdimenziós effektus, amely valósághűbbé és hangerőssé teszi a webhelyblokkokat. Amikor elkezdtem tanulni (kb. 5-6 éve), fogalmam sem volt a létezéséről, és az oldal készítésekor a blokkok árnyékát kellett képpé varázsolni. Nagyon kényelmetlen volt, és nem mindig sikerült úgy, ahogy szerettem volna. A CSS erejének köszönhetően, amely megkönnyítette a webdesignerek munkáját. Ma megmutatom, hogyan hozhat létre árnyékot a blokkok számára a CSS-ben.

Árnyék hozzáadásához a CSS-ben használja a tulajdonságot doboz-árnyék .

1. az árnyék eltolása vízszintesen (legfeljebb 100 képpont jobbra, legfeljebb -100 képpont balra);
2. függőleges eltolás (100px-ig lefelé, -100px-ig felfelé);
3. árnyék elmosódása (0 - tiszta árnyék, 100 - nagyon homályos árnyék);
4. az árnyék nyújtása (100px-ig - nyújtás, -100px-ig - tömörítés);
5. árnyék színe;
6. inset - az árnyék az elemen belül van, betét nélkül az árnyék kifelé lesz.

Box Shadow a CSS-ben

Amikor elkezdtem tanulni a HTML-t (kb. 5-6 éve), fogalmam sem volt a CSS létezéséről, az oldal készítésekor pedig a blokkok árnyékát kellett képpé alakítanom.

Eredmény :

Táblázat árnyékokkal:

kód Példa:
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 beillesztés;
box-shadow: 7px 10px 23px -8px #92a9e7;
Árnyék segítségével háromdimenziós blokkot hozhat létre:

Kód Példa
box-shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,34), 2px 2px rgb(191,166,6), 3p, 3p, 3p, 3p x 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px, 2x1 rgb3(18), 2x1 rgb 5190, 30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,188,28), 1x0,8p6p, 8px, 8px px 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,166,2), (191,166,2) -13px, 1 ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), 15px, 16px ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px,18b ,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,166,6), -3px -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px -4px 6,rg1(216,5) 31). 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px -9px 4, rgb (18px, rgb) );
box-shadow: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,2px), 13px (195,23), ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31), 15px 8,16 ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1), p13px,18 ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);
Blok1 (szélesség: 70%; maximális szélesség: 550 képpont; margó: 10px automatikus; kitöltés: 1em; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0) , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) betét; )
Eredmény :

Blok1 (szélesség: 30%; maximális szélesség: 550 képpont; margó: 2em automatikus; kitöltés: 1em; háttér: #DADADA; árnyékolódoboz: 6px 6px #BBBBBB, 12px 12px #919191; )
Eredmény :

Blok1 (szélesség: 30%; margó: 0 automatikus; kitöltés: 2em; doboz-árnyék: 0 0 0 1px #cc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px # 0 -10 FFFF00, -20px 0 0 -10px #FF3399; )
Eredmény :

Egy árnyék segítségével gyönyörű keretet készíthet.

Gyönyörű keret a tulajdonságokkaldoboz- árnyék

Blok1 (szélesség: 20%; maximális szélesség: 250 képpont; margó: 0 automatikus; kitöltés: 1em; szegély: 2px szaggatott #999; keretes árnyék: 0 0 0 1px #999, beillesztés 0 0 0 1px #999; )
Eredmény :

Blok1 (szélesség: 30%; maximális szélesség: 250 képpont; margó: 2em automatikus; kitöltés: 4em; háttér: #dcc005; doboz-árnyék: 0 0 4em 4em #fff betét; )
Eredmény :

Blok1 (max. szélesség: 250 képpont; margó: 0 automatikus; kitöltés: 1em; szegélysugár: 10 képpont; háttér: rgb(100,100,100) radial-gradient (kör 0 0-nál, rgba(255,255,255,.65), 5,25,(5,25), 5,25,(5,25) .35)); box-shadow: beszúrt rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;)
Eredmény :

Box Shadow a CSS-ben

weboldal

Eredmény :

Ezeket a gyönyörű hatásokat a CSS-ben árnyékokkal érhetjük el. Találj ki valami újat és eredetit, minden a te kezedben van. Megvan a tudás és a képességek.
Egyik nap pedig közzéteszek egy cikket arról, hogyan készíthetsz Photoshop használata nélkül. Tehát légy a dolgok középpontjában, és iratkozz fel a blogom frissítéseire. Ne hagyj ki egy olyan témát, amely érdekli. Hát ennyi, sok sikert!!!

kód	Példa:
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 beillesztés;
box-shadow: 7px 10px 23px -8px #92a9e7;

Kód	Példa
box-shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,34), 2px 2px rgb(191,166,6), 3p, 3p, 3p, 3p x 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px, 2x1 rgb3(18), 2x1 rgb 5190, 30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,188,28), 1x0,8p6p, 8px, 8px px 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,166,2), (191,166,2) -13px, 1 ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), 15px, 16px ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px,18b ,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,166,6), -3px -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px -4px 6,rg1(216,5) 31). 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px -9px 4, rgb (18px, rgb) );
box-shadow: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,2px), 13px (195,23), ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31), 15px 8,16 ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1), p13px,18 ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);