CSS Kohokuviotekstigeneraattori

Kohokuvio- ja kaiverrusefektit antavat otsikoille ja painikkeille hienovaraisen, kosketeltavan ilmeen käyttäen pelkkää hyvin säädettyä text-shadow-ominaisuutta. Tällä työkalulla kirjoitat tekstisi, valitset Kohotettu (ylös noussut) tai Kaiverrettu (uurrettu), säädät voimakkuutta, ja saat heti CSS-koodin sekä live-esikatselun.

Mikä tämä työkalu on?

Tämä työkalu yhdistää vaaleansävyisen ja tummasävyisen text-shadow'n, siirrettynä vastakkaisiin suuntiin, luodakseen illuusion kohotetusta (kohokuvio) tai kaiverretusta (uurrettu) tekstistä.

Vaihda Kohotettu- ja Kaiverrettu-tyylien välillä, ja säädä voimakkuusliukusäädintä hallitaksesi kuinka voimakas 3D-efekti näyttää.

Live-esikatselu päivittyy heti kirjoittaessasi tai säätäessäsi mitä tahansa asetusta, jotta voit hienosäätää efektiä ennen CSS:n kopiointia.

Miksi käyttää sitä?

Rakennat retro Windows 95 -tyylistä tai skeumorfista käyttöliittymäteemaa ja tarvitset sen klassisen "harmaaseen muoviin painetun" tarran ilmeen ilman varjosiirtymien käsin säätämistä kehitystyökaluissa.
Suunnittelet merkkiä tai saavutuskuvaketta ja haluat tekstin näyttävän leimatulta tai kaiverretulta metallimaiseen taustaan tasaisesti sen päällä lojumisen sijaan.
Suunnittelija antoi sinulle mockupin kohokuvio-otsikolla eikä CSS:ää — luo efekti tässä sen sijaan, että arvailisit varjoarvoja yrityksen ja erehdyksen kautta.
Haluat vanhan koulukunnan "kiveen kaiverretun" tai kirjapainoilmeen logolle tai hero-otsikolle ilman kuvankäsittelyohjelmaa tai SVG-suodatinta.
Prototyypitätä useita voimakkuustasoja rinnakkain nähdäksesi kuinka hienovarainen tai dramaattinen 3D-efektin pitäisi olla ennen lopullisen suunnitelman lukitsemista.
100% paikallinen: CSS luodaan kokonaan selaimessasi, mitään ei lähetetä palvelimelle.

Käyttöohje

Kirjoita teksti, jota haluat tyylitellä.
Valitse Kohotettu tai Kaiverrettu tyylivalitsimesta.
Säädä voimakkuusliukusäädintä ja valitse tausta- ja tekstiväri, joka sopii suunnitelmaasi.
Klikkaa "Kopioi" kopioidaksesi luodun CSS-koodin ja liitä se tyylitiedostoosi.

Esimerkki

Syöte

Teksti: "Kohokuvio", Tyyli: Kohotettu, Voimakkuus: 2

Tuloste

color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);

Luotu CSS asettaa tekstivärin, taustavärin ja kaksikerroksisen text-shadow'n, joka luo kohotetun tai kaiverretun efektin.

Miten efekti toimii

Kohokuvio- ja kaiverrusefektit rakentuvat kahdesta siirretystä text-shadow-kerroksesta vastakkaisilla vaaleilla ja tummilla väreillä.

Ominaisuus	Tarkoitus
Vaalea varjo (rgba(255,255,255,0.7))	Simuloi valonlähdettä, joka osuu tekstin toiseen reunaan
Tumma varjo (rgba(0,0,0,0.5))	Simuloi varjoa, joka lankeaa vastakkaiseen reunaan
Siirtymän suunta	Käänteinen Kohotetun ja Kaiverretun välillä 3D-illuusion kääntämiseksi
Voimakkuus	Hallitsee kuinka kauas vaalea ja tumma varjo siirtyvät tekstistä
Sopivat värit	Teksti- ja taustaväri asetettu lähelle toisiaan piilottamaan tasainen kontrasti

Missä kohokuvio- ja kaiverrusteksti toimii parhaiten

Osiootsikot ja tarrat tasavärisellä kortilla tai paneelilla, joissa hienovarainen 3D-efekti lisää tekstuuria kilpailematta sisällön kanssa.
Merkit, sinetit ja saavutuskuvakkeet, joissa leimattu tai kaiverrettu ilme vahvistaa virallisuuden tai ansaitun tunnetta.
Retro- tai skeumorfiset käyttöliittymäteemat (vanhan koulukunnan käyttöjärjestelmän ulkoasu, kohokuviopainikkeet), joissa efekti on osa suunnittelukieltä eikä kertaluontoinen tehoste.
Vältä sitä pienessä leipätekstissä tai pitkissä kappaleissa — efekti nojaa lähelle toisiaan tuotuun teksti/tausta-väriin, mikä heikentää tavallista luettavuutta pienissä koossa.

Aiheeseen liittyvät työkalut

Lisää CSS-generaattoreita löydät täältä.

→ CSS Glassmorphism-generaattori · Box Shadow -generaattori · Border Radius -generaattori

Usein kysytyt kysymykset

Mikä ero on Kohotetulla ja Kaiverretulla?

Kohotettu saa tekstin näyttämään nousevan ylös taustasta, vaalean varjon ollessa vasemmassa yläkulmassa ja tumman varjon oikeassa alakulmassa. Kaiverrettu kääntää tämän, saaden tekstin näyttämään kaiverretulta taustaan.

Miksi efekti näyttää parhaalta kun teksti- ja taustaväri ovat samankaltaisia?

Kohokuvio/kaiverrus-illuusio perustuu kokonaan varjojen valo- ja tummuuskohtiin, ei tekstin ja taustan väliseen kontrastiin — joten tekstivärin asettaminen lähelle (tai samaksi kuin) taustaväri antaa yleensä siisteimmän tuloksen.

Voinko käyttää tätä efektiä millä tahansa elementillä, ei vain tekstillä?

Tämän työkalun luoma text-shadow-ominaisuus koskee vain tekstiä. Vastaavaan efektiin muodoissa tai painikkeissa tarvitset vastaavan box-shadow-asetuksen sen sijaan.

Tallentaako tai seuraako tämä työkalu kirjoittamaani?

Ei. CSS luodaan kokonaan selaimessasi — mitään ei lähetetä tai tallenneta palvelimelle.

Toimiiko tämä kaikissa selaimissa?

Kyllä — text-shadow'lla on erinomainen tuki kaikissa moderneissa selaimissa, mukaan lukien Chrome, Firefox, Safari ja Edge.

Miksi kohokuvioefekti katoaa tai näyttää väärältä tummalla taustalla?

Vaalea varjokerros nojaa erottumaan vaaleammasta pinnasta — hyvin tummalla taustalla valkoinen valokohta voi pestä pois tai näyttää käänteiseltä odottamastasi. Kokeile vaihtaa teksti ja tausta keskisävyiseen harmaaseen, tai lisää vaalean varjon peittävyyttä, pitääksesi 3D-illuusion luettavana tummissa teemoissa.

Voinko animoida tai siirtää kohokuvioefektiä hoverissa?

Kyllä — text-shadow on animoitavissa CSS-siirtymällä, joten voit siirtyä sulavasti tasaisesta tilasta kohokuvioon (tai Kohotetun ja Kaiverretun voimakkuuksien välillä) :hover- tai :focus-tilassa. Kopioi luotu varjoarvo "hover"-tilaksesi ja yhdistä se transition: text-shadow 0.2s ease; -sääntöön perustason elementissä.

Vaikuttaako voimakkuusliukusäädin suorituskykyyn suurilla tekstimäärillä?

Ei — text-shadow on kevyt CSS-ominaisuus voimakkuudesta riippumatta, koska se on vain kaksi varjokerrosta, jotka lasketaan samalla tavalla riippumatta siitä onko siirtymä 1px vai 6px. Sitä on turvallista käyttää otsikoissa, painikkeissa tai leipätekstissä ilman renderöinnin suorituskykyhuolia.

Miten saan efektin näyttämään hyvältä mukautetulla fontilla oletuksen sijaan?

Kohokuvio/kaiverrus-illuusio näkyy yleensä selkeimmin lihavoiduissa, paksuviivaisissa fonteissa, koska varjosiirtymälle on enemmän pinta-alaa napata valoa ja varjoa. Ohuet tai kevyet fontit voivat saada efektin näyttämään himmeältä tai häiritsevältä — jos mukautettu fonttisi näyttää epäselvältä, kokeile raskaampaa font-weightia tai nosta voimakkuusliukusäädintä hieman kompensoidaksesi.

Voinko käyttää kahta eri väriä valkoisen/mustan sijaan vaaleaan ja tummaan varjoon?

Luotu CSS on lähtökohta, jota voit vapaasti muokata — vaihda rgba(255,255,255,...) ja rgba(0,0,0,...) -arvot mihin tahansa väripariin kopioituasi koodin, esimerkiksi lämpimän kultaisen valokohdan ja syvän ruskean varjon pronssilaatan näköiseksi oletetun harmaan metalliefektin sijaan.