Az árnyékok kezelése css-ben
A CSS nagyon változatos, és számos funkció csak csodálatos hatással bír, amit normális html-ben sem tudsz álmodni, ezért ebben a leckében szeretnék elmondani neked ezt a nagyon érdekes hatást, mint az árnyékok.
A CSS árnyékokat mindkét blokkra és rendszeres szövegre alkalmazhatjuk, ezek a képekre is alkalmazhatók. Az árnyékok külsőek lehetnek, belsőek lehetnek, mindez könnyen megvalósítható a gyakorlatban. Menjünk közvetlenül a témához, és nézzük meg, hogyan valósult meg ez a gyakorlatban.
Ez a blokkok tulajdonsága a box-shadow függvény használatával valósul meg, és a gyakorlatban így néz ki:
box-shadow: 10px 10px 10px 10px # ff0000;
Elemezzük, hogy valójában mi képviseli ezeket az értékeket, az első paraméter határozza meg a vízszintes eltolása az árnyék a blokk, és ahogy azt az adott pixel, a második paraméter beállítja a függőleges érték, a harmadik paraméter felelős a blur sugár, azaz ha úgy készül nulla, az árnyék lesz teljesen világos és lesz, mintha egy külön egység a háttérben, de erről bővebben később a konkrét példában a negyedik paraméter felelős a terjedését a sugarat, és az utolsó lehetőség a legegyszerűbb, valójában a színe az árnyék. Most nézzük meg, hogyan történik ez közvetlenül a kóddal:
Íme, amit megtudtunk:
Mint látod, két blokkot készítettem az árnyékkal, az első blokkban csak két paramétert használtam, ez a vízszintes és függőleges eltolás, de a másodikban már megváltoztattam az árnyék színét, és hozzáadtam az elmosódási opciót. Itt általánosságban sok kísérletet végezhet, ami mind a képzelőerejétől, akár a végső céltól függ, a paraméterek negatív értékeit is használhatja az árnyék eltolásához stb.
Menjünk most kezeljük a szöveg árnyékát, a szintaxis egyszerűbb és így néz ki:
szöveg-árnyék: 5px 5px 5px # 000;
Az itt található tömbökhöz hasonlóan az első két paraméter a vízszintes és a függőleges elmozdulás, a harmadik pedig az elmosódott sugár és az árnyék negyedik színe. Ugyanaz, mint az előző esetben, csak itt nem tudod megváltoztatni az árnyékeloszlás sugarát, ez a paraméter egyszerűen nem történik meg itt.
Az egyértelműség kódja:
Így néz ki a böngészőben:
Számomra személyesen ez azonnal hasonlít az árnyék hatására, amit általában a Photoshopban szoktam csinálni.
Most menjünk mélyebben, létrehozunk belső árnyékokat és beágyazott árnyékokat. Nincs semmi bonyolult belső árnyék létrehozásához, csak hozzá kell adnunk a belső paramétert, és a beágyazott betéthez hasonló a szintaxis:
box-shadow: beillesztés 5px 5px 30px 10px #fff;
Itt az árnyékok úgy működnek, ahogyan kiderül, hogy a blokkban vannak elosztva, és itt láthatja, hogy az árnyékelosztási paraméter sugarának nagyon fontos szerepe van. Az egyértelműség érdekében ismét egy példa:
És hogyan néz ki a böngészőben:
Ahogy láthatja, fekete blokkot és fehér belső árnyékot készítettem egy vizuális felfogáshoz.
Nos, az utolsó dolog, hogy árnyékot adjunk a képre, itt egy kicsit bonyolultabb, hiszen ha ezt a paramétert alkalmazzuk az img tagre, akkor semmit sem kapunk, ezért megyünk a trükkre, és tennénk a következőket:
És itt az eredmény:
A lényeg az, hogy egyszerűen egy blokkot készítünk egy fix méretűre, hozzárendelünk háttérképet, majd a box-shadow függvény problémamentesen működik, és megszabadítottuk az img tagot.
Ez az egész, az árnyékokkal való munka elég érdekes tevékenység, de mint bármely más vállalkozásban, kísérlet, és meg fogja találni, hogy gond nélkül keres. Remélem, ez a lecke hasznos lesz számodra.