Mit lehet létrehozni javascriptben. Mire való a Javascript, és mit csinál? Példák. Hurok- és műveletkiválasztó operátorok

A szokásos árnyékokat könnyű megvalósítani box-shadow segítségével vagy szöveg-árnyék. De mi van, ha belső árnyékokat kell készítenie? Ez a cikk leírja, hogyan lehet ezeket az árnyékokat néhány sornyi kóddal elkészíteni.

Szintaxis

Először nézzük meg az árnyékok CSS-ben való megvalósításának két fő módját.

doboz-árnyék

Tervezés doboz-árnyék többféle jelentést tartalmaz:

Vízszintes eltolásÉs függőleges eltolás- vízszintes és függőleges elmozdulás, ill. Ezek az értékek jelzik, hogy az objektum melyik irányba veti az árnyékát:

Elmosási sugárÉs terjedési sugár kicsit bonyolultabb. Mi a különbség? Nézzünk egy példát két elemből, ahol az értékek elmosódási sugár különbözik:

Az árnyék széle egyszerűen elmosódott. Különböző értékekkel terjedési sugár a következőket látjuk:

Ebben az esetben azt látjuk, hogy az árnyék nagy területen szóródik. Ha nem ad meg értéket elmosódási sugárÉs terjedési sugár, akkor egyenlők lesznek 0-val.

szöveg-árnyék

A szintaxis nagyon hasonló a doboz-árnyék:

A jelentések hasonlóak, de nem terült-árnyék. Használati példa:

Beillesztett doboz-árnyék

Az objektumon belüli árnyék „megfordításához” hozzá kell adnia betét CSS-ben:

Miután megértette az alapvető doboz-árnyék szintaxist, nagyon könnyű megérteni, hogyan kell megvalósítani a belső árnyékokat. Az értékek továbbra is ugyanazok, hozzáadhat színt (RGB hexadecimálisan):

Színezd be RGB formátum, az alfa érték felelős az árnyék átlátszóságáért:

Képek árnyékokkal

Hozzáadás Belső árnyék a kép kicsit nehezebb a szokásosnál div. Kezdésként itt a szokásos képkód:

Logikus feltételezni, hogy hozzáadhat egy ilyen árnyékot:

Img (box-shadow: inset 0px 0px 10px rgba(0,0,0,0,5); )

De az árnyék nem látható:

Számos módja van ennek a probléma megoldásának, amelyek mindegyikének megvannak az előnyei és hátrányai. Nézzünk kettőt közülük. Az első az, hogy a képet normálba csomagolja div:

Div (magasság: 200px; szélesség: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img (magasság: 200px; szélesség: 400px; pozíció: relatív; z-index: -2 ;)

Minden működik, de egy kis plusz HTML és CSS jelölést kell hozzáadnunk. A második módszer a kép beállítása a kívánt blokk háttereként:

Div (magasság: 200px; szélesség: 400px; háttér: url(http://lorempixum.com/400/200/transport/2); box-shadow: beszúrás 0px 0px 10px rgba(0,0,0,0,9); )

Ez történhet belső árnyékok használatakor:

Szöveg-árnyék beillesztése

Belső szövegárnyék megvalósításához egyszerűen adja hozzá a kódot betét nem működik:

A megoldáshoz először alkalmazza a fejlécet h1 telepítés sötét háttérés egy világos árnyék:

H1 (háttérszín: #565656; szín: átlátszó; szövegárnyék: 0px 2px 3px rgba(255,255,255,0,5); )

Íme, mi történik:

Titkos összetevő hozzáadása háttér-klip amely levág mindent, ami túlnyúlik a szövegen (sötét háttérre):

H1 (háttérszín: #565656; szín: átlátszó; szövegárnyék: 0px 2px 3px rgba(255,255,255,0,5); -webkit-háttérklip: szöveg; -moz-háttér-klip: szöveg; háttér-klip: szöveg ;)

Szinte pontosan olyan lett, amire szükségünk volt. Most csak egy kicsit sötétítjük a szöveget (alfa), és az eredmény:

A rögzítés sorrendje alapvetően fontos. Az első érték mindig az eltolás az X tengely mentén, a második - az Y tengely mentén.

Ha az egyik tengely mentén nincs szükség eltolásra, állítsa nullára:

Osztály(box-shadow: 0 8px;) – csak az Y tengely mentén tolja el az árnyékot

Eredmény

Osztály (box-shadow: 8px 8px;) – eltolás mindkét tengely mentén

Eredmény

Negatív érték a box-shadow tengelyekhez

Az árnyék az ellenkező irányba fog mozogni:

Osztály(box-shadow: -8px 8px;) – az árnyék eltolása negatív értékkel az X tengely mentén

Eredmény

Árnyékelmosás sugara

Harmadik tulajdonságparaméter doboz-árnyék. Ha nincs megadva, az érték 0, és az árnyék mérete megegyezik annak az elemnek a méretével, amelyre alkalmazva van.

Osztály (box-shadow: 0 48px 0;) – az árnyék megduplázza annak az elemnek a méreteit, amelyre alkalmazták

Eredmény

Ha az érték nagyobb, mint nulla, az élek elveszítik a határozottságukat, az árnyék nagyobb lesz és vizuálisan világosabb lesz. Az elmosódást minden oldalról alkalmazzák:

Osztály (box-shadow: 0 0 8px;) – nincs eltolás, csak elmosódás

Eredmény

Osztály (box-árnyék: 0 8px 8px;) – Y tengely eltolása és elmosása

Eredmény

A negatív érték hibának minősül, és az árnyék egyáltalán nem jelenik meg.

Árnyék nyújtási sugara

Negyedik tulajdonságparaméter doboz-árnyék. Módosítja az árnyék méretét az elemhez képest. Minden irányba nyúlik:

Osztály (box-shadow: 0 0 0 8px;) – nincs elmozdulás vagy elmosódás, csak nyújtás

Eredmény

Ebben az esetben az árnyék szélességben és magasságban 16 képponttal nagyobb, mint az elem: 8 képpont bal + 8 képpont jobb és 8 képpont felül + 8 képpont alul.

Negatív árnyéknyúlási érték a CSS-ben

Az árnyék nem nyúlik, hanem minden oldalon szűkül a megadott értékkel:

Class(box-shadow: 0 16px 0 -8px;) – csökkentse az árnyékot negatív értékkel

Eredmény

Árnyék színe

Alapértelmezés szerint az árnyék színe megduplázza a betűszínt: mint a fenti példákban.

Az árnyék színe bármely elérhető CSS formátumban megadható:

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

Adjon az elemnek kék árnyékot:

Osztály (box-shadow: 0 8px #3a8fe7;)

Eredmény

Belső árnyék

Paraméter betétárnyékot jelenít meg a blokkon belül.

A fent felsorolt ​​lehetőségekkel ellentétben nincs szigorú írási sorrend. Mindkét lehetőség ugyanazt az eredményt adja:

Box-shadow: 0 8px #3a8fe7 betét; box-shadow: inset 0 8px #3a8fe7;

Eredmény

A második lehetőség könnyebben érthető a kód olvasásakor.

Több árnyék

Több árnyék van megadva vesszővel elválasztva. Megjelenítési sorrend fentről lefelé:

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

Eredmény

Ha helyet cserél, a kék árnyék nem lesz látható:

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

Eredmény

A belső és a külső árnyék egyszerre van beállítva:

Osztály (box-shadow: 0 16px #3ae7af, inset 0 8px #3a8fe7; )

Eredmény

Lekerekített árnyék

Ha egy elemnek megadjuk a tulajdonságot határ-sugár, az árnyéknak lekerekített sarkai lesznek.

Osztály (box-shadow: 0 16px #3a8fe7; szegélysugár: 8px; )

Eredmény

Az árnyék nyújtásának beállításával növeljük a kerekítését. Például a szegélysugár 8 képpont, az árnyékszakasz pedig 4.

8+4=12px az árnyék kerekítési sugara.

Osztály (box-shadow: 0 16px 0 4px #3a8fe7; szegélysugár: 8px; )

Eredmény

Ugyanez az elv vonatkozik az árnyék zsugorítására is, ha az érték negatív.

8+(-4)=4px - kétszer kisebb árnyékkerekítést kapunk.

Ha az árnyéktömörítés nagyobb, mint a határsugár, akkor derékszögű árnyékot kapunk. Például a tömörítés 16 képpont.

8+(-16)=(-8), de a filének nem lehet negatív értéke, és nulla kerül alkalmazásra.

Osztály (box-shadow: 0 24px 0 -16px #3a8fe7; szegélysugár: 8px; )

Eredmény

CSS tulajdonság doboz-árnyék Az Opera Mini kivételével minden népszerű böngésző támogatja.

Az oldalon lévő blokk elem alatti árnyékot általában háromdimenziós hatás létrehozására, az elemre való figyelem felkeltésére vagy egy terv részeként használják. Az elemek alatti kis árnyék is adja az oldal térfogatát és mélységét.

Árnyék hozzáadásához használja a box-shadow tulajdonságot, amelynek hat értéke van, amelyek közül csak kettő szükséges. ábrán. Az 1. ábra a box-shadow tulajdonságot mutatja az összes lehetséges értékkel, számozva az azonosítás céljából.

Rizs. 1. Box-shadow tulajdonságok értékei

1. az inset kulcsszó beállítja az árnyékot az elemen belül;
2. az árnyék eltolása vízszintesen (5px - jobbra, -5px - balra);
3. függőleges eltolás (5px - le, -5px - fel);
4. árnyék elmosódási sugara (0 - éles árnyék);
5. shadow stretch (5px - stretch, -5px - shrink);
6. árnyék színe.

Csak a vízszintes és függőleges eltolást kell megadni, az összes többi paramétert alapértelmezés szerint a rendszer veszi. Ebben az esetben az árnyék éles lesz, elmosódás nélkül vagy fekete.

A kombinációk miatt különböző paraméterekés jelentésükkel sokféle árnyéktípust lehet beszerezni. táblázatban 1 mutatja a kódot és az eredményt, amelyhez vezet.

asztal 1. Árnyék paraméterek kombinációi

Kód	Eredmény	Leírás
box-shadow: 5px 5px;		Éles árnyék jobb oldalon és lent.
box-shadow: -5px -5px;		Éles árnyék a bal oldalon és fent.
box-shadow: 0 0 5px;		Elmosódott árnyék egy elem körül.
box-shadow: 0 0 5px 2px;		Növelje ki az árnyékot 2 képponttal.
box-shadow: 0 0 5px 2px piros;		Vörös izzás az elem körül.
box-shadow: 0,4em 0,4em 5px rgba(122,122,122,0,5);		Átlátszó árnyék.
box-shadow: inset 0 0 6px;		Árnyék belül.

A táblázatból látható, hogy az árnyékeltolást nem kell pixelben megadni, bár ez kényelmes. Az árnyék színe bármilyen elérhető formátumban megadható; például áttetsző árnyék eléréséhez az RGBA formátum megfelelő; egy ilyen árnyék bármilyen háttéren jól mutat. Az 1. példa bemutatja, hogyan kell ezt megtenni.

1. példa: Árnyék a háttérképen

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Eredmény ezt a példátábrán látható. 2. Az árnyék követi a blokk sarkainak lekerekítését.

Rizs. 2. Árnyék megjelenése a háttérképen

Amikor "széles" árnyékot ad hozzá, ne feledje, hogy az túlnyúlhat a böngészőablak látható határain, és így vízszintes görgetősáv jelenik meg.

A pszeudoelemekhez árnyékok is hozzáadhatók; ez néha bonyolult elrendezéseknél szükséges. ábrán. A 3. ábra egy fejlécblokkot mutat, amelyhez árnyék került. A kereszteződésben lévő vonalak elkerülése érdekében használd az ::after pszeudoelemet, és adj hozzá egy árnyékot.

Rizs. 3. Blokk árnyékkal

A 2. példa egy ilyen blokk létrehozását mutatja be.

2. példa Blokk árnyékkal

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Egy elemnek több árnyéka is lehet, de egyszerre több is, ezek paraméterei vesszővel elválasztva szerepelnek a box-shadow tulajdonság értékében. A 3. példa bemutatja, hogyan lehet dupla árnyékot adni az összes képhez.

2. példa Blokk árnyékkal

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Ennek a példának az eredménye az ábrán látható. 4.

Rizs. 4. Dupla árnyékkép

Az első árnyék a kép bal oldalán 20 képpont elmosódási sugárral jelenik meg, mérete a negyedik paraméterrel (-20 képpont) csökkentve. A második árnyék paraméterei a tizedesvessző után jelennek meg, az árnyék a kép jobb oldalán jelenik meg, és a szimmetria érdekében szintén le van csökkentve.