Kako napraviti senku pomoću CSS-a

Iako se trendovi dizajna razlikuju svake godine, možete računati na upotrebu osnovnih efekata senki kao što su kutija-senka и drop-shadow da pozitivno doprinese estetici veb stranice. Можете користити padajuće senke da biste stvorili prijatne, lepo izvedene efekte, a da pritom ne ispadnu bezobrazni.

Pogledajmo bliže CSS drop-shadow својство.

Šta je CSS drop-shadow?

senka ( ) je CSS efekat koji prikazuje senku oko oblika određenog objekta. Evo sintakse za primenu CSS-a drop-shadow.

Sintaksa:
filter: drop-shadow (offset-x offset-y blur-radijus color);

Postoji širok spektar funkcije filtera укључујући zamućenje ( ), osvetljenost ( ), и senka ( ).

offset-x određuje horizontalno rastojanje i offset-y određuje vertikalno rastojanje. Imajte na umu da negativne vrednosti postavljaju senku levo (offset-x) и изнад (offset-y) објекат.

Poslednja dva parametra su opciona. Možete odrediti radijus zamućenja senke kao dužinu. Podrazumevano je postavljeno na 0. Ne možete imati negativan radijus zamućenja.

Boja senke je navedena kao. Ako niste naveli boju, ona prati vrednost boja својство.

Kada je CSS senka korisna?

Možda to već znate kutija-senka radi posao prilično dobro. Dakle, možda mislite, zašto nam je potrebno drop-shadow уопште? Brojni su slučajevi kada se senka ( ) funkcija je spas. Hajde da pogledamo neke od njih:

Nepravougaoni oblici

Za razliku od a kutija-senka, možete dodati a drop-shadow na nepravougaone oblike. Na primer, imamo providni SVG ili PNG sa nepravougaonim oblikom — na primer, zvezdu. Ovde se dodavanje senke koja odgovara samom objektu može završiti bilo kojim od njih kutija-senka ili drop-shadow. Razmotrite oba scenarija:

HTML

CSS

.star-img img {
displej: inline-block;
visina: 15em;
širina: 25em;
}
.box-shadow {
боја црвена;
box-shadow: 0.60em 0.60em 0.2em;
}
.drop-shadow {
filter: drop-shadow (0.60em 0.60em 0.2em);
}

Izlaz:

Kada se uporede oba efekta, očigledno je da a kutija-senka daje pravougaonu senku; takođe nije bitno da li je slika providna ili već ima pozadinu. С друге стране, drop-shadow omogućava vam da kreirate senku koja je u skladu sa oblikom same slike.

Ograničavajući faktori su da senka ( ) funkcija prihvata sve parametre tipa osim umetnuti ključna reč i ширење parametar.

Grupisani elementi

Postoji nekoliko slučajeva kada ćete možda morati da napravite komponente preklapanjem određenih elemenata. Ako koristite kutija-senka, suočićete se sa problemom pokušaja da bacite senku na pravi način. Evo kako to funkcioniše kada grupišete sliku i tekstualnu komponentu:

HTML

Живи у тренутку

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.

Osnovni CSS

telo {
padding: 5em 1em;
porodica fontova: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Ženeva, Verdana, sans-serif;
}
h2 {
font-size: 2rem;
}
p {
font-size: 0.8rem;
}
.parent-container {
displej: flex;
flex-direction: kolona;
visina: 17rem;
širina: 50em;
}
.image-container img {
širina: 15em;
pozicija: apsolutna;
z-indeks: 1;
top: 2em;
levo: 1.5em;
}
.text-container {
boja: rgb (255, 236, 236);
background-color: rgb (141 0 35);
širina: 30rem;
padding: 3rem;
align-self: flex-end;
položaj: relativan;
}

Sada, primenite kutija-senka и drop-shadow da vidi razliku.

.drop-shadow {
filter: drop-shadow (0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.5));
}
.box,
.box img {
box-shadow: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.3);
}

Izlaz:

Kao što vidite, kutija-senka primenjuje se na svaki element pojedinačno dok se drop-shadow grupiše oboje i primenjuje senku.

Isečeni elementi

Možete koristiti clip-path svojstvo da iseče određeni region koje određuje koji delovi slike ili elementa treba da budu prikazani. The drop-shadow filter omogućava nam da stvorimo a drop-shadow na isečenom elementu tako što ćete ga primeniti na roditelj tog elementa:

HTML

CSS

.parent-container {
filter: drop-shadow (0rem 0rem 1.5rem maroon);
}
.clipped-element {
širina: 50em;
visina: 50em;
margina: 0 auto;
background-image: url (smiling-girl.jpg);
clip-path: krug (50%);
veličina pozadine: korice;
background-repeat: bez ponavljanja;
}

Izlaz:

Odsekli smo 50% slike kružnom putanjom. Стога drop-shadow filter primenjuje se samo na vidljivi deo slike. Zar nije sjajno?

Ograničenja i razlike

Kao što smo gore govorili, drop-shadow ne podržava ширење parametar. To znači da stvaranje efekta obrisa ne bi bilo moguće korišćenjem senka ( ) funkcioniše jer se svuda ubija. Takođe, daje različite efekte senki od kutija-senka и tekst-senka (sa istim parametrima). Možda ćete osetiti da su razlike između kutija-senka и drop-shadow svodi se na CSS Box Model. Jedan ga prati dok drugi ne. Evo primera:

HTML

Svaki MUO članak će vas dovesti korak bliže.


Svaki MUO članak će vas dovesti korak bliže.



Svaki MUO članak će vas dovesti korak bliže.

Osnovni CSS

telo {
padding: 5em 1em;
porodica fontova: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Ženeva, Verdana, sans-serif;
}
.parent-container {
širina: 72rem;
}
p {
veličina fonta: 3em;
font-style: bold;
}

Primena efekata senki

.drop-shadow {
filter: drop-shadow (0.5em 0.5em 0.1em #555);
}
.box-shadow {
box-shadow: 0.5em 0.5em 0.1em #555;
}
.text-shadow {
text-shadow: 0.5em 0.5em 0.1em #555;
}

Izlaz:

Možete videti da je kutija-senka daje težu, tamniju senku od tekst-senka и drop-shadow. Takođe, postoji mala razlika u pozicioniranju senke između tekst-senka и drop-shadow. Ipak, možda ćete više voleti različite efekte senki u skladu sa vašim zahtevima.

Podrška pretraživača

The senka ( ) funkcija je podržana u svim modernim pretraživačima osim u starijim pretraživačima kao što je Internet Explorer. Iako to nije nešto što bi ozbiljno ometalo UX, možete da dodate upit za funkciju pomoću kutija-senka повући се.

Eksperimentišite sa različitim efektima senke

Popularnost od kutija-senka je sasvim očigledna zbog mnoštva slučajeva upotrebe. Међутим senka ( ) funkcija je veoma nedovoljno iskorišćena. Nadamo se da ćete eksperimentisati sa različitim efektima senki i pokušati da ih primenite drop-shadow u vašim budućim projektima.

Pseudo-klase dodaju potpuno novi opseg funkcionalnosti CSS-u i vašem ličnom repertoaru veb razvoja. Saznajte više o njima da biste postali iskusniji i efikasniji veb programeri.

Kako koristiti CSS box-shadow: 13 trikova i primera

Blage kutije izgledaju dosadno. Ulepšajte ih CSS efektom senke!

Read Next

О аутору