⭐ 0
🔍
Teksti Kuva PDF & Docs Ääni Musiikki Elektroniikka Aika Apuohjelmat Validaattorit Esoteerinen Pelit

CSS-tekstitehostegeneraattori

Kirjoita oma tekstisi ja esikatsele todellisia neonhehkuisia, 3D-pursotettuja, kohopainoisia, ääriviivattuja ja gradienttitäytteisiä CSS-tehosteita livenä oikean matematiikan ja kopioitavan CSS-lohkon laskemilla parametreilla.

Käsitellään... 0%

Tulos

Useimmat CSS-tekstitehostegalleriat antavat sinulle kiinteän esiasetuksen: yksi neonhehku, yksi 3D-ekstruusio, ota tai jätä. Tämä generaattori rakentaa CSS:n parametreistasi sen sijaan, että kirjoitat tekstin. Valitse tehostevalinnasta neonhehku, 3D-ekstrudointi, kohopaino/kohokuvio, ääriviivat tai gradienttitäyttö, säädä tehosteen omia säätimiä ja live-esikatselu sekä sen alla oleva kopioitava CSS-lohko päivittyvät jokaisen muutoksen yhteydessä.

3D-ekstrudointitehoste on se, joka kannattaa ymmärtää: valitulla syvyydellä (pinottujen kerrosten lukumäärällä) ja kulmalla tasoa i siirretään i × cos (kulma) vaakasuunnassa ja i × sin (kulma) pystysuorassa, lasketaan JavaScriptissä todellisilla trigonometrisilla funktioilla – ei lueta esiasetettujen kulmien hakutaulukosta. 45 asteen kulmassa vaaka- ja pystysiirtymät ovat yhtä suuret jokaisessa tasossa, koska 45°:n kosini ja sini ovat samat arvot; käännä kulman liukusäädintä ja katso, kuinka koko pino "tekstivarjo"-kerroksia heiluu kirjainten ympärillä reaaliajassa. Jokainen kerros on tummunut hieman edellistä enemmän, mikä tekee valaistuista 3D-kasvoista.

Neon glow pinoaa neljä "tekstivarjo" -kerrosta, joiden sumennussäde on kasvanut valitsemassasi värissä, valinnaisella välkynällä: ota se käyttöön, jolloin @keyframes-sääntö, jossa on satunnainen läpinäkyvyyden laskujen sarja, luodaan ja animoidaan livenä, ja sekoituspainikkeen avulla voit rullata kuviota uudelleen kirjoittamatta avainkehystä käsin. Ääriviivattu teksti käyttää "-webkit-text-stroke" sitä tukeville selaimille sekä rehellistä 8-suuntaista "text-shadow" -varavaihtoehtoa niille, jotka eivät sitä tue. Molemmat rivit toimitetaan kopioidussa CSS:ssä, ja niissä on huomautus miksi. Liukuväritäyttö leikkaa "lineaarisen liukuvärin" tekstin muotoon "background-clip: text" -ominaisuuden avulla, joka on nyt vakioominaisuus, jolla on laaja tuki, ja säilyttää vanhan "-webkit-"-etuliiteisen rivin vanhoille koneille.

Kaikki hahmontuu paikallisesti selaimessasi – kirjoittamaasi tekstiä ei lähetetä koskaan minnekään. Kopioi valmis CSS-lohko, mukaan lukien @keyframes-sääntö, kun tehoste tarvitsee sellaisen, suoraan tyylitaulukkoosi.

🛡️
Suoritetaan selaimessa

Tiedostosi ja syötteesi eivät koskaan poistu tältä laitteelta. Käsittely toimii täysin offline-tilassa. 100 % turvallinen.

Hyväksytyt muodot ja säännöt

  • Viisi todellista tehostetta – neonhehku, 3D-ekstrudointi, kohopaino/kohokuvio, ääriviivat ja gradienttitäyttö – jokaisella on omat parametrisäätimet (värit, syvyys-/kulmaliukusäätimet, gradientin pysäyttimet).
  • Neon glow sisältää valinnaisen välkkymisen animaation, jossa on satunnainen @keyframes-opasiteettikuvio, jonka voit sekoittaa uudelleen koskematta CSS:ään käsin.
  • 3D-ekstrudoinnin avulla voit vetää syvyyttä (kerrosten lukumäärää) ja kulmaa itsenäisesti; jokaisen kerroksen pikselipoikkeama ja asteittain tummemmat sävyt lasketaan uudelleen livenä.

Tärkeimmät edut

✓ 3D-pursotussyvyys lasketaan todellisesta trigonometriasta – kunkin kerroksen siirtymä on cos(kulma) ja sin(kulma) kertaa sen etäisyys – joten kulman muuttaminen pyörittää koko pursotusta täsmälleen samalla tavalla kuin todelliset 3D-kirjaimet.
✓ Jokainen tehoste esikatselee kirjoittamaasi tekstiä reaaliajassa, joten voit arvioida luettavuuden ja kontrastin ennen kuin kopioit mitään.
✓ Kopioitavissa oleva tulos pysyy rehellisenä selaimen tuen suhteen: ääriviiva- ja liukuvärintäytön tehosteet toimittavat sekä standardeihin perustuvan vararivin WebKit-kohtaisen ominaisuuden rinnalle, jossa selitetään miksi.

Käyttötapaukset

  • • Etsi neonkyltti, etsi aloitussivun otsikko, vaihda satunnaista välkyntäanimaatiota ja kopioi valmis tekstivarjo sekä @keyframes-lohko.
  • • Aseta 3D-pursotussyvyydeksi 8 ja kulmaan 30 astetta saadaksesi paksu isometrisen logokäsittelyn, ja kopioi sitten laskettu tekstivarjopino suoraan tyylisivullesi.
  • • Rakenna ääriviivattu otsikkoteksti sisältäen sekä -webkit-text-stroke-rivin että sen text-shadow-varmistuksen, jotta ääriviivat näkyvät edelleen selaimissa ilman viivan tukea.