CSS-laatikon käyttäminen: 13 temppua ja esimerkkiä

CSS-laatikon käyttäminen: 13 temppua ja esimerkkiä

CSS on kieli, jota kehittäjät käyttävät verkkosivun muotoiluun. Se ohjaa HTML -elementtien näyttämistä näytöllä, paperilla tai muussa mediassa. CSS tarjoaa täyden mukautusvoiman verkkosivun muotoiluun omassa kuvassasi.





Voit muuttaa elementin taustaväriä, kirjasintyyliä, kirjasimen väriä, laatikon varjoa, marginaalia ja monia muita ominaisuuksia CSS: n avulla. Tässä oppaassa käymme läpi box-varjon tehokkaita käyttötapoja.



Mikä on CSS box-shadow?

The laatikko-varjo ominaisuutta käytetään varjon lisäämiseen HTML -elementteihin. Se on yksi yleisimmin käytetyistä CSS -ominaisuuksista laatikoiden tai kuvien muotoiluun.





CSS -syntaksi:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. vaakasuuntainen 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 pystysuuntainen siirtymä on positiivinen, varjo on laatikon alapuolella. Ja jos pystysuuntainen siirtymä on negatiivinen, varjo on laatikon yläpuolella.
  3. sumennuksen säde: Mitä suurempi arvo, sitä hämärämpi varjo on.
  4. leviämissäde: Se osoittaa, kuinka paljon varjon pitäisi levitä. Positiiviset arvot lisäävät varjon leviämistä, negatiiviset arvot vähentävät leviämistä.
  5. Väri: Se merkitsee varjon väriä. Se tukee myös kaikkia värimuotoja, kuten rgba, hex tai hsla.

Hämärtymis-, hajautus- ja väriparametrit ovat valinnaisia. Kiinnostavin osa box-shadowia on, että voit käyttää pilkkua erottaaksesi box-shadow-arvot kuinka monta kertaa tahansa. Tätä voidaan käyttää useiden reunojen ja varjojen luomiseen elementteihin.



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

Voit lisätä erittäin himmeitä varjoja laatikon kolmelle puolelle (vasemmalle, oikealle ja alareunaan) käyttämällä seuraavaa laatikon varjostusta CSS-koodia HTML-kohde-elementin kanssa:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Lähtö:



2. Lisää himmeä laatikko-varjo Kaikki puolet

Voit lisätä vaaleita varjoja laatikon kaikkiin puoliin käyttämällä seuraavaa laatikko-varjo-CSS: ää kohde-HTML-elementin kanssa:



box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Lähtö:

3. Lisää ohut laatikko-varjo ala- ja oikealle puolelle

Voit lisätä varjoja laatikon ala- ja oikeaan reunaan käyttämällä seuraavaa laatikko-varjo-CSS: ää HTML-kohde-elementin kanssa:

siirto Google -asemasta toiseen
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Lähtö:

4. Lisää tumma laatikko-varjo Kaikki puolet

Voit lisätä tumman varjon laatikon kaikkiin puoliin käyttämällä seuraavaa laatikko-varjo-CSS: ää kohde-HTML-elementin kanssa:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Lähtö:

5. Lisää Spread Shadow joka puolelle

Voit lisätä levitettävää varjoa laatikon kaikkiin puoliin käyttämällä seuraavaa komentoa HTML -kohde -elementin kanssa:

box-shadow: 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;

Lähtö:

6. Lisää ohut reunaviiva kaikkiin puoliin

Voit lisätä yksinkertaisen reunusvarjon laatikon kaikkiin puoliin käyttämällä seuraavaa CSS -tiedostoa HTML -kohde -elementin kanssa:

box-shadow: 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 inset;

Lähtö:

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

Voit lisätä varjon laatikon ala- ja vasempaan reunaan käyttämällä seuraavaa laatikko-varjo-CSS: ää HTML-kohde-elementin kanssa:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Lähtö:

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

Voit lisätä vaalean varjon laatikon ylä- ja vasempaan reunaan sekä tumman varjon laatikon ala- ja oikeaan reunaan käyttämällä seuraavaa CSS -koodia HTML -kohde -elementin kanssa:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Lähtö:

9. Lisää ohut, värillinen reunaviiva kaikkiin puoliin

Voit lisätä yksinkertaisen värillisen reunusvarjon laatikon kaikkiin puoliin käyttämällä seuraavaa laatikon varjon CSS: ää kohde-HTML-elementin kanssa:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Lähtö:

10. Lisää useita värillisiä reunusvarjoja laatikon ala- ja vasempaan reunaan

Voit lisätä useita värillisiä reunusvarjoja laatikon ala- ja vasempaan reunaan käyttämällä seuraavaa CSS -tiedostoa HTML -kohde -elementin kanssa:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Lähtö:

sovelluksia luokkahuoneessa

11. Lisää pohjaan useita värillisiä reunusvarjoja

Voit lisätä useita värillisiä reunusvarjoja laatikon alareunaan käyttämällä seuraavaa laatikon varjon CSS: ää HTML-kohde-elementin kanssa:

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;

Lähtö:

12. Lisää useita värillisiä reunusvarjoja laatikon ala- ja oikealle puolelle

Voit lisätä useita värillisiä reunusvarjoja laatikon ala- ja oikeaan reunaan käyttämällä seuraavaa CSS -tiedostoa HTML -kohde -elementin 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) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

Lähtö:

13. Lisää vaaleita varjoja vasemmalle ja oikealle puolelle, levitä varjoa pohjaan

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

box-shadow: 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;

Lähtö:

Integroi CSS HTML -sivun kanssa

Nyt tiedät kuinka lisätä viileitä laatikko-varjotehosteita CSS: n avulla, voit integroida ne helposti HTML-elementteihin monin tavoin.

Aiheeseen liittyviä: 11 Hyödyllisiä työkaluja CSS -tiedostojen tarkistamiseen, puhdistamiseen ja optimointiin

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

Sisäinen CSS

Upotetut tai sisäiset tyylisivut lisätään HTML -asiakirjan osassa käyttämällä elementti. Voit luoda minkä tahansa määrän elementtejä HTML -asiakirjassa, mutta ne on suljettava ja tunnisteita. Tässä on esimerkki sisäisen CSS: n käyttämisestä HTML -asiakirjan kanssa:





CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




Style 4





Sisäinen CSS

Inline CSS: ää käytetään ainutlaatuisten tyylisääntöjen lisäämiseen HTML -elementtiin. Sitä voidaan käyttää HTML -elementin kanssa tyyli attribuutti. Tyylimäärite sisältää CSS -ominaisuuksia muodossa 'omaisuuden arvo' erotettu puolipisteellä ( ; ).

Aiheeseen liittyviä: Opi rakentamaan kaksiulotteisia verkkosivustoja CSS-ruudukon avulla

Kaikkien CSS -ominaisuuksien on oltava yhdellä rivillä, ts. CSS -ominaisuuksien välillä ei saa olla rivinvaihtoja. Tässä on esimerkki siitä, miten upotettua CSS: ää käytetään HTML -asiakirjan kanssa:





CSS box-shadow



Style 4





Ulkoinen CSS

Ulkoinen CSS on ihanteellinen tapa soveltaa tyylejä HTML -asiakirjoihin. Ulkoinen tyylisivu sisältää kaikki tyylisäännöt erillisessä asiakirjassa (.css -tiedostossa), ja 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 merkintään. Tässä on esimerkki ulkoisen CSS: n käyttämisestä HTML -asiakirjan kanssa:

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

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

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

kuinka käyttää rohkeutta musiikin tekemiseen




CSS box-shadow




Style 4





Huomaa, että CSS -tiedosto on linkitetty HTML -asiakirjaan tunniste ja href attribuutti.

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

Tee verkkosivustasi tyylikäs CSS: n avulla

Käyttämällä CSS: ää voit hallita täysin verkkosivusi tyyliä. Voit muokata jokaista HTML -elementtiä käyttämällä erilaisia ​​CSS -ominaisuuksia. Kehittäjät ympäri maailmaa osallistuvat CSS -päivityksiin, ja he ovat tehneet niin sen julkaisemisen jälkeen vuonna 1996. Siten aloittelijoilla on paljon opittavaa!

Onneksi CSS on aloittelijaystävällinen. Voit harjoitella erinomaisesti aloittamalla muutamalla yksinkertaisella komennolla ja katsomalla, mihin luovuutesi vie sinut.

Jaa Jaa Tweet Sähköposti 10 yksinkertaista CSS -koodiesimerkkiä, jotka opit 10 minuutissa

Tarvitsetko apua taidon CSS kanssa? Kokeile aluksi näitä CSS -koodin perusesimerkkejä ja käytä niitä sitten omilla verkkosivuillasi.

Lue seuraava Liittyvät aiheet
  • Ohjelmointi
  • Web-suunnittelu
  • CSS
Kirjailijasta Yuvraj Chandra(60 artikkelia julkaistu)

Yuvraj on tietojenkäsittelytieteen perusopiskelija Delhin yliopistossa Intiassa. Hän on intohimoinen Full Stack Web -kehityksestä. Kun hän ei kirjoita, hän tutkii eri tekniikoiden syvyyttä.

Lisää Yuvraj Chandralta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi