Kaip CSS-Tik perdengia efektą su „Box-Shadow“

Turinio perdangos yra svarbi šiuolaikinio interneto dizaino dalis. Jie jums padeda paslėpti elementą tinklalapyje, o vėliau - su vartotojo patvirtinimu - atskleisti, ir parodyti papildomą informaciją ar valdiklius, pvz., mygtukus už jos.

Tipiškas perdangos elementas pusiau skaidrus, su tvirta fono spalva (dažniausiai juoda), ir tam tikras tekstas ar mygtukai, kuriuos vartotojai gali matyti ar bendrauti. Pasibaigus sąveikai (paspaudus arba paspaudus), perdanga pašalinamas ir atskleidžia turinį po juo.

Šiame straipsnyje mes peržiūrėsime, kaip pridėkite spalvotą vaizdą naudojant gryną CSS. Galutinį rezultatą galite matyti žemiau. Perkelkite vaizdus, ​​kad perdangos atskleistų pokemonus. Nors šiame pranešime aptariami vaizdai, jo pateikta technika gali būti saugiai taikoma ir kitiems turinio tipams (pvz., Teksto blokams).

Venkite papildomų HTML elementų pridėjimo

Užklojos dažnai sukuriamos papildomo HTML elemento pozicionavimas su neskaidrumas vertė mažesnė nei 1 tiesiai virš elemento, kurį norite padengti. Problema ta, kad šis metodas yra susijęs su papildomai elementas (arba pseudo elementas).

Jei nesate HTML dydžio pedantiškas, turint papildomą perdangos elementą, tikriausiai tai nėra didelis dalykas, nes greičiausiai jis nebus apmokestinamas bet kurio tinklo pralaidumu. Tačiau turėdami atskirai elementų ir jų perdangų stiliaus taisyklės vis dar kenkia CSS skaitymui ir prieinamumui.

Jei norite, kad jūsų kodas būtų tvarkingas, o ne sugadinti HTML kontūrą, tai yra geresnis pasirinkimas naudoti tik CSS sprendimą.

Sukurti perdengimą langelis-šešėlis

Taigi, kaip jūs iš tikrųjų galite sukurti tik CSS pagrindą? Su. \ T langelis-šešėlis CSS nuosavybė. Dėžutės šešėlis puikiai tinka šiam darbui, nes tai yra perdanga, bet tamsi šešėlis, nukreiptas virš elemento?

Dėžutės šešėlis turi nuosavybės vertę įdėklas, kuris sukelia šešėlį dėžutės rėmo vidų.

Įdėtas dėžutės šešėlis, kurio šešėlis yra pusė arba daugiau nei pusė elemento pločio ir aukščio, sukuria šešėlį apima visa elementas.

 .langelis plotis: 200px; aukštis: 200px; dėžutės šešėlis: žalia 0 0 0 100px įdėklas;  

Paprastai perdangos turėti tam tikrą skaidrumą, taip pat turite pridėti jį į langelio šešėlį. Tai galima padaryti naudojant rgba () funkcija šešėlių spalvai.

The rgb dalis rgba, reiškia raudonos, žalios ir mėlynos spalvos kanalų reikšmes a reiškia alfa kanalas, kuris yra atsakingas už skaidrumą.

Alfa kanalui 1 vertė sukuria nepermatoma spalva, o 0 sukuria a visiškai skaidri spalva.

Priskirdami reikšmę tarp 0 ir 1 į lango šešėlio rgba spalvos vertės alfa kanalą, galite sukurti pusiau permatomą perdangą.

Sukurkite Demo kodą

Mūsų demonstracijoje bus rodomi įvairių pokemonų vaizdai ir pavadinimai. Čia mes tik sukursime kodą „Bulbasaur“, pirmąjį „demon“ pokemoną, kaip ir kiti padaryti tokiu pačiu būdu („Codepen“ taip pat galite juos patikrinti).

HTML

Dėl HTML reikia tik sukurti langelį prie kurio pridėsime visą kitą su CSS.

CSS

Toliau pateiktame CSS .pokemon elementai rodo pokemon vaizdus ir .pokemon :: po pseudo elementai turi pokemon pavadinimą.

Nuo langelis-šešėlis nuosavybė gali būti kelios vertės siekiant pateikti kelis šešėlius, be perdangos šešėlio, aš taip pat pridėjau kitus pilkos spalvos šešėlius .pokemon ir .pokemon: pakimba estetikos elementai.

 / * pokemon nuotraukos * / .pokemon plotis: 200px; aukštis: 200px; / * centro turinys naudojant „flex“ langelį * / ekraną: flex; pateisinti turinį: centras; derinti elementai: centras; / * perdangos * / dėžutės šešėlis: 0 0 0 100px intarpas, 0 0 5px pilkas; / * perėjimas į išorę * / perėjimas: langelis-šešėlis 1s;  / * pokemon pavadinimai * / .pokemon :: po plotis: 80%; aukštis: 80%; ekranas: blokas; šriftas: 16pt 'bookman old syle'; spalva: balta; siena: 2px kietas; teksto derinimas: centras; / * centro turinys naudojant „flex“ langelį * / ekraną: flex; pateisinti turinį: centras; derinti elementai: centras; / * pereiti iš perėjimo * / perėjimas: neskaidrumas 1s .5s;  / * atskleidžia pokemon nuotrauką ant hover * / .pokemon: hover perėjimas: box-shadow 1s; dėžutės šešėlis: 0 0 0 5px intarpas, 0 0 5px pilka, 0 0 10px pilka įdėklė;  / * paslėpti pokemon pavadinimą ant hover * / .pokemon: hover :: po perėjimas: neskaidrumas .5s; neskaidrumas: 0;  

Kai .pokemon elementai yra pasvirę, jų langelis-šešėlis turi pasikeisti, kad atskleistų ateitį.

Jūs galite pamatyti, kad .pokemon: pakimba selektorius gauna naują langelio šešėlį, kuris pašalina perdangą, ir .pokemon: hover :: po selektorius paslepia pokemon pavadinimą naudodamas neskaidrumas nuosavybė.

Galbūt jūs taip pat pastebėjote spalvų reikšmių nebuvimas į dangos dėžutės šešėlius .pokemon ir .pokemon: pakimba stiliaus taisyklės. Reikia nurodyti atskirų pokemonų dėžutės-šešėlio spalvą savo atskirose stiliaus taisyklėse, nes jie visi skiriasi vienas nuo kito.

Kaip langelis-šešėlis neturi jokio ilgalaikio turto, jūs negalite nustatyti savo šešėlių spalvos individualiai kažką panašaus, langelis-šešėlis; vietoj to mes naudojame spalva nuosavybė.

Pagal numatytuosius nustatymus, kai suteikiate vertę spalva nuosavybė, ši vertė yra taikomos pasienio, kontūro ir dėžutės šešėlių spalvoms taip pat. Taigi, galite tiesiog naudoti spalva nuosavybė, skirta spalvų pridėjimui prie langelio šešėlio.

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * spalvų reikšmė, naudojama dėžutės šešėlio spalvai * / spalva: rgba (71, 121, 94, 0,9);  #bulbasaur :: po / * pokemon pavadinimas * / turinys: „Bulbasaur“;  

Perdangos šešėlio spalva naudoja pirmiau minėtą rgba () veikia 0,9 alfa vertės, kad perdanga būtų skaidri.

Be perdangos dėžutės šešėlio spalvos, aukščiau minėta CSS taip pat prideda taisykles, kurios yra individualios kiekvienam pokemon - vaizdas kaip fono vaizdas ir pavadinimą.

Ir visa tai, mes pasiruošę tik su CSS tik spalvotais vaizdais. Pažvelkite į visų pokemonų kodą žemiau esančiame rašikliu.