Kuinka käyttää CSS box-shadow: 13 temppua ja esimerkkejä

CSS on kieli, jota kehittäjät käyttävät verkkosivun muotoiluun. Se hallitsee, kuinka HTML-elementit näytetään näytöllä, paperilla tai missä tahansa muussa muodossa. CSS tarjoaa täyden räätälöintivoiman muotoilla verkkosivua omaan kuvaan.

Voit muuttaa elementin taustaväriä, kirjasintyyliä, kirjasimen väriä, ruudun varjoa, marginaalia ja monia muita ominaisuuksia CSS: n avulla. Opastamme sinua tässä oppaassa käytetyistä box-shadow-sovelluksista.

Mikä on CSS box-shadow?

laatikko-varjo Ominaisuutta käytetään varjon lisäämiseen HTML-elementteihin. Se on yksi käytetyimmistä CSS-ominaisuuksista laatikoiden tai kuvien muotoiluun.

CSS-syntakse:

box-shadow: [vaakasiirtymä] [pystysuora siirtymä] [sumennussäde] [valinnainen hajautussäde] [väri];

1. vaakasuora siirtymä: Jos vaakasuuntainen siirtymä on positiivinen, varjo on laatikon oikealla puolella. Ja jos vaakasuuntainen siirtymä on negatiivinen, varjo on laatikon vasemmalla puolella.
2. pystysuuntainen siirtymä: Jos pystysuora siirtymä on positiivinen, varjo on laatikon alapuolella. Ja jos pystysuuntainen siirtymä on negatiivinen, varjo on laatikon yläpuolella.
   instagram viewer
3. sumennussäde: Mitä suurempi arvo, sitä epäselvämpi varjo on.
4. levityssäde: Se osoittaa kuinka paljon varjon tulisi levitä. Positiiviset arvot lisäävät varjon leviämistä, negatiiviset arvot vähentävät leviämistä.
5. Väri: Se tarkoittaa varjon väriä. Lisäksi se tukee mitä tahansa värimuotoa, kuten rgba, hex tai hsla.

Sumennus-, leviämis- ja väriparametrit ovat valinnaisia. Mielenkiintoisin osa box-shadow on, että voit erottaa box-shadow-arvot pilkuilla kuinka monta kertaa tahansa. Tätä voidaan käyttää luomaan useita reunuksia ja varjoja elementteihin.

1. Lisää himmeä laatikko-varjo laatikon vasemmalle, oikealle ja alareunalle

Voit lisätä erittäin himmeitä varjoja laatikon kolmelle puolelle (vasemmalle, oikealle ja alareunalle) käyttämällä seuraavaa HTML-kohdeelementin CSS-ruutua:

laatikko-varjo: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Tuotos:

2. Lisää himmeä laatikko-varjo kaikkiin sivuihin

Voit lisätä vaaleita varjoja laatikon kaikille puolille käyttämällä seuraavaa HTML-kohdeelementin CSS-ruutua:

laatikko-varjo: rgba (100, 100, 111, 0,2) 0px 7px 29px 0px;

Tuotos:

3. Lisää ohut laatikko-varjo alareunaan ja oikeaan sivuun

Voit lisätä varjoja ruudun alaosaan ja oikeaan reunaan käyttämällä seuraavaa HTML-kohdeelementtiä käyttävää box-shadow CSS: ää:

laatikko-varjo: rgba (0, 0, 0, 0,15) 1,95px 1,95px 2,6px;

Tuotos:

4. Lisää tumma laatikko-varjo All Sides -ikkunaan

Voit lisätä tumman varjon laatikon kaikille puolille käyttämällä seuraavaa HTML-kohdeelementin CSS-ruutua:

laatikko-varjo: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Tuotos:

5. Lisää Spread Shadow kaikille sivuille

Voit lisätä levitetyn varjon laatikon kaikille puolille käyttämällä seuraavaa komentoa kohde-HTML-elementilläsi:

laatikko-varjo: 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;

Tuotos:

6. Lisää ohut reunusvarjo kaikille sivuille

Voit lisätä yksinkertaisen reunavarjon ruudun kaikille puolille käyttämällä seuraavaa CSS: ää kohde-HTML-elementtisi kanssa:

laatikko-varjo: 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 lisäosa;

Tuotos:

7. Lisää laatikko-varjo ala- ja vasempaan sivuun

Voit lisätä varjon laatikon alaosaan ja vasempaan reunaan käyttämällä seuraavaa HTML-kohde-elementti-box-shadow CSS: ää:

laatikko-varjo: rgba (0, 0, 0, 0,1) -4px 9px 25px -6px;

Tuotos:

8. Lisää himmeä laatikko-varjo ylä- ja vasempaan sivuun, tumma varjo ala- ja oikeaan sivuun

Voit lisätä vaalean varjon laatikon ylä- ja vasempaan reunaan sekä tumman varjon laatikon alaosaan ja oikeaan reunaan käyttämällä seuraavaa CSS: ää kohde-HTML-elementilläsi:

laatikko-varjo: rgba (136, 165, 191, 0,48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;

Tuotos:

9. Lisää ohut, värillinen reunusvarjo kaikille sivuille

Voit lisätä yksinkertaisen värillisen reunavarjon laatikon kaikkiin puoliin käyttämällä seuraavaa HTML-kohdeelementin CSS-ruutua:

laatikko-varjo: rgba (3, 102, 214, 0,3) 0px 0px 0px 3px;

Tuotos:

10. Lisää useita värillisiä reunavarjoja laatikon alaosaan ja vasemmalle puolelle

Voit lisätä useita värillisiä reunavarjoja ruudun ala- ja vasempaan reunaan käyttämällä seuraavaa CSS: ää kohde-HTML-elementtisi kanssa:

laatikko-varjo: rgba (50, 50, 93, 0,25) 0px 30px 60px -12px -lisäosa, rgba (0, 0, 0, 0,3) 0px 18px 36px -18px -lisäosa;

Tuotos:

11. Lisää useita värillisiä reunavarjoja alareunaan

Voit lisätä useita värillisiä reunavarjoja laatikon alareunaan käyttämällä seuraavaa HTML-kohdeelementin CSS-ruutua:

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;

Tuotos:

12. Lisää useita värillisiä reunavarjoja laatikon alaosaan ja oikeaan reunaan

Voit lisätä useita värillisiä reunavarjoja laatikon alareunaan ja oikeaan reunaan käyttämällä seuraavaa CSS: ää kohde-HTML-elementtisi kanssa:

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) 20 kuvapistettä 20 kuvapistettä, rgba (240, 46, 170, 0,05) 25 kuvapistettä 25 kuvapistettä;

Tuotos:

13. Lisää vaaleat varjot vasemmalle ja oikealle puolelle, levitä varjo alareunaan

Voit lisätä vaaleita varjoja vasemmalle ja oikealle puolelle ja levittää varjoa laatikon alareunaan käyttämällä seuraavaa HTML-kohde-elementti-box-shadow CSS: ää:

laatikko-varjo: 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;

Tuotos:

Integroi CSS HTML-sivun kanssa

Nyt osaat lisätä hienoja laatikko-varjoefektejä CSS: n avulla, voit integroida ne helposti HTML-elementteihin monin tavoin.

Liittyvät: 11 hyödyllisiä työkaluja CSS-tiedostojen tarkistamiseen, puhdistamiseen ja optimointiin

Voit upottaa sen itse HTML-sivulle tai liittää sen erillisenä asiakirjana. CSS voidaan sisällyttää HTML-asiakirjaan kolmella tavalla:

Sisäinen CSS

Upotetut tai sisäiset tyylitaulukot lisätään HTML-asiakirjan osa käyttämällä elementti. Voit luoda minkä tahansa määrän HTML-asiakirjan elementit, mutta ne on suljettava ja tunnisteet. Tässä on esimerkki sisäisen CSS: n käytöstä HTML-asiakirjan kanssa:

Tyyli 4

Sisäinen CSS

Sisäistä CSS: ää käytetään lisäämään yksilöllisiä tyylisääntöjä HTML-elementtiin. Sitä voidaan käyttää HTML-elementin kanssa tyyli määritteen. Style-attribuutti sisältää CSS-ominaisuuksia muodossa "omaisuuden arvo" erotettu puolipisteellä (;).

Liittyvät: Opi luomaan kaksiulotteisia verkkosivustoja CSS-ruudukolla

Kaikkien CSS-ominaisuuksien on oltava yhdellä rivillä, ts. CSS-ominaisuuksien välillä ei saa olla rivinvaihtoja. Tässä on esimerkki sisäisen CSS: n käytöstä HTML-asiakirjan kanssa:

Tyyli 4

Ulkoinen CSS

Ulkoinen CSS on ihanteellisin tapa käyttää tyylejä HTML-dokumentteihin. Ulkoinen tyylitaulukko sisältää kaikki tyylisäännöt erillisessä asiakirjassa (.css-tiedosto), tämä asiakirja linkitetään sitten HTML-asiakirjaan käyttämällä tag. Tämä menetelmä on paras tapa määritellä ja soveltaa tyylejä HTML-asiakirjoihin, koska kyseinen HTML-tiedosto vaatii minimaalisia muutoksia merkinnöissä. Tässä on esimerkki ulkoisen CSS: n käytöstä HTML-asiakirjan kanssa:

Luo uusi CSS-tiedosto .css laajennus. Lisää nyt seuraava CSS-koodi kyseisen tiedoston sisään:

.heading {
tekstin tasaus: keskellä;
}
.image-box {
näyttö: lohko;
marginaali vasemmalla: auto;
marginaali-oikea: auto;
laatikko-varjo: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

Luo lopuksi HTML-asiakirja ja lisää seuraava koodi asiakirjan sisälle:

Tyyli 4

Huomaa, että CSS-tiedosto on linkitetty HTML-dokumenttiin ja href määritteen.

Kaikki edellä mainitut kolme menetelmää (sisäinen CSS, sisäänrakennettu CSS ja ulkoinen CSS) näyttävät saman

Tee verkkosivustasi tyylikäs CSS: n avulla

CSS: n avulla voit hallita verkkosivusi tyyliä täysin. Voit mukauttaa jokaisen HTML-elementin käyttämällä erilaisia ​​CSS-ominaisuuksia. Kehittäjät eri puolilta maailmaa osallistuvat CSS-päivityksiin, ja he ovat tehneet niin julkaisunsa jälkeen vuonna 1996. Sellaisena aloittelijoilla on paljon opittavaa!

Onneksi CSS on aloittelijaystävällinen. Voit saada erinomaisia ​​käytäntöjä aloittamalla muutamalla yksinkertaisella komennolla ja katsomalla, mihin luovuutesi vie sinut.

10 yksinkertaista CSS-koodiesimerkkiä, jotka voit oppia 10 minuutissa

Haluatko tietää enemmän CSS: n käytöstä? Kokeile aluksi näitä perus CSS-koodiesimerkkejä ja aseta ne sitten omille verkkosivuillesi.

Lue seuraava

Kirjailijasta