CSS-teksteffectengenerator

De meeste CSS-teksteffectgalerijen geven je een vaste voorinstelling: één neongloed, één 3D-extrusie, neem het of laat het. Deze generator bouwt de CSS op basis van uw parameters, op basis van de tekst die u daadwerkelijk typt. Kies neongloed, 3D-extrude, boekdruk/reliëf, omlijnd of verloopvulling uit de effectselectie, pas de eigen besturingselementen van dat effect aan en de live preview plus het kopieerbare CSS-blok eronder wordt bij elke wijziging bijgewerkt.

Het 3D-extrude-effect is het waard om te begrijpen: voor een gekozen diepte (aantal gestapelde lagen) en hoek wordt laag i verschoven met i × cos(hoek) horizontaal en i × sin(hoek) verticaal, berekend in JavaScript met de echte trigonometrische functies - niet gelezen uit een opzoektabel met vooraf ingestelde hoeken. Bij 45 graden komen de horizontale en verticale verschuivingen voor elke laag gelijk uit, omdat cosinus en sinus van 45° dezelfde waarde zijn; draai de hoekschuifregelaar en zie hoe de hele stapel 'tekst-schaduw'-lagen in realtime rond de letters slingert, waarbij elke laag iets donkerder is dan de vorige om een ​​verlicht 3D-gezicht na te bootsen.

Neongloed stapelt vier 'tekst-schaduw'-lagen op met een toenemende vervagingsradius in de door u gekozen kleur, met een optionele flikkering: schakel deze in en een '@keyframes'-regel met een willekeurige reeks dekkingsdips wordt live gegenereerd en geanimeerd, en met een shuffle-knop kunt u het patroon opnieuw rollen zonder een enkel keyframe met de hand te schrijven. Omlijnde tekst past `-webkit-text-stroke` toe voor browsers die dit ondersteunen, plus een eerlijke 8-directionele `text-shadow` terugval voor degenen die dat niet doen - beide regels worden verzonden in de gekopieerde CSS met een opmerking over waarom. Met verloopvulling wordt een 'lineair verloop' naar de tekstvorm geknipt met 'background-clip: text', nu een standaardeigenschap met brede ondersteuning, waarbij de oudere '-webkit-'-voorvoegsel voor oudere zoekmachines behouden blijft.

Alles wordt lokaal weergegeven in uw browser; tekst die u typt, wordt nooit ergens naartoe verzonden. Kopieer het voltooide CSS-blok, inclusief de `@keyframes`-regel als het effect er een nodig heeft, rechtstreeks naar uw stylesheet.