CSS je poln možnosti za izboljšanje videza vaših spletnih mest; besedilo in sence okvirjev so glavni primeri. Ponujajo podobne rezultate kot sence v programski opremi za urejanje slik, kot je Photoshop.
Kako pa delujejo sence CSS? Potopimo se takoj.
Kako uporabljati CSS Box Shadow
Senčenje polja CSS lahko uporabite z eno vrstico CSS, ki vsebuje obseg do šestih vrednosti. Vrstni red vrednosti je ključnega pomena za delovanje vaše sence polja CSS in izgleda takole:
box-shadow: offset-x offset-y zameglitev razširi barvni vložek;Oglejmo si vsako vrednost po vrsti.
Položaj sence polja CSS
Vrednosti offset-x in offset-y nadzirata položaj sence okvirja. Vrednost offset-x predstavlja vodoravni položaj sence, medtem ko je offset-y navpični odmik.
polje-senca: 10px 10px;Pozitivne vrednosti povzročijo senco pod in desno od elementa.
Uporabite lahko tudi negativne vrednosti za h-odmik in v-odmik:
box-shadow: -10px -10px;Negativni h-odmik premakne senco v levo, negativni v-odmik pa jo premakne navzgor:
CSS Box Shadow Blur
Kot lahko vidite, dodajanje h-odmika in v-odmika vaši senci ustvari trdno senco brez peresa. Vrednost zameglitve zamegli vašo senco polja CSS in začne veljati, če podate tretjo vrednost:
polje-senca: 10px 10px 20px;Višje kot je število, ki ga dodate vrednosti zamegljenosti, bolj zamegljena bo senca polja CSS. Ta vrednost ne more biti negativna.
CSS Box Shadow Spread
Vrednost razpršenosti vam omogoča spreminjanje velikosti vaše sence, ne da bi spremenili njen položaj.
polje-senca: 10px 10px 20px 30px;Pozitivna vrednost razmika bo povečala vašo senco polja CSS, medtem ko jo bo negativna vrednost zmanjšala.
Barva sence polja CSS
Sence polja CSS privzeto uporabljajo barvo besedila elementa, vendar jo lahko preglasite tako, da dodate barvo:
box-shadow: 10px 10px 20px 10px #0000ff;Barva, ki jo uporabljate, mora biti v zakoniti barvni obliki CSS, kot je šestnajstiška koda, koda RGB ali vnaprej določena barva. Ti lahko spoznati hex kode in druge zakonske barvne možnosti CSS, preden začnete s sencami.
CSS Box Shadow Inset
Sence polja CSS so privzeto zunaj dodeljenega elementa. Z dodajanjem vložka v lastnost box-shadow lahko prikažete senco na notranji strani elementa.
box-shadow: 10px 10px 20px 10px #0000ff vložek;To je vnaprej določena besedilna vrednost; preprosto dodajte ali odstranite, da nastavite vrednost.
Kako uporabljati senco besedila CSS
Sence besedila CSS so kot sence polja, čeprav imajo manj vrednosti za spreminjanje. Sintaksa za senco besedila CSS izgleda takole:
text-shadow: offset-x offset-y barva polmera zamegljenosti;Toda kako te vrednote delujejo?
Položaj sence besedila CSS
Odmiki senčenja besedila CSS delujejo zelo podobno kot iste vrednosti senčenja polja:
senca besedila: 10px 10px;Pozitivne vrednosti bodo postavile senco pod in desno od besedila.
Negativne vrednosti delujejo ravno nasprotno, saj postavijo senco nad in levo od besedila.
senca besedila: -10px -10px;Mešate lahko negativne in pozitivne vrednosti, da boste senco besedila CSS popolnoma umestili.
Polmer zameglitve sence besedila CSS
Polmer zameglitve sence besedila CSS vam omogoča, da zameglite senco za besedilom.
senca besedila: 10px 10px 10px; Privzeta vrednost za to vrednost je 0 (brez zamegljenosti).
Barva sence besedila CSS
Privzeto se sence besedila CSS ujemajo z barvo besedila. Barvo besedila lahko spremenite tako, da ga dodate na konec lastnosti sence besedila CSS.
text-shadow: 10px 10px 10px #0000ff;Tako kot pri barvah za senčenje polja CSS morate tudi za to uporabiti zakonsko barvo CSS.
Primeri oblikovanja polja CSS in sence besedila
Ko boste razumeli osnove, lahko začnete eksperimentirati z uporabo polja CSS in besedilnih senc. Spodnje ideje bi vas morale navdihniti, da se domislite lastnih ustvarjalnih načinov za uporabo teh lastnosti CSS.
Dvobarvne obrobe z dvema sencama polja CSS
Elementu HTML lahko dodate več kot eno senco polja ali senco besedila. Če so med seboj vejice, lahko posamezni lastnosti dodate nove sence.
box-shadow: 30px 30px#0000ff, -30 slikovnih pik-30 slikovnih pik 0px#00ff00;Ta dvobarvna obroba je dober primer tega. Dve okvirni senci CSS z nasprotujočima si položajema in brez zameglitve/širjenja ustvarita odlično ustvarjalno obrobo.
Dvojne sence besedila CSS za dramatičen učinek
Podobno kot zgornja ideja lahko besedilu dodate in postavite več besedilnih senc za zanimive rezultate.
senca besedila: 35px 20px 4px temno siva, -35px -20px 4px temno siva;Ta primer prikazuje vrstico besedila s senco zgoraj in senco spodaj, oba imata barvne vrednosti, ki temeljijo na besedilu.
Večbarvna ozadja z vstavljenimi sencami okvirjev CSS
CSS je dovolj zmogljiv za ustvarjanje edinstvenih in zanimivih sredstev brez zunanjih datotek. Uporaba vstavljene sence polja CSS kot ozadja je odličen primer tega.
box-shadow: 20px 10px 10px 40px #000000 vstavljena, -50px -30px 8px 60px siva vstavljena, 30px 20px 6px 90px svetlo siva vstavljena;To polje ima belo ozadje, skupaj s tremi vstavljenimi sencami v različnih barvah. Sence se med seboj prekrivajo, da ustvarijo edinstveno ozadje.
Nadaljnja krepitev tega učinka je preprosta stvar dodajanje elegantnega preliva ozadja CSS svojemu elementu.
Sence okvirjev CSS in sence besedila za kreativno spletno oblikovanje
Okvir CSS in sence besedila so enostavni za uporabo, ko veste, kako z njimi delati. Zdaj imate orodja, ki jih potrebujete, da začnete delati na lastnih dizajnih, vendar morate še naprej raziskovati CSS, da izboljšate svoje sposobnosti.
