Miten CSS-vain peittää vaikutuksen Box-Shadow -toimintoon

Sisällön peittokuvat ovat merkittävä osa modernia web-suunnittelua. He auttavat sinua piilottaa elementin verkkosivulla ja myöhemmin - käyttäjän hyväksynnällä - paljastaa se, ja näyttää ylimääräisiä tietoja tai ohjaimia, kuten sen takana olevia painikkeita.

Tyypillinen peite on osittain läpinäkyvä, kanssa kiinteä taustaväri (yleensä musta), ja siinä on tekstiä tai painikkeita, joiden avulla käyttäjät voivat nähdä tai olla vuorovaikutuksessa. Kun vuorovaikutus (napsautus tai leijuu) tapahtuu, päällekkäin poistuu ja paljastaa sisällön sen alapuolella.

Tässä artikkelissa tarkastellaan miten lisää värillisiä päällekkäisiä kuvia käyttämällä puhdasta CSS: ää. Alla on demon lopullinen tulos. Siirrä kuvat päällekkäin paljastaen pokemonit. Vaikka tämä viesti käsittelee kuvia, sen esittämä tekniikka voidaan soveltaa turvallisesti myös muihin sisältötyyppeihin (kuten tekstilohkoihin).

Vältä ylimääräisten HTML-elementtien lisäämistä

Peitteet luovat usein ylimääräisen HTML-elementin sijoittaminen kanssa sameus arvo on alle 1 suoraan peitettävän elementin yläpuolella. Ongelmana on se, että tämä tekniikka sisältää a ylimääräinen elementti (tai pseudoelementti).

Jos et ole HTML-kokoinen pedantti, ylimääräinen elementti peittoon ei todennäköisesti ole iso juttu, koska todennäköisesti se ei veroita minkään verkon kaistanleveyttä niin paljon. Kuitenkin ottaa erillinen elementtien ja niiden peittokuvien tyylisäännöt vahingoittavat edelleen CSS: n luettavuutta ja ylläpidettävyyttä.

Jos haluat säilyttää koodin kunnossa, eikä sekoita HTML-ääriviivojasi, on parempi vaihtoehto käyttää vain CSS-ratkaisua.

Luo päällekkäin box-varjo

Miten voit siis luoda CSS-vain peittokuvan? Sen avulla box-varjo CSS-ominaisuus. Laatikko-varjo on täydellinen tähän työhön, koska se on peitto tumma varjo heittää elementin päälle?

Ruutu-varjolla on nimellisarvo liite, joka aiheuttaa varjon laatikon kehyksen sisäänpäin.

Sisäänrakennettu laatikko-varjo, jonka varjo on puolet tai yli puolet elementin leveydestä ja korkeudesta, luo varjon kattaa koko elementti.

 .laatikko leveys: 200px; korkeus: 200px; box-shadow: vihreä 0 0 0 100px inset;  

Koska päällysteet yleensä jonkin verran avoimuutta, sinun täytyy lisätä se myös laatikon varjoihin. Tämä voidaan tehdä käyttämällä RGBA () toiminto varjostusvärille.

rgb osa rgba: sta edustaa punaista, vihreää ja sinistä värikanavan arvoa edustaa alfa-kanava, mikä on vastuussa avoimuudesta.

Alfa-kanavan arvo 1 luo läpinäkymätön väri, kun taas 0 luo a täysin läpinäkyvä väri.

Määrittämällä ruudun varjon rgba-väriarvon alfa-kanavaan arvon 0 ja 1 välillä luo puoliksi läpinäkyvä päällyste.

Luo demon koodi

Demo näyttää eri pokemonien kuvat ja nimet. Täällä luomme vain koodin Bulbasaurille, demon ensimmäiselle pokemonille, koska muut tehdään samalla tavalla (Codepenissa voit myös tarkistaa koodin heille).

HTML

HTML: n tarvitsemme vain luo laatikko johon lisäämme kaiken muun CSS: n kanssa.

CSS

Alla olevassa CSS: ssä .Pokemon elementit näyttävät Pokemon-kuvat ja .Pokemon :: jälkeen pseudoelementit kantavat pokemonin nimen.

Koska box-varjo omaisuus voi ottaa useita arvoja jotta tehdä useita varjoja, päällekkäisen varjon lisäksi lisäsin myös muita harmaasävyjä .Pokemon ja .Pokemon: hover estetiikan elementit.

 / * pokemon kuvia * / .pokemon leveys: 200px; korkeus: 200px; / * keskipisteenä käyttämällä flex-ruutua * / näyttö: flex; perustella sisältö: keskus; kohdistuskohteet: keskus; / * overlay * / box-shadow: 0 0 0 100px inset, 0 0 5px harmaa; / * hover-out-siirtymä * / siirtymä: box-shadow 1s;  / * pokemon nimet * / .pokemon :: jälkeen leveys: 80%; korkeus: 80%; näyttö: lohko; fontti: 16pt 'bookman old syle'; väri valkoinen; raja: 2px kiinteä; text-align: center; / * keskipisteenä käyttämällä flex-ruutua * / näyttö: flex; perustella sisältö: keskus; kohdistuskohteet: keskus; / * Siirrä siirtymä * / siirtymä: opasiteetti 1s .5s;  / * paljastaa pokemon-kuvan hover * / .pokemon: hover siirtyminen: box-shadow 1s; box-shadow: 0 0 0 5px inset, 0 0 5px harmaa, 0 0 10px harmaa sisäosa;  / * piilota pokemon nimi hover * / .pokemon: hover :: jälkeen siirtyminen: opasiteetti .5s; opasiteetti: 0;  

Kun .Pokemon elementit ovat leijuu, niiden ruutu-varjo on muutettava paljastamaan kuvan takana.

Näet, että .Pokemon: hover valitsin saa uuden laatikon varjon, joka poistaa peittokuvan, ja .Pokemon: hover :: jälkeen valitsin piilottaa Pokemonin nimen käyttämällä sameus omaisuus.

Olet ehkä myös huomannut väriarvojen puuttuminen Peiteluettelo ruutuun-varjoja .Pokemon ja .Pokemon: hover tyylisäännöt. Yksittäisten pokemonien päällystyslaatikko-varjo on määritettävä omassa erillisessä tyylissään, koska ne kaikki eroavat toisistaan.

Kuten box-varjo ei ole mitään pitkäikäistä omaisuutta, et voi määrittää sen varjoa erikseen jotain, laatikko-varjo-väri; sen sijaan - käytämme väri- omaisuus.

Oletuksena, kun annat arvon väri- omaisuus, tämä arvo on sovellettiin rajaa, ääriviivaa ja laatikkovärin värejä yhtä hyvin. Joten voit käyttää sitä väri- ominaisuus lisätä väriä laatikko-varjoon.

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * värin arvo, jota käytetään laatikon varjostusvärinä * / väri: rgba (71, 121, 94, 0,9);  #bulbasaur :: jälkeen / * pokemon nimi * / sisältö: 'Bulbasaur';  

Päällystevärin väri käyttää edellä mainittua RGBA () toimimaan 0,9: llä alfa-arvolla, jotta päällyste on läpinäkyvä.

Päällekkäisen laatikon varjon värin lisäksi yllä oleva CSS lisää myös säännöt, jotka ovat yksilöllisiä jokaiselle pokemonille - kuva kuten taustakuva ja nimi.

Ja se on kaikki, olemme valmiit CSS-värillisen kuvasi päälle. Katsokaa alla olevan kynän kaikkien koodien koodia.