Razvoj / CSS

Generator CSS senke okvira

Vizuelno napravite CSS box-shadow: podesite pomeranje, zamućenje, širenje, boju, neprozirnost, inset i više slojeva, uz gotove postavke i pregled uživo, a zatim kopirajte CSS.

Generator CSS senke okvira: Svaki sloj postaje jedna senka u listi box-shadow: horizontalno i vertikalno pomeranje, poluprečnik zamućenja, širenje i boja zapisana kao rgb(), sa neprozirnošću nakon kose crte. Slojevi se iscrtavaju tako da je prvi na vrhu. Poluprečnik uglova, boju i pozadinu okvira za pregled možete promeniti tako da odgovaraju vašem dizajnu, a senka prati uglove baš kao na vašoj stranici. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija
Alatke za programere
Pokretanja
U vašem pregledaču
Trošak
Besplatno · bez registracije
Dostupnost
Spremno za upotrebu
Generator senke okviraLokalna obrada

U potpunosti radi u vašem pregledaču

Sloj 1
Polje za pregled

CSS

box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1),
  0px 2px 4px -2px rgb(0 0 0 / 0.1);

Vrednosti su pomak nadesno, pomak nadole, zamućenje, širenje i boja. Nekoliko tankih slojeva izgleda prirodnije od jedne jake senke; kasniji slojevi se iscrtavaju ispod ranijih.

Unapred podešene vrednosti

Visina

Sistemi dizajna koriste senke da pokažu koliko je nešto izdignuto iznad stranice: kartica u mirovanju ima malu, usku senku, a meni ili dijalog veću i mekšu. Nekoliko unapred definisanih nivoa, umesto drugačije senke svuda, čini interfejs ujednačenim.

Senke na tamnoj pozadini jedva se vide; tu istu ulogu može da ima svetlija boja površine ili tanka ivica. Uparite senke sa CSS gradijentom za dugmad i kartice.

Senke i performanse

Veliko zamućenje zahteva više resursa za iscrtavanje nego malo, što je važno kada se mnogo elemenata sa senkama istovremeno pomera ili animira. Da biste animirali senku pri prelasku pokazivača, glatkije je da pomoću neprovidnosti postepeno prikažete drugu, jaču senku na pseudo-elementu nego da u svakom frejmu menjate sam box-shadow.

Kako se koristi

  1. Počnite od gotove postavke ili podesite pomeranja, zamućenje, širenje i neprozirnost prvog sloja.
  2. Dodajte još slojeva za mekšu, realističniju senku ili uključite inset da biste senku postavili unutar okvira.
  3. Kopirajte deklaraciju box-shadow.

Privatnost i ograničenja

Sve se izvršava u vašem pregledaču; poslednja senka čuva se samo u ovom pregledaču.

Srodne alatke

CSS gradijentKonvertor bojaMinifikator CSS-aClip path

Često postavljana pitanja

Koja su četiri broja u box-shadow?

To su horizontalno pomeranje (pozitivna vrednost pomera senku udesno), vertikalno pomeranje (pozitivna vrednost pomera je nadole), poluprečnik zamućenja (veća vrednost daje mekšu senku i ne može biti negativna) i širenje (pozitivna vrednost čini senku većom od okvira, a negativna manjom). Boja se navodi na kraju.

Kako da senka izgleda prirodno?

Koristite malu neprozirnost, pomerite senku nadole kao da svetlost dolazi odozgo i kombinujte dva ili više slojeva: jedan mali i oštriji, blizu okvira, i drugi veći i mekši, dalje od njega. Blago negativno širenje sprečava da se jako zamućenje vidi sa bočnih strana.

Čemu služi inset?

Senka se iscrtava unutar okvira umesto spolja, pa okvir izgleda udubljeno. To je pogodno za polja za unos i pritisnute dugmadi.

Zašto se moja senka ne vidi na slici?

box-shadow se iscrtava oko okvira elementa, a ne oko oblika slike unutar njega. Za konturu transparentne PNG slike koristite CSS filter drop-shadow().

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban