A CSS box-shadow használata: 13 trükk és példa

A CSS az a nyelv, amelyet a fejlesztők használnak egy weboldal stílusához. Azt szabályozza, hogy a HTML elemek miként jelenjenek meg a képernyőn, papíron vagy bármilyen más formában. A CSS teljes testreszabási erőt biztosít a weboldal saját képre történő stílusához.

A CSS segítségével megváltoztathatja az elem háttérszínét, betűtípusát, betűszínét, a box-shadow, a margót és számos egyéb tulajdonságot. Ebben az útmutatóban áttekintjük a box-shadow néhány hatékony alkalmazását.

Mi az a CSS box-shadow?

A box-shadow tulajdonság segítségével árnyékot lehet alkalmazni a HTML elemekre. Ez az egyik leggyakrabban használt CSS-tulajdonság a dobozok vagy képek stílusához.

CSS szintaxis:

box-shadow: [vízszintes eltolás] [függőleges eltolás] [elmosódási sugár] [opcionális terjedési sugár] [szín];

1. vízszintes eltolás: Ha a vízszintes eltolás pozitív, az árnyék a négyzet jobb oldalán lesz. Ha pedig a vízszintes eltolás negatív, akkor az árnyék a doboz bal oldalán lesz.
2. függőleges eltolás: Ha a függőleges eltolás pozitív, az árnyék a négyzet alatt lesz. Ha pedig a függőleges eltolás negatív, akkor az árnyék a mező fölé kerül.
   instagram viewer
3. elmosódási sugár: Minél nagyobb az érték, annál homályosabb lesz az árnyék.
4. terjedési sugár: Jelzi, hogy az árnyéknak mennyit kell terjednie. A pozitív értékek növelik az árnyék terjedését, a negatív értékek pedig csökkentik a terjedést.
5. Szín: Jelzi az árnyék színét. Emellett bármilyen színformátumot támogat, például rgba, hex vagy hsla.

Az elmosódás, terjedés és színparaméterek opcionálisak. A box-shadow legérdekesebb része, hogy vesszővel tetszőleges számú szétválaszthatja a box-shadow értékeket. Ezzel több szegélyt és árnyékot lehet létrehozni az elemeken.

1. Adjon hozzá egy sötét mező-árnyékot a doboz bal, jobb és alsó részéhez

Nagyon homályos árnyékokat adhat a doboz három oldalára (balra, jobbra és alulra) a következő box-shadow CSS használatával a megcélzott HTML elemhez:

box-shadow: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Kimenet:

2. Adjon hozzá egy Dim mező-árnyékot az Összes oldalhoz

Világos árnyékokat adhat a doboz minden oldalához a következő box-shadow CSS használatával a megcélzott HTML elemhez:

box-shadow: rgba (100, 100, 111, 0,2) 0px 7px 29px 0px;

Kimenet:

3. Vékony doboz-árnyék hozzáadása az alsó és a jobb oldalhoz

Hozzáadhat árnyékokat a doboz aljához és jobb oldalához a következő box-shadow CSS használatával a megcélzott HTML-elemmel:

box-shadow: rgba (0, 0, 0, 0,15) 1,95px 1,95px 2,6px;

Kimenet:

4. Sötét doboz-árnyék hozzáadása az Összes oldalhoz

Sötét árnyékot adhat a doboz minden oldalához a következő box-shadow CSS használatával a megcélzott HTML elemhez:

box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Kimenet:

5. A Spread Shadow hozzáadása az összes oldalhoz

Az árnyékot hozzáadhatja a mező minden oldalához a következő paranccsal a cél HTML elemhez:

box-shadow: rgba (0, 0, 0, 0,25) 0px 54px 55px, rgba (0, 0, 0, 0,12) 0px -12px 30px, rgba (0, 0, 0, 0,12) 0px 4px 6px, rgba (0, 0, 0, 0,17) 0px 12px 13px, rgba (0, 0, 0, 0,09) 0px -3px 5px;

Kimenet:

6. Vékony szegély árnyék hozzáadása az összes oldalhoz

Hozzáadhat egy egyszerű szegély árnyékot a mező minden oldalához a következő CSS használatával a cél HTML elemhez:

box-shadow: rgba (6, 24, 44, 0,4) 0px 0px 0px 2px, rgba (6, 24, 44, 0,65) 0px 4px 6px -1px, rgba (255, 255, 255, 0,08) 0px 1px 0px beillesztés;

Kimenet:

7. Adjon hozzá egy doboz-árnyékot az alsó és a bal oldalhoz

Hozzáadhat egy árnyékot a doboz aljához és bal oldalához a következő box-shadow CSS használatával a megcélzott HTML-elemmel:

box-shadow: rgba (0, 0, 0, 0,1) -4px 9px 25px -6px;

Kimenet:

8. Adjon hozzá egy sötét mező-árnyékot a felső és a bal oldalhoz, a sötét árnyékot pedig az alsó és a jobb oldalhoz

Világos árnyékot adhat a doboz tetejéhez és bal oldalához, valamint sötét árnyékot a doboz alsó és jobb oldalához a következő CSS használatával, a cél HTML elemével:

box-shadow: rgba (136, 165, 191, 0,48) 6px 2px 16px 0px, rgba (255, 255, 255, 0,8) -6px -2px 16px 0px;

Kimenet:

9. Vékony, színes szegély árnyékot ad az összes oldalhoz

Hozzáadhat egy egyszerű színes szegély árnyékot a doboz minden oldalához a következő box-shadow CSS használatával a cél HTML elemével:

box-shadow: rgba (3, 102, 214, 0,3) 0px 0px 0px 3px;

Kimenet:

10. Adjon hozzá több színes szegély árnyékot a doboz alsó és bal oldalához

Több színes szegély árnyékot is felvehet a mező aljára és bal oldalára a következő CSS használatával a cél HTML elemével:

box-shadow: rgba (50, 50, 93, 0,25) 0px 30px 60px -12px beillesztés, rgba (0, 0, 0, 0,3) 0px 18px 36px -18px beillesztés;

Kimenet:

11. Adjon hozzá több színes szegély árnyékot az aljára

Több színes szegély árnyékot is felvehet a doboz aljára a következő box-shadow CSS használatával a cél HTML elemhez:

box-shadow: rgba (240, 46, 170, 0,4) 0px 5px, rgba (240, 46, 170, 0,3) 0px 10px, rgba (240, 46, 170, 0,2) 0px 15px, rgba (240, 46, 170), 0,1) 0px 20px, rgba (240, 46, 170, 0,05) 0px 25px;

Kimenet:

12. Adjon több színes szegély árnyékot a doboz alsó és jobb oldalához

Több színes szegély árnyékot is hozzáadhat a mező aljához és jobb oldalához a következő CSS használatával a cél HTML elemhez:

box-shadow: rgba (240, 46, 170, 0,4) 5px 5px, rgba (240, 46, 170, 0,3) 10px 10px, rgba (240, 46, 170, 0,2) 15px 15px, rgba (240, 46, 170), 0,1) 20px 20px, rgba (240, 46, 170, 0,05) 25px 25px;

Kimenet:

13. Világos árnyékokat adjon a bal és a jobb oldalra, az árnyékot terítse alulra

Világos árnyékokat vehet fel a bal és a jobb oldalra, és az árnyékot a mező aljára terjesztheti a következő HTML-elem HTML-elem használatával:

box-shadow: rgba (0, 0, 0, 0,09) 0px 2px 1px, rgba (0, 0, 0, 0,09) 0px 4px 2px, rgba (0, 0, 0, 0,09) 0px 8px 4px, rgba (0, 0, 0, 0,09) 0px 16px 8px, rgba (0, 0, 0, 0,09) 0px 32px 16px;

Kimenet:

Integrálja a CSS-t egy HTML-oldallal

Most már tudja, hogyan lehet csinos box-shadow effektusokat hozzáadni a CSS használatával, könnyedén integrálhatja őket többféleképpen a HTML elemekkel.

Összefüggő: 11 Hasznos eszközök a CSS-fájlok ellenőrzésére, tisztítására és optimalizálására

Beágyazhatja magába a HTML oldalba, vagy külön dokumentumként csatolhatja. Háromféleképpen lehet CSS-t beépíteni egy HTML-dokumentumba:

Belső CSS

Beágyazott vagy belső stíluslapok kerülnek beillesztésre egy HTML dokumentum szakasza a elem. Bármely számot létrehozhat elemeket egy HTML dokumentumban, de azokat a és címkék. Az alábbiakban bemutatjuk a belső CSS HTML-dokumentummal történő használatát:

4. stílus

Inline CSS

Az Inline CSS segítségével egyedi stílusszabályokat adhat hozzá egy HTML elemhez. Használható HTML elemekkel a stílus tulajdonság. A style attribútum a CSS tulajdonságokat tartalmazza "ingatlan érték" pontosvesszővel elválasztva (;).

Összefüggő: Megtanulják, hogyan készítsenek kétdimenziós webhelyeket a CSS Grid segítségével

Az összes CSS-tulajdonságnak egy sorban kell lennie, vagyis a CSS-tulajdonságok között nem lehet sortörés. Az alábbiakban bemutatjuk a belső CSS HTML-dokumentummal való használatát:

4. stílus

Külső CSS

A külső CSS a legideálisabb módszer a HTML-dokumentumok stílusainak alkalmazására. Egy külső stíluslap tartalmazza az összes stílusszabályt külön dokumentumban (.css fájl), ezt a dokumentumot ezután a HTML dokumentumhoz kapcsolja a címke. Ez a módszer a legjobb módszer a stílusok meghatározására és alkalmazására a HTML-dokumentumok számára, mivel az érintett HTML-fájl minimális változtatásokat igényel a jelölésben. Íme egy példa, amely bemutatja, hogyan lehet külső CSS-t használni egy HTML-dokumentummal:

Hozzon létre egy új CSS fájlt a .css kiterjesztés. Most adja hozzá a következő CSS kódot a fájl belsejébe:

.heading {
text-align: center;
}
.image-box {
kijelző: blokk;
bal margó: automatikus;
jobb-jobb: auto;
box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

Végül hozzon létre egy HTML dokumentumot, és adja hozzá a következő kódot a dokumentumon belül:

4. stílus

Ne feledje, hogy a CSS-fájl a következőn keresztül kapcsolódik a HTML-dokumentumhoz tag és href tulajdonság.

A fenti három módszer (belső CSS, belső CSS és külső CSS) ugyanazt a kimeneti

Tegye weblapját elegánssá CSS-sel

A CSS használatával teljes mértékben ellenőrizheti a weboldal stílusát. Minden HTML-elem testreszabható különféle CSS-tulajdonságokkal. A világ minden tájáról érkező fejlesztők hozzájárulnak a CSS frissítéséhez, és ezt az 1996-os megjelenés óta teszik. Mint ilyen, a kezdőknek sokat kell tanulniuk!

Szerencsére a CSS kezdőbarát. Kiváló gyakorlatot szerezhet, ha néhány egyszerű paranccsal indul, és meglátja, hová visz a kreativitása.

10 egyszerű CSS-kód példa, amelyeket 10 perc alatt megtanulhat

Szeretne többet megtudni a CSS használatáról? Először próbálkozzon ezekkel az alapvető CSS-kódokkal, majd alkalmazza azokat a saját weboldalain.

Olvassa el a következőt

A szerzőről