CSS-tekstiefektigeneraattori
Kirjoita oma tekstisi ja esikatsele aitoa neonia, 3D-pursotusta, letterpressiä, ääriviivaa ja liukuväriefektiä CSS:llä suorana, parametrit lasketaan matematiikalla ja CSS-lohko on kopioitavissa.
🔒 Käsitelty kokonaan selaimessasi – mitään tähän kirjoittamaasi ei koskaan ladata.
Tulos
Useimmat CSS-tekstiefektigalleriat tarjoavat kiinteän esiasetuksen: yksi neon, yksi 3D-pursotus, ota tai jätä. Tämä generaattori rakentaa CSS:n sinun parametreistäsi, tekstiisi, jonka kirjoitat. Valitse neon, 3D-pursotus, letterpress/kohokuvio, ääriviiva tai liukuväri efektivalikosta, säädä efektin omat ohjaimet, niin live-esikatselu ja sen alla oleva kopioitava CSS-lohko päivittyvät jokaisella muutoksella.
3D-pursotusefekti on ymmärtämisen arvoinen: valitulle syvyydelle (pinottujen kerrosten määrälle) ja kulmalle kerros i siirtyy vaakasuunnassa i × cos(kulma) ja pystysuunnassa i × sin(kulma), laskettuna JavaScriptillä oikeilla trigonometrisilla funktioilla – ei luettu valmiiden kulmien hakutaulukosta. 45 asteessa vaakasuuntainen ja pystysuuntainen siirtymä ovat samat jokaiselle kerrokselle, koska 45°:n kosini ja sini ovat sama arvo; käännä kulmaliukusäädintä ja katso miten koko text-shadow-kerrospino kiertyy kirjainten ympärillä reaaliajassa, jokainen kerros hieman edellistä tummempana jäljittelemään valaistua 3D-pintaa.
Neon-efekti pinoaa neljä text-shadow-kerrosta, joiden sumennussäde kasvaa valitsemassasi värissä, ja siihen voi lisätä välkyntä-animaation: kytke se päälle, jolloin @keyframes-sääntö, jossa on satunnaistettu läpinäkyvyyskuvio, luodaan ja animoidaan livenä; sekoituspainikkeella voit arpoa kuvion uudelleen kirjoittamatta yhtäkään avainkuvaa käsin. Ääriviivateksti käyttää -webkit-text-stroke-ominaisuutta sitä tukevissa selaimissa, ja rehellisen 8-suuntaisen text-shadow-varapolun niille, jotka eivät tue – molemmat rivit tulevat kopioituun CSS:ään selityksen kera. Liukuväri leikkaa linear-gradientin tekstin muotoon background-clip: text -ominaisuudella, joka on nyt standardi ja laajasti tuettu, ja vanhempi -webkit--etuliitteinen rivi säilytetään vanhoja moottoreita varten.
Kaikki hahmonnetaan paikallisesti selaimessasi – mitään kirjoittamaasi tekstiä ei koskaan lähetetä minnekään. Kopioi valmis CSS-lohko, mukaan lukien @keyframes-sääntö kun efekti sellaisen tarvitsee, suoraan tyylitiedostoosi.