A CSS-csak a Box-Shadow hatását fedi le

Tartalom átfedések a modern web design kiemelkedő része. Segítenek neked elrejteni egy elemet egy weboldalon, és később - a felhasználó jóváhagyásával - felfedje azt, és további információkat vagy vezérlőket jeleníthet meg, például a gombok mögött található gombokat.

Egy tipikus fedvény félig átlátszó, val,-vel szilárd háttérszín (általában fekete), és vannak olyan szövegek vagy gombok, amellyel a felhasználók láthatják vagy kommunikálhatnak. Miután az interakció (kattintás vagy lebegés) bekövetkezik, az átfedés megszűnik és feltárja a tartalmat alatta.

Ebben a cikkben megnézzük, hogyan színes képeket adjon hozzá a képekhez tiszta CSS használatával. Az alábbi demó végeredményét láthatja. Vigye a képeket, hogy a fedvények feltárják a pokemont. Bár ez a hozzászólás a képeket tárgyalja, a bemutatott technikát biztonságosan alkalmazhatja más tartalomtípusokra (például szövegblokkokra) is.

Kerülje az extra HTML elemek hozzáadását

Az átfedéseket gyakran hozza létre egy extra HTML elem elhelyezése egy valamivel átlátszatlanság értéke kevesebb, mint 1 jobbra a fedett elem felett. A probléma az, hogy ez a technika egy külön- elem (vagy pszeudo-elem).

Ha nem egy HTML méretű pedantikus, akkor az overlay-nek egy extra eleme valószínűleg nem nagy dolog, mivel valószínűleg nem fog sokat fizetni a hálózat sávszélességét. Ennek ellenére különálló az elemek és azok átfedéseinek stílusszabályai még mindig károsítják a CSS olvashatóságát és karbantarthatóságát.

Ahhoz, hogy a kódot rendben tartsuk, és ne keverjük el a HTML vázlatot, jobb választás a CSS-alapú megoldás használatára.

Átfedés létrehozása box-shadow

Szóval hogyan lehet ténylegesen létrehozni egy CSS-alapú fedést? A box-shadow CSS tulajdonság. A doboz-árnyék tökéletes ehhez a munkához, hiszen ez egy overlay, de egy sötét árnyék egy elem felett?

A doboz-árnyéknak van egy tulajdonság értéke betétlap, ami az árnyék megjelenését okozza a doboz keretének befelé.

Az elem szélességének és szélességének fele vagy több fele árnyékméretű árnyékoló árnyékot hoz létre lefedi a teljes elem.

 .doboz szélesség: 200px; magasság: 200px; doboz-árnyék: zöld 0 0 0 100px betét;  

Mivel általában lefedik némi átláthatósággal, hozzá kell adnia a doboz árnyékához is. Ezt a RGBA () árnyék színe.

A rgb az rgba, a piros, a zöld és a kék színcsatorna értékei, míg egy az alfa-csatorna, ami felelős az átláthatóságért.

Az alfa-csatorna esetében az 1 érték egy átlátszatlan szín, míg 0 létrehoz egy teljesen átlátszó szín.

0 és 1 közötti érték hozzárendelése a doboz árnyékának rgba színértékének alfa csatornájához hozzon létre egy félig átlátszó fedőt.

Hozza létre a Demó kódját

Demónk bemutatja a különböző pokemonok képeit és nevét. Itt csak a Bulbasaur kódját készítjük, a demóban az első pokemon, ahogy a többiek ugyanúgy készülnek (a Codepenen is megnézheti a kódot is).

HTML

A HTML-hez csak szükségünk van hozzon létre egy dobozt amelyhez mindent kiegészítünk a CSS-el.

CSS

Az alábbi CSS-ben a .pokemon Az elemek megjelenítik a Pokemon képeket, és a .Pokemon :: után a pszeudoelemek a pokemon nevét hordozzák.

Mivel a box-shadow ingatlan több értéket vehet fel azért, hogy több árnyékot adhat meg, az átfedő árnyék mellett más szürke árnyékokat is hozzáadtam a .pokemon és .Pokemon: hover esztétikai elemek.

 / * pokemon képek * / .pokemon szélesség: 200px; magasság: 200px; / * a középső tartalmat a flex / box * / kijelzővel: flex; indokolja a tartalmat: központ; illesztési elemek: központ; / * overlay * / box-shadow: 0 0 0 100px betét, 0 0 5px szürke; / * hover-out átmenet * / átmenet: box-shadow 1s;  / * pokemon nevek * / .pokemon :: után szélesség: 80%; magasság: 80%; kijelző: blokk; betűtípus: 16pt 'bookman old syle'; fehér szín; határ: 2px szilárd; szöveg-igazítás: központ; / * a középső tartalmat a flex / box * / kijelzővel: flex; indokolja a tartalmat: központ; illesztési elemek: központ; / * az átmenet * / átmenete: az opacitás 1s .5s;  / * feltárja pokemon képet a hover * / .pokemon: hover átmenet: box-shadow 1s; box-shadow: 0 0 0 5px betét, 0 0 5px szürke, 0 0 10px szürke betét;  / * elrejtése Pokemon nevet a hover * / .pokemon: hover :: után átmenet: opacitás .5s; opacitás: 0;  

Amikor az .pokemon az elemek lebegnek, a doboz-árnyéknak megváltoztatnia kell a mögöttes képet.

Láthatjuk, hogy a .Pokemon: hover A szelektor egy új doboz-árnyékot kap, amely eltávolítja az átfedést, és a .Pokemon: hover :: után A szelektor elrejti a pokemon nevét a átlátszatlanság ingatlan.

Lehet, hogy észrevette a színes értékek hiánya a. \ t .pokemon és .Pokemon: hover stílusszabályok. Meg kell adni az egyes pokemonok overlay box-shadow színét saját különálló szabályaiban, mivel mindannyian különböznek egymástól.

Mint box-shadow nem rendelkezik hosszútávú tulajdonságokkal, nem állíthatja be az árnyék színét egyénileg valami hasonlóval, box-shadow-szín; ehelyett - a szín ingatlan.

Alapértelmezés szerint, ha értéket ad a szín tulajdonság, ez az érték a határra, a vázlatra és a doboz-árnyék színeire is. Tehát egyszerűen használhatja a szín tulajdonság a szín árnyékolásához.

 #bulbasaur háttérkép: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * a szín árnyék színe * / szín: rgba (71, 121, 94, 0,9);  #bulbasaur :: után / * pokemon név * / tartalom: 'Bulbasaur';  

Az átfedő árnyék színe a fentieket használja RGBA () az alfa-érték 0,9-es értékével működik, hogy az átfedés átlátható legyen.

Az overlay box-árnyék színén kívül a fenti CSS hozzáadja az egyes pokemon egyéni szabályait is - a képet háttérkép és a név.

És ez minden, készen állunk a CSS-alapú színes képborításunkkal. Tekintse meg az alábbi tollal kapcsolatos összes póker kódját.