CSS szövegeffektus-generátor
Írja be saját szövegét, és tekintse meg a valódi neonfényű, 3D-extrudált, magasnyomású, körvonalas és színátmenet-kitöltő CSS-effektusokat élőben, valódi matematikai módszerrel kiszámított paraméterekkel és egy másolható CSS-blokk segítségével.
Eredmény
A legtöbb CSS-szöveghatású galéria rögzített előre beállított beállítást ad: egy neonfény, egy 3D kihúzás, vigye vagy hagyja. Ez a generátor a CSS-t az Ön paramétereiből építi fel a ténylegesen beírt szövegre. Válassza ki a neonfényt, a 3D-extrudálást, a magasnyomást/dombornyomást, a körvonalas vagy színátmenetes kitöltést az effektusok közül, állítsa be az effektus saját vezérlőit, és az élő előnézet, valamint az alatta lévő másolható CSS-blokk minden változáskor frissül.
A 3D-extrudálási effektust érdemes megérteni: a kiválasztott mélység (halmozott rétegek száma) és szög esetén az i réteget vízszintesen i × cos (szög), függőlegesen pedig i × sin (szög) tolja el, JavaScriptben számítva a valódi trigonometrikus függvényekkel – nem az előre beállított szögek keresőtáblázatából olvasható ki. 45 fokos szögben a vízszintes és a függőleges eltolás minden rétegben egyenlő, mivel a 45°-os koszinusz és szinusz azonos érték; Forgassa el a szögcsúszkát, és nézze meg, hogy a "szöveg-árnyék" rétegek teljes halmaza valós időben lendül a betűk körül, mindegyik egy kicsit jobban elsötétült, mint az előző, hogy meghamisítson egy megvilágított 3D-s arcot.
A Neon Glow négy növekvő elmosódási sugarú "szöveg-árnyék" réteget halmoz fel az Ön által választott színben, opcionális villogással: kapcsolja be, és egy "@keyframes" szabály véletlenszerű sorozatú átlátszatlanság-csökkenéssel generálódik és élőben animálódik, a keverés gomb pedig lehetővé teszi a minta újragörgetését anélkül, hogy egyetlen kulcskockát kézzel írna. A vázolt szöveg a `-webkit-text-stroke`-t alkalmazza az ezt támogató böngészők esetében, valamint egy őszinte, nyolcirányú `text-shadow` tartalékot a nem támogatók számára – mindkét sor a másolt CSS-ben található, és megjegyzi, hogy miért. A gradiens kitöltés egy "lineáris színátmenetet" vág a szöveg alakzatához a "background-clip: text" funkcióval, amely ma már egy szabványos tulajdonság széles körű támogatással, megtartva a régebbi "-webkit-" előtagot a régi motorokhoz.
Minden helyben jelenik meg a böngészőben – a beírt szöveget soha nem küldik el sehova. Másolja be a kész CSS-blokkot, beleértve a „@keyframes” szabályt is, ha az effektusnak szüksége van rá, egyenesen a stíluslapjába.
A fájljaid és bemeneteid soha nem hagyják el ezt az eszközt. A feldolgozás teljesen offline módon történik. 100% biztonságos.
Elfogadott formátumok és szabályok
- Öt valódi effektus – neonfény, 3D-extrudálás, magasnyomás/dombornyomás, körvonalas és színátmenetes kitöltés – mindegyik saját paramétervezérlővel (színek, mélység/szög csúszkák, színátmenet stopok).
- A Neon glow opcionális villogó animációt tartalmaz egy véletlenszerű „@keyframes” átlátszatlansági mintával, amelyet anélkül alakíthat át, hogy kézzel érintené a CSS-t.
- A 3D-extrudálás lehetővé teszi a mélység (rétegek száma) és a szög egymástól függetlenül történő húzását; minden réteg pixeleltolása és fokozatosan sötétebb árnyalata élőben újraszámítható.
Főbb előnyök
Felhasználási területek
- • Tárcsázza be a fényreklámot, keresse meg a céloldal címsorát, kapcsolja be a véletlenszerű villogó animációt, és másolja ki a kész szövegárnyékot és a @keyframes blokkot.
- • Állítsa be a 3D-extrudálás mélységét 8-ra és a szöget 30 fokra a vaskos izometrikus logókezeléshez, majd másolja a kiszámított szöveg-árnyékhalmazt egyenesen a stíluslapjába.
- • Készítsen vázolt címszöveget a -webkit-text-stroke vonal és a text-shadow backback mellett, így a körvonal továbbra is megjelenik a körvonal támogatása nélküli böngészőkben.
Értékelje ezt az eszközt
