3D-tekstitehoste: tyylikkäät kohotetut kirjaimet

3D-tekstitehoste tekee litteistä kirjaimista kiinteän näköisiä lisäämällä sivut. Jokainen kirjain näyttää kuin palasta leikatulta ja hieman vinosta kulmasta nähdyltä. Tyylikäs toteutus käyttää paksua fonttia, noin 5-10 prosentin syvyyttä kirjaimen korkeudesta, yhtenäistä suuntaa ja taustan tummemmasta sävystä otettuja sivuvärejä. Huono toteutus yhdistää liukuvärejä, kiiltäviä korostuksia, pitkiä syvyyksiä ja useita suuntia. Pidä ratkaisu yksinkertaisena, niin kohotettu teksti näyttää vakuuttavalta kyltiltä.

Mikä tekee kohotetusta tekstistä tyylikkään tai halvan näköisen

Kohotuksella on pitkä historia käsin maalatuissa kylteissä, sirkusjulisteissa ja 1970-luvun levynkansissa. Siksi se tuntuu lämpimältä ja hieman nostalgiselta. Hyödynnä sitä kahviloissa, jäätelötuotteissa, lastenbrändeissä, musiikissa ja tapahtumissa. Rauhalliselle, pelkistetylle brändille se on yleensä väärä ilmaisu. Tekstitehosteet auttaa löytämään sopivan vaihtoehdon.

Syvyyden, suunnan ja värin valinta

Syvyys

Sivujen pitää olla lyhyemmät kuin kirjainten viivat ovat leveitä. Kun otsikon koko on 160 px, 8-16 px:n syvyys näyttää kiinteältä. 40 px alkaa muistuttaa pitkää varjoa, joka on eri tyyli. Pieni teksti ei kestä syvyyttä lainkaan, joten käytä kohotusta vain otsikkokoossa.

Suunta

Valitse yksi suunta ja pidä se samana kaikissa suunnitelmissa. Alas ja oikealle tuntuu luontevimmalta, koska tulkitsemme valon yleensä tulevan ylhäältä vasemmalta. Suoraan alas näyttää pinotuilta palikoilta. Ylös ja vasemmalle on epätavallinen suunta. Se voi toimia yksittäisessä viestissä, mutta alkaa nopeasti rasittaa.

Väri

Kolme sävyä riittää: kirjaimen etupinta, sivu ja tausta. Etupinnan pitää erottua taustasta vahvasti. Sivun sävy asettuu niiden väliin ja on yleensä taustan tai etupinnan tumma sävy. Taustasta otettu väri saa kohotuksen näyttämään saman valon valaisemalta.

3D-tekstitehosteen tekeminen CSS:llä

CSS:ssä ei ole kohotusominaisuutta, mutta pinotut varjot hoitavat tehtävän. Jokainen text-shadow-kerros on yhtenäinen kopio kirjaimista, jota siirretään yhden pikselin verran kauemmas ilman sumennusta. Kun kerroksia on riittävästi, kopiot yhdistyvät kiinteiksi sivuiksi. Viimeinen, pehmeämpi varjo niiden alla sitoo kirjaimet sivuun.

.extruded {
  font-family: "Archivo Black", system-ui, sans-serif; /* load it from Google Fonts */
  font-size: 10rem;
  line-height: 1;
  color: #fff1d6;
  text-shadow:
    1px 1px 0 #c2410c,
    2px 2px 0 #c2410c,
    3px 3px 0 #c2410c,
    4px 4px 0 #c2410c,
    5px 5px 0 #c2410c,
    6px 6px 0 #c2410c,
    7px 7px 0 #c2410c,
    8px 8px 0 #c2410c,
    10px 12px 10px rgb(67 20 7 / 0.35);
}

Kymmenien kerrosten kirjoittaminen käsin on työlästä. Muutama JavaScript-rivi tuottaa listan millä tahansa syvyydellä, suunnalla ja värillä. Voit liittää sen tyylitiedostoosi.

// Build a text-shadow value for an extrusion
function extrude(depth, color, dx = 1, dy = 1) {
  const layers = [];
  for (let i = 1; i <= depth; i++) {
    layers.push(`${i * dx}px ${i * dy}px 0 ${color}`);
  }
  return layers.join(", ");
}

console.log(extrude(12, "#1e3a8a"));        // down and right
console.log(extrude(10, "#1e3a8a", 0, 1));  // straight down

Pidä verkkosivun kohotetut otsikot oikeana tekstinä. Silloin ne löytyvät haulla, ovat valittavissa ja toimivat ruudunlukijoissa. Varjot eivät muuta kirjaimen ja taustan mitattua kontrastia, joten varmista etupinnan värin riittävyys yksinään. Jos haluat kevyemmän graafisen version, tekstivarjot käsittelee yksittäistä terävää varjoa ilman kerroksia. Aito 3D valoineen ja kiertoineen kuuluu WebGL:ään, jota varjostimien liukuvärit esittelee.

Kohotetut kirjaimet vaihe vaiheelta

1. 1

   Valitse kahdesta neljään sanaa

   Liikkeen nimi, yksittäinen tarjous tai tapahtuman otsikko. Kohotus tarvitsee tilaa ympärilleen.

2. 2

   Käytä paksua fonttia

   Erittäin lihava groteski, slab serif tai pehmeä retroantiikva. Retrofontit ehdottaa sopivan lämpimiä vaihtoehtoja.

3. 3

   Valitse etupinnan, sivun ja taustan värit

   Vahva kontrasti etupinnan ja taustan välille. Sivulle taustan tummempi sävy.

4. 4

   Lisää syvyyttä yhteen suuntaan

   Aloita noin 6 prosentista kirjaimen korkeudesta, alas ja oikealle. Lisää syvyyttä vain, jos teksti näyttää yhä litteältä.

5. 5

   Pidä kaikki muu litteänä

   Tiedot, päivämäärät ja hinnat tavallisella tasavärisellä groteskilla ilman tehostetta.

Kohotettu teksti Gradientlyssä

Kohotettu on yksi Gradientlyn tekstikäsittelyistä. Se antaa mille tahansa Studion tekstille kiinteän syvyyden alas ja oikealle. Sivut piirretään Markin omilla väreillä, ja syvyyttä säädetään säätimellä, joten kerroksia ei tarvitse pinota. Taustan Mark siirtää rauhallisimman alueensa sanojen taakse. Kohotetut kirjaimet pysyvät luettavina, vaikka tausta liikkuu kuvan halki. Ääriviivateksti ja muut käsittelyt ovat samassa valikossa, jos kohotus tuntuu viestiin liian voimakkaalta.