Box Shadow generaator

Lohistage liugureid box-shadow kujundamiseks, lisage sügavuse saavutamiseks kihte ja kopeerige valmis CSS kohe.

Varju kihid
Kiht 1
CSS
Reguleerige liugureid varju kujundamiseks.

Iga vari renderdatakse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse.

KKK

Mida nihe, hajutus ja ulatus tegelikult juhivad?

Nihe (offset) liigutab varju vasakule/paremale ja üles/alla, hajutus (blur) pehmendab selle servi ning ulatus (spread) kasvatab või kahandab seda enne hajutamist. Negatiivne ulatus tõmbab varju sissepoole, mis on kasulik tiheda ja lähedase varju loomiseks.

Mida teeb valik „inset“?

Tavaline vari langeb elemendist väljapoole, nagu valgus tõstetud kaardi taga. Inset (seesmine vari) keerab selle hoopis sissepoole, mistõtku element näib sissevajutatud – mugav süvendatud sisestusväljade või vajutatud nuppude jaoks.

Miks kasutada mitut varjukihti?

Üksik vari mõjub teatud suurusest alates lamedalt. Tõeline sügavus saavutatakse tavaliselt kitsa tumeda varju ja pehme laiema varju kombineerimisel – lisage teine kiht ja häälestage mõlemat eraldi, et saavutada soovitud efekt.

Kirjutanud ja üle vaadanud BroBroGo toimetus.Viimati uuendatud:

CSS box-shadow omaduse parameetrid

Veebidisainis määrab box-shadow CSS-omadus elementidele varjud, mis aitavad luua sügavust, eraldatust ja hierarhiat. Varju olemust juhivad mitmed parameetrid, mida saab reaalajas reguleerida:

  • Horisontaalne nihe: Määrab varju nihkumise vasakule või paremale. Liuguri vahemik on -50px kuni 50px. Negatiivne väärtus viib varju elemendist vasakule, positiivne paremale.
  • Vertikaalne nihe: Määrab varju nihkumise üles või alla. Liuguri vahemik on -50px kuni 50px. Negatiivne väärtus viib varju elemendist ülespoole, positiivne allapoole.
  • Hajutus (Blur): Pehmendab varju servi. Liuguri vahemik on 0px kuni 100px. Väärtus 0px loob täiesti terava servaga varju, suuremad väärtused muudavad varju udusemaks ja hajutatumaks.
  • Ulatus: Kasvatab või kahandab varju enne hajutamise rakendamist. Liuguri vahemik on -50px kuni 50px. Positiivne väärtus laiendab varju igas suunas, samas kui negatiivne ulatus tõmbab varju sissepoole. Negatiivne väärtus on kasulik tiheda ja lähedase varju loomiseks.
  • Varju värv: Võimaldab valida varju tooni spetsiaalse värvivalija abil.
  • Läbipaistmatus: Reguleerib varju läbipaistvust, võimaldades muuta varju pehmeks ja märkamatuks või vastupidi tugevaks ja kontrastseks.

Seesmise ja välimise varju erinevus

Tavaline vari langeb elemendist väljapoole, jättes mulje, et element hõljub tausta kohal nagu tõstetud kaart. Kui aga sisse lülitada valik "Seesmine vari (inset)", muutub varju suund täielikult.

Seesmine vari (inset) keerab varju elemendi piiridest sissepoole. See muudab elemendi visuaalset taju, luues mulje, et element on sissevajutatud või süvendatud. Seda efekti kasutatakse sageli selliste elementide puhul nagu sissevajutatud nupud või süvendatud sisestusväljad, et anda kasutajale selget visuaalset tagasisidet elemendi oleku kohta.

Sügavuse saavutamine mitme varjukihi abil

Üksik vari võib suuremate mõõtmete puhul mõjuda lamedalt ja ebaloomulikult. Realistliku sügavuse ja pehmuse saavutamiseks kasutatakse veebidisainis sageli mitme varjukihi üksteise peale pinutamist.

Tööriist pre-renderdab viis kihti, millest esimene kiht on vaikimisi nähtav väärtustega 0 8 24 -4 ja 18% läbipaistvusega must, ning ülejäänud neli kihti on esialgu peidetud. Uue kihi lisamisel nupuga "Lisa kiht" luuakse uus vaikimisi väärtustega varjukiht. Tarbetuks muutunud kihte saab eemaldada nupuga "Eemalda kiht".

Mitme kihi kombineerimisel saab luua näiteks:

  • Kitsa ja tumedama varju vahetult elemendi piiri lähedale, mis defineerib elemendi kontuuri.
  • Laiema, pehmema ja suurema hajutusega varju, mis imiteerib hajutatud ümbritsevat valgust.

Kui kasutusel on mitu kihti, koondab tööriist need CSS-väljundis üheks reaks, eraldades eri kihtide väärtused üksteisest komadega.

Tööriista kasutamine ja andmetöötlus

Kõik liugurite muudatused – olgu selleks horisontaalne nihe, vertikaalne nihe, hajutus või ulatus – uuendavad genereeritavat CSS-koodi reaalajas. Valmis koodi saab kohe kopeerida ja oma projekti stiililehele lisada.

Privaatsus ja andmete turvalisus on tagatud kohaliku töötlusega. Iga vari renderdatakse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse, mis tähendab, et kogu disainiprotsess toimub täielikult teie seadmes.

Korduma kippuvad küsimused

Mida nihe, hajutus ja ulatus tegelikult juhivad?

Nihe (offset) liigutab varju vasakule/paremale ja üles/alla, hajutus (blur) pehmendab selle servi ning ulatus (spread) kasvatab või kahandab seda enne hajutamist. Negatiivne ulatus tõmbab varju sissepoole, mis on kasulik tiheda ja lähedase varju loomiseks.

Mida teeb valik „inset“?

Tavaline vari langeb elemendist väljapoole, nagu valgus tõstetud kaardi taga. Inset (seesmine vari) keerab selle hoopis sissepoole, mistõtku element näib sissevajutatud – mugav süvendatud sisestusväljade või vajutatud nuppude jaoks.

Miks kasutada mitut varjukihti?

Üksik vari mõjub teatud suurusest alates lamedalt. Tõeline sügavus saavutatakse tavaliselt kitsa tumeda varju ja pehme laiema varju kombineerimisel – lisage teine kiht ja häälestage mõlemat eraldi, et saavutada soovitud efekt.

Kuidas kopeerida genereeritud varju koodi?

Genereeritud CSS-kood kuvatakse reaalajas väljundis. Koodi saab oma veebiprojekti kopeerida, kasutades nuppu "Kopeeri CSS".

CSS Cubic Bezier generaatorLohistage kahte pidet üleminekukõvera kujundamiseks, vaadake punkti liikumist võrdluses ühtlase liikumisega ja kopeerige cubic-bezier() väärtus.Gradiendi generaatorLooge lineaarseid, radiaalseid või koonilisi gradiente, lisage värvipunkte ja määrake suund ning kopeerige CSS ühe klõpsuga.Border Radiuse generaatorÜmardage iga nurka liuguritega, kujundage orgaanilisi mulle elliptilise režiimiga ja kopeerige CSS kohe.Flexboxi generaatorSeadistage flex-konteiner ja selle elemendid visuaalsete juhtnuppudega, vaadake paigutuse reageerimist reaalajas ja kopeerige CSS ühe klõpsuga.CSS Gridi generaatorMäärake veerud ja read, lohistage üle lahtrite elementide paigutamiseks ning kopeerige griddi CSS koos sobiva HTML-iga ühe klõpsuga.CSS clamp() kalkulaatorSisestage suurus väikeste ja suurte ekraanide jaoks ning saate sujuvalt skaleeruva clamp() väärtuse fondi suuruste, paddingute, marginite või gapide jaoks.VärvikonverterTeisendage värve HEX, RGB, HSL, HSV, CMYK ja LAB vahel — muutke mistahes välja ja ülejäänud uuenevad reaalajas.CSS-i kujundaja ja minimeerijaTaandage sassis CSS-i, et seda oleks lihtne lugeda, või minimeerige seda avaldamiseks – turvalise režiimiga, mis ei muuda kunagi reeglite järjekorda.Kontrastsuse kontrollijaSisestage teksti- ja taustavärv, et näha WCAG kontrastsuse suhet ja seda, millised AA ja AAA tasemed on läbitud.