CSS szövegárnyék generátor
Ingyenes online text-shadow generátor. Halmozz több árnyékréteget eltolással, homályosítással, színnel és átlátszatlansággal, próbáld ki a Neon, 3D, Retro előbeállításokat, és azonnal másold a CSS-t.
Mi a text-shadow tulajdonság a CSS-ben?
A text-shadow árnyékeffekteket ad a szöveg karakteréhez. Minden árnyékot vízszintes eltolás, függőleges eltolás, opcionális homályosítási sugár és szín határoz meg, és több árnyék egyetlen vesszővel elválasztott értékben kombinálható gazdag effektekhez.
Hogyan működnek a több árnyékréteg?
A rétegek deklarációs sorrendben alulról felfelé rajzolódnak, így a lista első árnyéka van legfelül. Ez a generátor lehetővé teszi rétegek hozzáadását, törlését, be- és kikapcsolását, mindegyik saját eltolással, homályosítással, színnel és átlátszatlansággal, hogy Neon vagy 3D jellegű effekteket halmozz.
Mit jelenten az X-eltolás, Y-eltolás és a homályosítás?
Az X-eltolás az árnyékot a karakterek balra vagy jobbra, az Y-eltolás fel vagy le mozgatja, a homályosítási sugár pedig lágyítja az éleit: a 0 kemény élű árnyékot ad, mint a Retro vagy Körvonal, a nagyobb értékek színt ragyogásként szórják szét.
Hogyan készítsek neon ragyogás effektket?
Használd a Neon előbeállítást, vagy állíts be több réteget nulla eltolással, azonos élénk színnel és növekvő homályosítási értékekkel, például 0 0 3px, 0 0 8px és 0 0 20px. A halmozott aureolák a neoncső fényét utánozzák.
A text-shadow befolyásolja a renderelési teljesítményt?
Néhány statikus réteg olcsó, de a sok nagy homályosítású árnyékkal rendelkező szöveg drágább újrarajzolni. Nehéz árnyékok hosszú bekezdéseken vagy a text-shadow folyamatos animálása kiesett képkockákat okozhat gyenge és mobil eszközökön; részesítsd előnyben a rövid címeket, mérsékelt homályosítást, vagy inkább az átlátszatlanságot animáld.
Hogyan tegyek egy árnyékot félig átlátszóvá?
Minden réteghez tartozik átlátszatlanság-csúszka, amely a választott színt rgba jelölésre alakítja, például rgba(0, 0, 0, 0.5). A félig átlátszó árnyékok bármilyen háttérrel természetesen olvadnak — ebből építi a Papír előbeállítás a puha dombornyomott hatást.
Mi a különbség a text-shadow és a box-shadow között?
A text-shadow a szöveg karakterformáira hat, és nincs kiterjedési vagy belső árnyék értéke, míg a box-shadow bármely elem téglalap alakú dobozát övezi. Az eltolási és homályosítási szintaxis közös, de nem helyettesíthetik egymást.
Mely böngészők támogatják a text-shadow-t?
A text-shadow-t minden modern böngésző támogatja, köztük a Chrome, Firefox, Safari, Edge és Opera, és több mint egy évtizede stabil előtag nélkül. A többrétegű árnyékok mindenhol ugyanúgy működnek.
Feltöltődik szerverre, amit beírok?
Nem. Az előnézeti szöveg és minden beállított réteg a böngésződben marad, a CSS helyben készül az oldalon. Semmi nem megy át a hálózaton, ezért az eszköz betöltés után offline is működik.
A(z) CSS szövegárnyék generátor használata
Tervezz CSS szövegárnyékokat rétegek egymásra pakolásával, nem pedig egyetlen eltolás kitalálásával. Minden változás nagy, élő előnézeti szövegen jelenik meg, a CSS pedig helyben készül a böngésződben.
- Írd be a saját szavaidat az Előnézeti szöveg mezőbe, hogy valódi szövegen próbáld ki a hatást.
- Próbálj ki egy előbeállítást: Neon, Papír, 3D, Retro, Ragyogás vagy Körvonal kész rétegeket tölt be.
- Állítsd be az egyes rétegek X eltolását, Y eltolását, homályosítását, színét és átlátszatlanságát a csúszkáikkal.
- Az Árnyék hozzáadása gombbal további árnyékokat rakj, pipáld ki a réteget a kikapcsolásához, vagy töröld a kuka ikonnal.
- Másold ki a generált text-shadow szabályt, és illeszd be a stíluslapodba.
A neonfény ugyanolyan színű három-négy réteggel és növekvő homályosítással mutat a legjobban — az eltolásokat hagyd nullán, és a homályosítás végezze a munkát.
Kapcsolódó eszközök
- CSS Box Shadow Generátor Ingyenes online CSS box-shadow generátor. Vizuálisan hozzon létre gyönyörű árnyékokat állítható eltolással, elhomályosítással, kiterjedéssel, színnel és betéttel. Élő előnézet és azonnali kód másolás.
- CSS Színátmenet Generátor Hozzon létre lenyűgöző CSS színátmeneteket vizuálisan. Lineáris, radiális és kúp színátmeneteket generálhat több színállomással, szögekkel és pozíciókkal. Azonnal másolhatja a gyártásra kész CSS kódot.
- Díszes Betűgenerátor Ingyenes díszes betűgenerátor 28 Unicode stílussal. Készíts félkövér, dőlt, gótikus és körbezárt szöveget Instagram-biókhoz, TikTokhoz, WhatsApphoz és játéknevekhez.
- Border-radius Generátor Ingyenes kreatív border-radius generátor online. Húzza meg a 8 fogantyút vagy válasszon blob alakot, hogy organikus CSS formákat készítsen, és azonnal másolja a kódot.
- Színkonverter Ingyenes online színkonverter. Azonnal konvertálja a HEX, RGB, HSL, HSV formátumokat vizuális választóval. 100% privát, böngészőjében fut.
- CSS easing generátor Ingyenes online CSS easing generátor. Húzza a cubic-bezier kontrollpontokat az interaktív görbén, válasszon 18 előbeállítás közül, nézze meg a hurkoló labda-animációt, és azonnal másolja az időzítő függvényt.
- CSS clip-path generátor Ingyenes online CSS clip-path generátor. Tervezzen polygon, circle, ellipse és inset alakzatokat húzható pontokkal, élő előnézettel és egy kattintásos CSS-kód másolással.
- CSS szépítő CSS kód azonnali formázása és szépítése. Minimalizált CSS átalakítása olvasható kóddá testreszabható beállításokkal.