CSS bakgrunnsmynsturgerð

Þetta tól býr til endurtekin bakgrunnsmynstur eingöngu með CSS-hallalitum — engar myndskrár þarf. Veldu punktamynstur, ská rendur, skákborð eða reitalínur, stilltu liti og millibil, og afritaðu background-image CSS kóðann beint í stílblaðið þitt.

Hvað er þetta verkfæri?

CSS getur teiknað endurtekin mynstur án nokkurra myndskráa með því að nota hallaliti — radial-gradient() og linear-gradient() — sem background-image, ásamt background-size sem er minni en einingin sjálf svo hallliturinn endurtaki sig í flísum. Punktamynstur nota repeating radial-gradient, rendur og skákborð nota endurtekna eða lagskipta linear-gradient(), og reitalínur nota tvær skarast linear-gradient() línur.

Þetta tól býr til þessar hallalitayfirlýsingar fyrir þig. Veldu mynsturgerð, stilltu mynsturlitinn, bakgrunnslitinn og millibilið, og fylgstu með lifandi forskoðuninni uppfærast — afritaðu svo nákvæman background-image og background-size CSS kóðann.

Heimild: CSS Images Module Level 3, W3C — skilgreinir repeating-linear-gradient() og repeating-radial-gradient(), föllin sem þessi mynstur eru byggð úr.

Af hverju að nota það?

Engar myndskrár, engar HTTP-beiðnir — mynstrið er hreint CSS og birtist samstundis í hvaða upplausn sem er, þar með talið retina/hárri DPI skjái.
Fullkomlega stillanlegur litur og millibil án þess að skrifa hallalitasetningarfræði handvirkt eða reikna flísastærðfræði.
Lifandi forskoðun sýnir nákvæmt endurtekið mynstur áður en nokkuð er afritað.
Skalar hreint þar sem þetta er vigurstærðfræði en ekki rastamynd — engin móða þegar einingin er stækkuð eða minnkuð.
Keyrir alfarið í vafranum þínum — ekkert sem þú stillir er sent neitt.
Ókeypis, engin skráning, virkar í síma.

Hvernig á að nota það

Veldu mynsturgerð: punktamynstur, ská rendur, skákborð eða reitalínur.
Veldu mynsturlitinn og bakgrunnslitinn sem sést á milli/á bak við mynsturform.
Stilltu stærðarrennuna til að gera punkta, rendur eða reitanetreitina stærri eða minni — þetta stjórnar líka hversu þétt mynstrið endurtekur sig.
Afritaðu myndaða CSS kóðann og límdu hann sem background-image (og background-size/background-position þar sem það birtist) á hvaða einingu sem er.

Dæmi

Inntak

Mynstur: punktamynstur · Litur: blár · Bakgrunnur: hvítt · Stærð: 24px

Úttak

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Klassískt ljóst punktamynstur sem oft er notað sem lágstemmdur kaflabakgrunnur eða áferð á spjaldi.

Hvernig hvert mynstur er byggt

Punktamynstur: radial-gradient() teiknar einn lítinn fylltan hring, og svo lætur background-size hann endurtaka sig sem flísalagt net af punktum.
Ská rendur: repeating-linear-gradient() í 45 gráðu horni skiptist á milli mynsturlitar og bakgrunnslitar með föstu millibili.
Skákborð: tvö skarast lög af linear-gradient() í 45 gráðum, hliðruð hvort frá öðru um hálfa flís, mynda víxlandi ljósa/dökka reiti.
Reitalínur: tvær þunnar linear-gradient() línur — ein lárétt, ein lóðrétt — flísalagðar með völdu millibili til að mynda reitanet, líkt og rúðustrikaður pappír.

Hvenær á að nota CSS mynstur í stað myndskráa

CSS hallalitamynstur hefur enga skráarstærð og enga HTTP-beiðni, svo það hleðst samstundis og lítur aldrei móðukennt út á hárri DPI skjáum, ólíkt raster PNG bakgrunnsflís. Það hentar fullkomlega fyrir lágstemmda áferð á bak við texta, kaflaskil, myndir fyrir tóm ástand, eða staðgengilsspjöld. Fyrir flókin myndskreytt eða ljósmyndamynstur er raunveruleg mynd samt rétta verkfærið — CSS hallalitir henta best fyrir einföld, rúmfræðileg, endurtekin form eins og þau sem hér eru.

Samsetning með öðrum CSS-áhrifum

Mynstur virka vel sem bakgrunnur á bak við glasáferð (glassmorphism) spjöld, þar sem móðan þarf eitthvað með sjónræna áferð á bak við sig til að vera sýnileg. Þau eiga líka náttúrulega vel við ávalar hornar á umgjörðareiningunni.

→ CSS Glassmorphism Generator · Border Radius Generator

Algengar spurningar

Þurfa þessi mynstur einhverjar myndskrár?

Nei. Sérhvert mynstur hér er búið til eingöngu með CSS-hallalitum sem background-image — engin PNG, SVG eða önnur skrá kemur við sögu, svo það er engin aukaleg HTTP-beiðni og engin hætta á móðu á hárri upplausn skjáum.

Get ég breytt stærð mynstursins?

Já — stærðarrennan stýrir background-size, sem ákveður hversu stór ein endurtekin flís af mynstrinu er. Minni stærð þjappar punktum, rendum eða reitanetreitum þéttar saman; stærri stærð dreifir þeim.

Af hverju notar skákborðsmynstrið tvo hallaliti?

Einn linear-gradient() getur aðeins skipst á litum í eina átt. Að leggja tvo 45 gráðu hallaliti hvorn ofan á annan, hliðraða hvorn frá öðrum um hálfa flís, er það sem myndar víxlandi ljósa/dökka reiti skákborðs — þetta er staðlaða tæknin fyrir skákborð sem eru eingöngu úr CSS.

Mun þetta mynstur líta skarpt út á retina/hárri DPI skjáum?

Já. Þar sem mynstrið er stærðfræðilegur hallalitur en ekki bitmyndaskrá, er það birt í hvaða upplausn sem skjárinn þarf, án upplausnarhækkunar eða móðu — ólíkt lítilli rastamyndaflís sem er teygð eða endurtekin við háa díladreifingu.

Get ég notað þessi mynstur sem bakgrunn fyrir alla síðuna?

Já — beittu myndaðri background-image, background-size og background-position (þar sem það á við) á body eða hvaða heilbreidda umgjörðareiningu sem er. Hafðu birtuskil í huga: ágengt, hábirtuskilamynstur á bak við megintexta getur skaðað læsileika, svo léttari/hófstilltari stillingar virka yfirleitt betur fyrir stór bakgrunnssvæði.