CodeKitHubČo je tento nástroj?
Tento nástroj kombinuje svetlý a tmavý text-shadow, posunuté opačným smerom, aby vytvoril ilúziu vystupujúceho (vypuklého) alebo vyrezaného (vyrytého) textu.
Prepínaš medzi štýlmi Vypuklý a Vyrytý a upravuješ posuvník intenzity na ovládanie sily 3D efektu.
Živý náhľad sa okamžite aktualizuje počas písania alebo úpravy akéhokoľvek nastavenia, takže si môžeš efekt doladiť pred skopírovaním CSS.
Prečo ho používať?
- Staviaš retro tému v štýle Windows 95 alebo skeuomorfné rozhranie a potrebuješ ten klasický vzhľad "vtlačené do sivého plastu" bez ručného ladenia posunov tieňa vo vývojárskych nástrojoch.
- Navrhuješ odznak alebo ikonu úspechu a chceš, aby text vyzeral vyrazený alebo vyrytý do kovového pozadia namiesto plochého umiestnenia na ňom.
- Dizajnér ti dal mockup s vypuklým nadpisom a bez CSS — obnov efekt tu namiesto hádania hodnôt tieňa pokusom a omylom.
- Chceš staromódny vzhľad "vyrezané do kameňa" alebo tlačiarenský efekt pre logo alebo hlavný nadpis bez toho, aby si siahol po editore obrázkov alebo SVG filtri.
- Vytváraš prototypy niekoľkých úrovní intenzity vedľa seba, aby si videl, aký jemný alebo dramatický by mal byť 3D efekt pred finálnym rozhodnutím o dizajne.
- 100% lokálne: CSS sa generuje výlučne v prehliadači, nič sa neposiela na server.
Ako sa používa
- Napíš text, ktorý chceš štylizovať.
- Vyber Vypuklý (vystupujúci) alebo Vyrytý (vyrezaný) z výberu štýlu.
- Uprav posuvník intenzity a vyber farbu pozadia a textu, ktoré ladia s tvojím dizajnom.
- Klikni na "Kopírovať" pre skopírovanie vygenerovaného CSS kódu a vlož ho do svojho štýlu.
Príklad
Vstup
Text: "Vypuklý", Štýl: Vypuklý, Intenzita: 2Výstup
color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);Vygenerované CSS nastaví farbu textu, farbu pozadia a dvojvrstvový text-shadow, ktorý vytvára vypuklý alebo vyrytý efekt.
Ako efekt funguje
Vypuklý a vyrytý efekt sú postavené z dvoch posunutých vrstiev text-shadow s opačnými svetlými a tmavými farbami.
| Vlastnosť | Účel |
|---|---|
| Svetlý tieň (rgba(255,255,255,0.7)) | Simuluje svetelný zdroj zachytávajúci jeden okraj textu |
| Tmavý tieň (rgba(0,0,0,0.5)) | Simuluje tieň padajúci na opačný okraj |
| Smer posunu | Obrátený medzi Vypuklým a Vyrytým na preklopenie 3D ilúzie |
| Intenzita | Ovláda, ako ďaleko sú svetlý a tmavý tieň posunuté od textu |
| Zhodné farby | Farba textu a pozadia nastavená blízko seba na skrytie plochého kontrastu |
Kde vypuklý a vyrytý text funguje najlepšie
- Nadpisy sekcií a popisky na karte alebo paneli jednofarebného pozadia, kde jemný 3D efekt pridáva textúru bez toho, aby súperil s obsahom.
- Odznaky, pečate a ikony úspechov, kde vyrazený alebo vyrytý vzhľad podporuje pocit niečoho oficiálneho alebo zaslúženého.
- Retro alebo skeuomorfné rozhrania (staré štýly operačných systémov, vypuklé tlačidlá), kde je efekt súčasťou jazyka dizajnu, nie jednorazovým akcentom.
- Vyhni sa mu na malom texte tela alebo dlhých odsekoch — efekt sa spolieha na blízku zhodu farby textu a pozadia, čo škodí bežnej čitateľnosti pri malých veľkostiach.
Súvisiace nástroje
Pre ďalšie CSS generátory vyskúšaj tieto.
→ Generátor CSS Glassmorphism · Generátor Box Shadow · Generátor Border Radius
Časté otázky
Aký je rozdiel medzi Vypuklým a Vyrytým?
Vypuklý spôsobí, že text vyzerá, akoby vystupoval z pozadia, so svetlým tieňom vľavo hore a tmavým vpravo dole. Vyrytý toto obráti a text vyzerá, akoby bol vyrezaný do pozadia.
Prečo efekt vyzerá najlepšie s podobnou farbou textu a pozadia?
Ilúzia vypuklosti/vyrytia sa spolieha úplne na svetlé a tmavé tiene, nie na kontrast medzi textom a pozadím — takže nastavenie farby textu blízko (alebo rovnakej ako) farby pozadia zvyčajne dáva najčistejší výsledok.
Môžem tento efekt použiť na akýkoľvek prvok, nielen na text?
Vlastnosť text-shadow, ktorú tento nástroj generuje, sa vzťahuje iba na text. Pre podobný efekt na tvaroch alebo tlačidlách by si potreboval porovnateľné nastavenie box-shadow.
Ukladá alebo sleduje nástroj to, čo napíšem?
Nie. CSS sa generuje výlučne v prehliadači — nič sa neposiela ani neukladá na server.
Bude to fungovať vo všetkých prehliadačoch?
Áno — text-shadow má vynikajúcu podporu vo všetkých moderných prehliadačoch vrátane Chrome, Firefox, Safari a Edge.
Prečo vypuklý efekt mizne alebo vyzerá zle na tmavom pozadí?
Svetlá vrstva tieňa sa spolieha na to, že vynikne oproti svetlejšiemu povrchu — na veľmi tmavom pozadí môže biele zvýraznenie vyzerať vyblednuté alebo obrátené oproti očakávaniu. Skús prepnúť text aj pozadie na stredne sivú farbu, alebo zvýš priehľadnosť svetlého tieňa, aby 3D ilúzia zostala čitateľná na tmavších témach.
Môžem animovať alebo prechádzať vypuklý efekt pri hover?
Áno — text-shadow sa dá animovať pomocou CSS prechodu, takže môžeš plynulo prejsť z plochého stavu na vypuklý (alebo medzi intenzitami Vypuklý a Vyrytý) pri :hover alebo :focus. Skopíruj vygenerovanú hodnotu tieňa ako stav "hover" a spoj ju s pravidlom transition: text-shadow 0.2s ease; na základnom prvku.
Ovplyvňuje posuvník intenzity výkon pri veľkom množstve textu?
Nie — text-shadow je ľahká CSS vlastnosť bez ohľadu na intenzitu, keďže sú to len dve vrstvy tieňa počítané rovnako, či je posun 1px alebo 6px. Je bezpečné ju použiť na nadpisy, tlačidlá alebo text tela bez obavy o výkon vykresľovania.
Ako spravím, aby efekt vyzeral dobre s vlastným fontom namiesto predvoleného?
Ilúzia vypuklosti/vyrytia sa zvyčajne najjasnejšie prejaví na tučných fontoch s hrubými ťahmi, keďže je viac plochy, na ktorej posun tieňa zachytí svetlo a tieň. Tenké alebo ľahké fonty môžu spôsobiť, že efekt vyzerá slabo alebo zašumene — ak tvoj vlastný font vyzerá nejasne, skús ťažšiu hrúbku písma alebo mierne zvýš posuvník intenzity, aby si to kompenzoval.
Môžem použiť dve odlišné farby namiesto bielej/čiernej pre svetlý a tmavý tieň?
Vygenerované CSS je východiskový bod, ktorý môžeš voľne upravovať — po skopírovaní kódu vymeň hodnoty rgba(255,255,255,...) a rgba(0,0,0,...) za akúkoľvek dvojicu farieb, napríklad teplé zlaté zvýraznenie a tmavohnedý tieň pre vzhľad bronzovej tabuľky namiesto predvoleného sivého kovového efektu.