Varjon luominen CSS: llä

Vaikka suunnittelutrendit vaihtelevat joka vuosi, voit luottaa siihen, että käytät perusvarjotehosteita, kuten laatikko-varjo ja varjo edistääksesi positiivisesti verkkosivuston estetiikkaa. Voit käyttää varjot luodaksesi miellyttäviä, kauniisti renderöityjä tehosteita ilman, että ne näyttävät raikkailta.

Katsotaanpa tarkemmin CSS: ää varjo omaisuutta.

Mikä on CSS-varjo?

varjo ( ) on CSS-tehoste, joka näyttää varjon tietyn objektin muodon ympärillä. Tässä on CSS: n käyttöönoton syntaksi varjo.

Syntaksi:
suodatin: drop-shadow (offset-x offset-y sumennuksen säteen väri);

On olemassa laaja valikoima suodatintoiminnot mukaan lukien hämärtää( ), kirkkaus ( ), ja varjo ( ).

offset-x määrittää vaakaetäisyyden ja offset-y määrittää pystysuoran etäisyyden. Huomaa, että negatiiviset arvot sijoittavat varjon vasemmalle (offset-x) ja yli (offset-y) objekti.

Kaksi viimeistä parametria ovat valinnaisia. Voit määrittää varjon sumennussäteen pituudeksi. Oletuksena se on 0. Sinulla ei voi olla negatiivista sumennussädettä.

Varjon väri on määritetty muodossa. Jos et ole määrittänyt väriä, se seuraa värin arvoa väri- omaisuutta.

Milloin CSS-varjosta on hyötyä?

Saatat jo tietää sen laatikko-varjo hoitaa hommansa aika hyvin. Joten saatat ajatella, miksi tarvitsemme varjo ollenkaan? On olemassa lukuisia tapauksia, joissa varjo ( ) toiminto on hengenpelastaja. Katsotaanpa muutamia niistä:

Ei-suorakulmaiset muodot

Toisin kuin a laatikko-varjo, voit lisätä a varjo ei-suorakulmaisiin muotoihin. Meillä on esimerkiksi läpinäkyvä SVG tai PNG, jonka muoto ei ole suorakaiteen muotoinen – esimerkiksi tähti. Täällä itse objektia vastaavan varjon lisääminen voidaan suorittaa kummalla tahansa laatikko-varjo tai varjo. Harkitse molempia skenaarioita:

HTML

CSS

.star-img img {
näyttö: inline-block;
korkeus: 15 em;
leveys: 25em;
}
.box-shadow {
väri punainen;
laatikkovarjo: 0,60 em 0,60 em 0,2 em;
}
.drop-shadow {
suodatin: drop-shadow (0.60em 0.60em 0.2em);
}

Lähtö:

Kun verrataan molempia vaikutuksia, on ilmeistä, että a laatikko-varjo antaa suorakaiteen muotoisen varjon; sillä ei myöskään ole väliä, onko kuva läpinäkyvä vai onko sillä jo tausta. Toisaalta, varjo voit luoda varjon, joka mukautuu itse kuvan muotoon.

Rajoittavat tekijät ovat, että varjo ( ) toiminto hyväksyy kaikki tyypin parametrit paitsi upotettu avainsana ja levitän parametri.

Ryhmitetyt elementit

On useita tapauksia, joissa saatat joutua rakentamaan komponentteja limittämällä tiettyjä elementtejä. Jos käytät laatikko-varjo, joudut kohtaamaan ongelman yrittää heittää varjon oikealla tavalla. Näin se toimii ryhmitettäessä kuvaa ja tekstikomponenttia:

HTML

Elää hetkessä

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.

Perus CSS

body {
pehmuste: 5em 1em;
kirjasinperhe: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
'Lucida Sans Unicode', Geneve, Verdana, sans-serif;
}
h2 {
fontin koko: 2rem;
}
p {
fonttikoko: 0.8rem;
}
.parent-container {
näyttö: flex;
flex-suunta: pylväs;
korkeus: 17 rem;
leveys: 50 em;
}
.image-container img {
leveys: 15 em;
sijainti: absoluuttinen;
z-indeksi: 1;
alkuun: 2em;
vasen: 1,5 em;
}
.text-container {
väri: rgb (255, 236, 236);
taustaväri: rgb (141 0 35);
leveys: 30 rem;
pehmuste: 3rem;
kohdista-itse: flex-end;
asema: suhteellinen;
}

Käytä nyt laatikko-varjo ja varjo nähdäksesi eron.

.drop-shadow {
suodatin: drop-shadow (0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,5));
}
.laatikko,
.box img {
laatikkovarjo: 0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,3);
}

Lähtö:

Kuten näette, laatikko-varjo sovelletaan jokaiseen elementtiin erikseen, kun taas varjo ryhmittelee molemmat ja soveltaa varjoa.

Leikatut elementit

Voit käyttää leikepolku ominaisuus leikkaamaan tietyn alueen, joka määrittää, mitkä kuvan tai elementin osat tulee näyttää. The varjosuodatin antaa meille mahdollisuuden luoda a varjo leikatussa elementissä käyttämällä sitä kyseisen elementin yläosassa:

HTML

CSS

.parent-container {
suodatin: drop-shadow (0rem 0rem 1,5rem maroon);
}
.clipped-element {
leveys: 50 em;
korkeus: 50 em;
marginaali: 0 auto;
taustakuva: url (hymyilevä tyttö.jpg);
clip-path: ympyrä (50%);
taustan koko: kansi;
taustatoisto: ei toistoa;
}

Lähtö:

Olemme leikanneet 50 % kuvasta ympyränmuotoisella polulla. Siksi varjosuodatin käytetään vain kuvan näkyvään osaan. eikö olekin mahtavaa?

Rajoitukset ja erot

Kuten edellä keskustelimme, varjo ei tue levitän parametri. Tämä tarkoittaa, että ääriviivavaikutelman luominen ei olisi mahdollista käyttämällä varjo ( ) toimii, koska se kuolee kaikkialla. Lisäksi se tuottaa erilaisia ​​varjoefektejä laatikko-varjo ja teksti-varjo (samoilla parametreilla). Saatat tuntea, että erot laatikko-varjo ja varjo tiivistyä CSS-laatikkomalli. Toinen seuraa sitä, toinen ei. Tässä on esimerkki:

HTML

Jokainen MUO-artikkeli vie sinut askeleen lähemmäksi.


Jokainen MUO-artikkeli vie sinut askeleen lähemmäksi.



Jokainen MUO-artikkeli vie sinut askeleen lähemmäksi.

Perus CSS

body {
pehmuste: 5em 1em;
kirjasinperhe: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
'Lucida Sans Unicode', Geneve, Verdana, sans-serif;
}
.parent-container {
leveys: 72rem;
}
p {
fonttikoko: 3em;
kirjasintyyli: lihavoitu;
}

Varjoefektien käyttö

.drop-shadow {
suodatin: drop-shadow (0,5em 0,5em 0,1em #555);
}
.box-shadow {
box-shadow: 0,5em 0,5em 0,1em #555;
}
.text-shadow {
tekstivarjo: 0.5em 0.5em 0.1em #555;
}

Lähtö:

Voit nähdä, että laatikko-varjo antaa raskaamman, tummemman varjon kuin teksti-varjo ja varjo. Myös varjon sijoittelussa on pieni ero teksti-varjo ja varjo. Voit kuitenkin valita eri varjotehosteet tarpeidesi mukaan.

Selaimen tuki

The varjo ( ) toimintoa tuetaan kaikissa nykyaikaisissa selaimissa paitsi vanhemmissa selaimissa, kuten Internet Explorerissa. Vaikka se ei haittaisikaan vakavasti käyttökokemusta, voit lisätä ominaisuuskyselyn laatikko-varjo perääntyä.

Kokeile erilaisia ​​varjoefektejä

Suosio laatikko-varjo on varsin ilmeinen lukuisten käyttötapausten vuoksi. Kuitenkin varjo ( ) toiminto on erittäin vajaakäytössä. Toivomme, että kokeilet erilaisia ​​varjoefektejä ja yrität toteuttaa niitä varjo tulevissa projekteissasi.

Pseudotunnit lisäävät täysin uusia toimintoja CSS: ään ja henkilökohtaiseen verkkokehitysohjelmistoosi. Opi niistä lisää, jotta sinusta tulee ammattitaitoisempi ja tehokkaampi verkkokehittäjä.

Kuinka käyttää CSS-ruutuvarjoa: 13 temppua ja esimerkkiä

Vaaleat laatikot näyttävät tylsiltä. Piristä niitä CSS-ruutuvarjoefektillä!

Lue Seuraava

Kirjailijasta