CodeKitHubMi ez az eszköz?
Ez az eszköz egy világos és egy sötét színű text-shadow-t kombinál, ellentétes irányba eltolva, hogy kiemelkedő (dombornyomott) vagy bevésett (vésett) szöveg illúzióját keltse.
Válthatsz Dombornyomott és Vésett stílus között, és az intenzitás csúszkával szabályozhatod, mennyire erős legyen a 3D hatás.
Az élő előnézet azonnal frissül, ahogy gépelsz vagy módosítasz bármilyen beállítást, így finomíthatod a hatást a CSS kimásolása előtt.
Miért érdemes használni?
- Retro Windows 95-stílusú vagy szkeuomorf UI témát építesz, és szükséged van arra a klasszikus „szürke műanyagba nyomott” feliratra, anélkül hogy fejlesztői eszközökben kézzel állítanád a árnyékeltolásokat.
- Egy jelvényt vagy eredményikont tervezel, és azt akarod, hogy a szöveg úgy nézzen ki, mintha egy fémszerű háttérbe lenne bélyegezve vagy vésve, ahelyett hogy laposan ülne rajta.
- Egy designer átadott egy makettet dombornyomott címmel, CSS nélkül — hozd létre újra a hatást itt, ahelyett hogy próbálgatással találgatnád az árnyékértékeket.
- Régimódi „kőbe vésett” vagy nyomdai hatást szeretnél egy logóhoz vagy hero címhez, képszerkesztő vagy SVG szűrő nélkül.
- Több intenzitásszintet prototípuszol egymás mellett, hogy lásd, mennyire legyen finom vagy drámai a 3D hatás, mielőtt lezárnád a végleges designt.
- 100%-ban helyi: a CSS teljesen a böngésződben generálódik, semmi sem kerül szerverre.
Használati útmutató
- Írd be a szöveget, amelyet stilizálni szeretnél.
- Válaszd a Dombornyomott (kiemelkedő) vagy Vésett (bevésett) stílust a stílusválasztóból.
- Állítsd be az intenzitás csúszkát, és válassz a designodhoz illő háttér- és szövegszínt.
- Kattints a „Másolás” gombra a generált CSS kód kimásolásához, és illeszd be a stíluslapodba.
Példa
Bemenet
Szöveg: „Dombor”, Stílus: Dombornyomott, Intenzitás: 2Kimenet
color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);A generált CSS beállítja a szövegszínt, a háttérszínt, és egy kétrétegű text-shadow-t, amely létrehozza a dombor vagy vésett hatást.
Hogyan működik a hatás
A dombornyomott és vésett hatások két, eltolt text-shadow rétegből épülnek fel, ellentétes világos és sötét színekkel.
| Tulajdonság | Cél |
|---|---|
| Világos árnyék (rgba(255,255,255,0.7)) | Egy fényforrást szimulál, amely a szöveg egyik szélét éri |
| Sötét árnyék (rgba(0,0,0,0.5)) | Egy árnyékot szimulál, amely az ellentétes szélre esik |
| Eltolás iránya | Megfordítva Dombornyomott és Vésett között, hogy megforduljon a 3D illúzió |
| Intenzitás | Szabályozza, mennyire messze van eltolva a világos és sötét árnyék a szövegtől |
| Egyező színek | A szöveg- és háttérszín egymáshoz közel van beállítva, hogy elrejtse a lapos kontrasztot |
Hol működik legjobban a dombornyomott és vésett szöveg
- Szekciócímek és feliratok egyszínű kártyán vagy panelen, ahol a finom 3D hatás textúrát ad anélkül, hogy versenyezne a tartalommal.
- Jelvények, pecsétek és eredményikonok, ahol a bélyegzett vagy vésett megjelenés erősíti a hivatalos vagy kiérdemelt jelleg érzetét.
- Retro vagy szkeuomorf UI témák (régi típusú OS-elemek, dombornyomott gombok), ahol a hatás a design nyelv része, nem egyszeri díszítés.
- Kerüld kis testű szövegen vagy hosszú bekezdéseken — a hatás a szöveg és háttér színének közeli egyezésére épül, ami kis méretben árt a tiszta olvashatóságnak.
Kapcsolódó eszközök
További CSS generátorok.
→ CSS glassmorphism generátor · Box-shadow generátor · Border-radius generátor
Gyakori kérdések
Mi a különbség a Dombornyomott és a Vésett stílus között?
A Dombornyomott olyanná teszi a szöveget, mintha kiemelkedne a háttérből, a világos árnyék bal fent, a sötét árnyék jobb lent helyezkedik el. A Vésett ezt megfordítja, így a szöveg úgy néz ki, mintha bele lenne vésve a háttérbe.
Miért néz ki a hatás a legjobban, ha a szöveg és a háttér színe megegyezik?
A dombor/vésett illúzió teljes egészében az árnyékok fény- és sötét pontjaira épül, nem a szöveg és háttér kontrasztjára — így a szövegszín a háttérszínhez közeli (vagy azzal megegyező) beállítása általában a legtisztább eredményt adja.
Használhatom ezt a hatást bármilyen elemen, nem csak szövegen?
Az eszköz által generált text-shadow tulajdonság csak szövegre vonatkozik. Hasonló hatáshoz alakzatokon vagy gombokon egy megfelelő box-shadow beállításra lenne szükséged.
Menti vagy nyomon követi az eszköz, amit beírok?
Nem. A CSS teljes egészében a böngésződben generálódik — semmi sem kerül szerverre vagy tárolásra.
Ez minden böngészőben működni fog?
Igen — a text-shadow kiváló támogatottsággal rendelkezik minden modern böngészőben, beleértve a Chrome-ot, Firefoxot, Safarit és Edge-et.
Miért tűnik el vagy hat rosszul a dombornyomott hatás sötét háttéren?
A világos árnyékréteg arra épít, hogy kiemelkedjen egy világosabb felületen — nagyon sötét háttéren a fehér kiemelés kimoshatja magát, vagy fordítottnak tűnhet a vártnál. Próbáld a szöveget és a hátteret közepes szürkére állítani, vagy növeld a világos árnyék áttetszőségét, hogy a 3D illúzió sötétebb témákon is olvasható maradjon.
Animálhatom vagy átmenettel válthatom a dombornyomott hatást hover esetén?
Igen — a text-shadow animálható CSS átmenettel, így simán válthatsz lapos állapotból dombornyomottra (vagy Dombornyomott és Vésett intenzitások között) :hover vagy :focus esetén. Másold ki a generált árnyékértéket „hover” állapotként, és párosítsd egy transition: text-shadow 0.2s ease; szabállyal az alapelemen.
Befolyásolja az intenzitás csúszka a teljesítményt nagy mennyiségű szövegnél?
Nem — a text-shadow könnyű CSS tulajdonság, függetlenül az intenzitástól, mivel csak két árnyékréteg, ugyanúgy kiszámítva, akár 1px, akár 6px az eltolás. Biztonságosan használható címeken, gombokon vagy szövegtörzsön anélkül, hogy renderelési teljesítménygondot okozna.
Hogyan érjem el, hogy a hatás jól nézzen ki egyedi betűtípussal az alapértelmezett helyett?
A dombor/vésés illúzió általában vastag, félkövér vonalvezetésű betűtípusokon a legtisztább, mivel több felület áll rendelkezésre, ahol az árnyékeltolás fényt és árnyékot kaphat. Vékony vagy könnyű súlyú betűtípusok elhalványíthatják vagy zajossá tehetik a hatást — ha az egyedi betűtípusod elmosódottnak tűnik, próbálj vastagabb betűvastagságot, vagy növeld kicsit az intenzitást kompenzálásként.
Használhatok két másik színt fehér/fekete helyett a világos és sötét árnyékhoz?
A generált CSS egy szabadon szerkeszthető kiindulópont — cseréld ki az rgba(255,255,255,...) és rgba(0,0,0,...) értékeket bármilyen színpárra, miután kimásoltad a kódot, például egy meleg arany kiemelést és egy mély barna árnyékot egy bronztábla-hatáshoz az alapértelmezett szürke fémhatás helyett.