CSS-tekstivarjo: syntaksi, esimerkit ja paremmat keinot

CSS-tekstivarjo kirjoitetaan text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4): vaakasiirtymä, pystysiirtymä, valinnainen sumennussäde ja väri. Erottele useat varjot pilkuilla kerrostaaksesi ne. Se sopii teräviin siirtymäotsikoihin, pitkiin varjoihin ja jäljiteltyihin ääriviivoihin. Levottoman kuvan päällä olevan tekstin luettavuuteen se on huono työkalu. Paremmat vaihtoehdot löytyvät alempaa.

text-shadow-syntaksi

/* offset-x | offset-y | blur-radius | color */
h1 { text-shadow: 2px 3px 6px rgb(0 0 0 / 0.35); }

/* No blur: a hard copy of the letters */
h1 { text-shadow: 3px 3px 0 #f97316; }

/* Colour first is also valid */
h1 { text-shadow: #f97316 3px 3px; }

/* Several shadows: the first is drawn on top */
h1 { text-shadow: 2px 2px 0 #fde68a, 4px 4px 0 #f97316; }

/* Remove an inherited shadow */
h1 { text-shadow: none; }

Varjo maalataan tekstin taakse jokaisen merkin muotoisena, myös alleviivausten ja koristeiden. Se ei muuta asettelua: suuri siirtymä voi ulottua elementin ulkopuolelle ja peittää naapureita siirtämättä niitä. Jätä siis suurelle varjolle tilaa sisäisellä täytteellä.

Kopioimisen arvoiset tekstivarjoesimerkit

Kestävimmät tyylit ovat teräväreunaisia. Sumentamaton varjo näyttää harkitulta graafiselta valinnalta. Leipätekstin alla oleva pehmeä harmaa sumennus näyttää usein virheeltä.

/* 1. Subtle lift for large display type on a light page */
.lift { text-shadow: 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 3px rgb(15 23 42 / 0.18); }

/* 2. Retro offset in a second colour */
.retro { color: #1e1b4b; text-shadow: 4px 4px 0 #f472b6; }

/* 3. Double offset, poster style */
.double { color: #fff7ed; text-shadow: 3px 3px 0 #f97316, 6px 6px 0 #7c2d12; }

/* 4. Long shadow: many 1px steps */
.long {
  color: #fef3c7;
  text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #b45309,
    4px 4px 0 #b45309, 5px 5px 0 #b45309, 6px 6px 0 #b45309,
    7px 7px 0 #b45309, 8px 8px 0 #b45309;
}

/* 5. Pressed in: a light edge below dark text on a mid tone */
.pressed { color: #334155; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); }

Retro-siirtymät ja pitkät varjot näkyvät retro-tekstiefekteissä ja 3D-tekstiefekteissä. Siistiin ääriviivaan käytä -webkit-text-stroke-ominaisuutta ja asetusta paint-order: stroke fill vanhan neljän kulmavarjon tempun sijaan. Kulmavarjot jättävät kaariin aukkoja. Ääriviivateksti näyttää molemmat tavat.

Miksi pehmeä varjo korjaa luettavuutta heikosti

text-shadow lisätään usein tummana sumennuksena valkoisen tekstin taakse kuvan päällä, jotta ne erottuisivat toisistaan. Se auttaa hieman kirjainten reunoilla, muttei niiden sisäpuolella, jossa kuva näkyy yhä täydellä voimalla. Kun nostat sumennusta ja peittävyyttä tarpeeksi, jokaisen sanan ympärille syntyy tahra. Vaaleat ja tummat tekstinhohteet näyttävät vanhentuneilta eivätkä silti toimi kuvan kirkkaimmissa kohdissa.

Myös kontrastintarkistimet sivuuttavat varjot. Ne mittaavat tekstin väriä suhteessa taustaan. Vain varjonsa ansiosta erottuva otsikko saa tarkistuksessa huomautuksen hyvästä syystä. Raja-arvot löytyvät värikontrastista ja saavutettavuudesta.

Paremmat keinot tekstille kuvien ja liukuvärien päällä

Tummennus on liukuväri, joka tummentaa vain tekstin takana olevaa kuvan osaa ja häipyy muualla pois. Se pitää kuvan kirkkaana olennaisissa kohdissa ja antaa jokaiselle kirjaimelle saman rauhallisen pohjan. CSS-liukuvärikerrokset selittää kerrostamisen kokonaan.

.card {
  background-image:
    linear-gradient(to top, rgb(2 6 23 / 0.78), rgb(2 6 23 / 0) 70%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}

Muita luotettavia vaihtoehtoja: käytä kuvaan filter: brightness(0.75) sen omalla kerroksella, rajaa kuva niin, että sanat osuvat taivaaseen tai seinään yksityiskohtien sijaan, tai sijoita teksti tasaväriselle kaistalle. Teksti kuvan päällä käy jokaisen läpi esimerkkien avulla.

Juuri tämän työn Gradientlyn Markit tekevät itse: rauhallisin alue siirtyy sanojen taakse ja Automaattinen muste valitsee vaalean tai tumman tekstivärin riveittäin ilman varjoa, laatikkoa tai sumennusta. Kun haluat varjon koristeeksi korjauksen sijaan, tekstikäsittelyt Kohotettu, Kaksinkertainen ja Jälki tarjoavat siirtymätyylejä kirjoittamatta yhtäkään varjoa.

Tekstivarjo liukuväritekstissä

Liukuväriteksti tehdään background-clip: text-asetuksella ja läpinäkyvällä tekstivärillä. Jos lisäät text-shadow-varjon, se näkyy suoraan läpinäkyvien kirjainten läpi ja sotkee liukuväriä sisältä. Varjosta sen sijaan elementti: filter: drop-shadow(3px 3px 0 #1e1b4b) seuraa kirjainten maalattua muotoa ja sijoittuu niiden taakse. Itse tekniikka käsitellään CSS-liukuväritekstissä.

Suorituskyky ja animointi

Terävät varjot ovat kevyitä. Suuret sumennussäteet pitkissä tekstijaksoissa maksavat enemmän maalausaikaa, ja text-shadow-animointi maalaa tekstin uudelleen joka ruudulla. Kun haluat animoida otsikkoa, liikuta sitä transform-ominaisuudella ja pidä varjo paikallaan.