Kromiteksti: metallinen tekstitehoste ja taustat

Kromiteksti toimii, koska kiillotetulla metallilla ei juuri ole omaa väriä: se peilaa ympäristöään. Kiiltävän kirjaimen yläosassa näkyy vaalea taivas, keskellä terävä tumma horisontti ja alareunaa kohti taas vaaleneva maa. Yhdistä nämä kaistat yhdeksi liukuväriksi, jätä horisonttiin jyrkkä katkos ja rajaa täyttö paksuun tekstiin. Siinä on kromi. Tasainen harmaa häivytys, jota useimmat kokeilevat ensin, näyttää vain harmaalta.

Miten kromi heijastaa valoa

Kuvittele krominen auton puskuri ulkona. Yläkaari heijastaa taivasta, joten se on vaalea ja usein hieman sinertävä. Kun pinta kääntyy kohti maata, heijastus vaihtuu äkisti tummaan maisemaan. Tämä horisonttiviiva on tärkein yksittäinen yksityiskohta. Sen alapuolella maan heijastus vaalenee kaaren kääntyessä taas ylöspäin ja päättyy kirkkaaseen reunakiiltoon.

• Taivaskaista: vaalea ja viileä, vaalenee ylöspäin.
• Horisontti: jyrkkä askel vaaleasta tummaan hieman keskikohdan alapuolella. Ei pehmeää sekoitusta.
• Maakaista: horisontissa tumma, lämpenee tai vaalenee alaspäin.
• Reunakiilto: ohut kirkas viiva lähellä alareunaa.
• Ääriviiva: tumma reuna erottaa jokaisen metallikirjaimen taustasta.

Kopioitavat kromiliukuvärit

Sävytetyt versiot tekevät kromista kiinnostavan. Sininen taivas tuo mieleen klassisen auton tunnuksen; vaaleanpunainen ja violetti vievät kohti Y2K-ilmettä, jossa nestemäistä kromia käytettiin paljon. Y2K-estetiikka käsittelee tuota aikaa, ja hopealiukuväri tarjoaa pehmeämpiä satiinimetalleja, kun peilikromi on liikaa.

Kromiteksti CSS:llä

Menetelmä on sama kuin liukuväritekstissä: maalaa liukuväri elementin taustaksi, rajaa se kirjainten muotoihin ja tee tekstin täytöstä läpinäkyvä. Terävä siirretty varjo antaa kirjaimille painoa. Käytä filter-ominaisuutta text-shadow-ominaisuuden sijaan, jotta varjo asettuu rajatun liukuvärin taakse. Liukuväriteksti selittää menetelmän ja selaintuen tarkemmin.

.chrome {
  font-family: "Rubik Mono One", system-ui, sans-serif;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 1;
  color: #a9b4c2; /* fallback where clipping is unsupported */
  background: linear-gradient(
    180deg,
    #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%,
    #2a2e36 49%, #4a4f59 62%,
    #b9bec6 86%, #f4f6f8 92%, #7d838d 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #1b1e24;
  filter: drop-shadow(0 4px 0 #1b1e24);
}

Kromiteksti suunnitteluohjelmassa

1. 1

   Kirjoita ensin sana

   Kirjoita yksi lyhyt sana suurella ja paksulla otsikkofontilla. Muunna teksti poluiksi vain, jos ohjelmasi ei pysty täyttämään muokattavaa tekstiä liukuvärillä.

2. 2

   Lisää pystysuuntainen liukuväritäyttö

   Käytä yllä olevan klassisen kromin väripisteitä. Varmista, että liukuväri kulkee kirjainten yläreunasta alareunaan eikä koko piirtoalueen yli.

3. 3

   Terävöitä horisontti

   Vedä keskikohdan vaalea ja tumma väripiste lähes päällekkäin. Jos raja näyttää yhä pehmeältä, siirrä niitä lähemmäs.

4. 4

   Lisää reuna ja paino

   Lisää yhden tai kahden pikselin tumma ääriviiva ja sitten terävä varjo suoraan alaspäin. Jätä sumeat varjot ja ulkohehkut pois.

Kromiin sopivat fontit

Kromi tarvitsee pinta-alaa. Ohuisiin vetoihin ei mahdu taivasta, horisonttia ja maata, joten tehoste kutistuu harmaaksi viivaksi. Valitse paksu, leveä ja mieluiten pyöristetty tai viisteille sopiva fontti ja käytä sitä suurena.

Lisää vaihtoehtoja löydät otsikkofonteista, joissa paksut fontit on järjestetty tunnelman mukaan. Retro-tekstitehoste yhdistää kromin ääriviivoihin ja syvyyteen täydellistä 1980-luvun ilmettä varten.

Näin kromi näyttää uskottavalta

Käytä kromia yhdessä sanassa tai lyhyessä otsikossa, älä kokonaisessa kappaleessa. Se sopii albumikansiin, tapahtumajulisteisiin, fanituotteisiin, pelikanaviin ja nostalgisiin kampanjoihin. Levottomalla taustalla se katoaa, joten anna sille rauhallinen ja tummempi pinta.

Gradientlyn tekstikäsittelyt Kohotettu, Sisäviiva ja Käyrät antavat otsikkotekstille syvyyttä, kaiverretun viivan tai ääriviivan elävän Markin päällä. Ne sopivat metallisiin ilmeisiin. Mark pitää rauhallisimman alueensa sanojen takana, jotta kiiltävä otsikko ei taistele levottoman taustan kanssa. Jos haluat peilimetallin sijaan sateenkaaren kiiltoa, katso holografinen liukuväri.