Varjo on tehoste, joka pudottaa tai lisää varjon valittujen HTML-elementtien taakse, kun ne hahmonnetaan verkkosivulla. Tämä vaikutus voidaan saavuttaa käyttämällä ' varjo () ' menetelmä CSS:n arvona' suodattaa '-omaisuutta tai käyttämällä ' laatikko-varjo ” omaisuutta. 'Box-shadow' -ominaisuutta käyttämällä visuaalinen parannus, käyttökokemus, painopiste ja fokus voidaan vetää tiettyyn kohdistettuun HTML-elementtiin.
Tämä opas esittelee prosessin varjoefektin tekemiseen käyttämällä box-shadow -ominaisuutta:
-
- Luo kiinteä varjo laatikkovarjo-ominaisuuden avulla
- Luo epäselvä varjo laatikkovarjo-ominaisuuden avulla
- Laajenna varjoaluetta
Kuinka tehdä varjoja CSS3:ssa käyttämällä ruutuvarjo-ominaisuutta?
' laatikko-varjo ” -ominaisuuden avulla kehittäjä voi luoda visuaalisen hierarkian osoittamalla elementtien suhteellisen sijainnin sivulla. Käyttämällä sitä web-sivujen luojat voivat luoda illuusion kohteista, jotka luovat varjoja pinnoille ja antavat elementeille interaktiivisemman tunnelman.
Syntaksi
'Box-shadow' -ominaisuudella on syntaksi:
laatikko-varjo: [ vaakasuuntainen siirtymä ] [ pystysuuntainen siirtymä ] [ sumennuksen säde ] [ leviämissäde ] [ väri ] ;
Selitys yllä olevassa syntaksissa käytetyistä termeistä:
-
- Aluksi ' vaakasuuntainen siirtymä ' hakee/ tallentaa X-akselin sijainnin ja ' negatiivinen ”-arvo asettaa varjon vasemmalle ja päinvastoin.
- ' pystysuuntainen siirtymä ' arvo tallentaa Y-akselin sijainnin, ' positiivinen ' arvo asettaa varjon alaspäin ja päinvastoin ' negatiivinen ”arvoa.
- Seuraavaksi ' sumennuksen säde ”-arvo nimestä alkaen asettaa varjon sumeuden.
- ' leviämissäde ”-arvo määrittää, kuinka paljon sädettä varjon tulee laajentua.
- ' väri ' määrittää varjon värin, se voi olla ' HSL ' tai ' RGB ”-muodossa.
Käydään nyt läpi pari esimerkkiä ymmärtääksemme paremmin:
Esimerkki 1: Käytä kiinteää varjoa käyttämällä ruutuvarjo-ominaisuutta
Kiinteän varjon määrittämiseksi vain suunnat ja varjon väri lisätään arvoksi ' laatikko-varjo ”omaisuus:
< tyyli >.boxShadowExample {
leveys: 210px;
reuna: 2px kiinteää maissisilkkiä;
korkeus: 210px;
taustaväri: #f0f0f0;
laatikkovarjo: 10px 10px metsänvihreä;
}
tyyli >
Yllä olevassa koodissa:
-
- Ensin valitaan HTML-elementti, jonka luokka on ' boxShadowExample ”. Ja arvo ' 210 pikseliä ' toimitetaan ' korkeus ' ja ' leveys ” ominaisuuksia. Käytä myös ' rajaa ' ja ' taustaväri ” ominaisuuksia parempaa visualisointia varten.
- Aseta seuraavaksi arvo 10px 10px metsänvihreä ' kohtaan ' laatikko-varjo ”CSS-ominaisuus. ' 10px ” on vaaka- ja pystypoikkeama, joka määrittää paikan, johon varjon tulee levitä. Ja ' metsänvihreä ”on varjon väri.
Kokoamisen jälkeen verkkosivu näyttää tältä:
Tulos vahvistaa, että kiinteän tyyppinen varjo on sijoitettu käyttämällä box-shadow -ominaisuutta.
Esimerkki 2: Käytä epäselvää varjoa käyttämällä ruutuvarjo-ominaisuutta
Jotta jo lisätty varjo tulee epäselväksi, lisätään yksi numeerinen arvo ennen väriä ' laatikko-varjo ” omaisuutta. Käy alla päivitetyssä koodissa:
< tyyli >.boxShadowExample {
leveys: 210px;
reuna: 2px kiinteää maissisilkkiä;
korkeus: 210px;
taustaväri: whitesmoke;
laatikkovarjo: 10px 10px 15px metsänvihreä;
}
tyyli >
Yllä olevan koodin mukaan varjo on nyt ' 15 kuvapistettä ” hämärtynyt. Kokoamisvaiheen päätyttyä verkkosivu näyttää tältä:
Yllä oleva kuva osoittaa, että varjo on nyt epäselvä.
Esimerkki 3: Varjoalueen laajentaminen
Hajautusarvo annetaan ' laatikko-varjo ” kiinteistö varjon alueen laajentamiseen. Eron arvon on oltava numeerisessa muodossa. Kuten alla olevassa koodinpätkässä, varjoalue on laajennettu muotoon ' 20px ':
< tyyli >.boxShadowExample {
leveys: 210px;
reuna: 2px kiinteää maissisilkkiä;
korkeus: 210px;
taustaväri: whitesmoke;
laatikkovarjo: 10px 10px 15px 20px metsänvihreä;
}
tyyli >
Suorituksen jälkeen varjo näyttää nyt tältä:
Kuten näette, varjon aluetta on nyt kasvatettu 20 pikselillä.
Johtopäätös
' laatikko-varjo 'kiinteistöä käytetään '' varjo ” vaikutus valittuihin HTML-elementteihin. ' varjo 'omaisuus hyväksyy viisi arvoa, ' vaakasuuntainen siirtymä ”, “ pystysuuntainen siirtymä ”, “ sumennuksen säde ”, “ leviämissäde ' ja ' väri ”. 'Vaakasuuntainen siirtymä' ja 'pystysiirtymä' määrittävät varjon mitat, josta varjon tulee ilmestyä. 'Bur radius' -arvo tekee varjosta epäselvän ja 'levityssäde' -arvo laajentaa varjon aluetta.