12 vicces CSS szövegárnyék, amit másolhatsz és beilleszthetsz

 12 vicces CSS szövegárnyék, amit másolhatsz és beilleszthetsz

John Morrison

12 vicces CSS szövegárnyék, amit másolhatsz és beilleszthetsz

A tipográfia mindenki kedvenc játéka a webdesignban. Az egyik különösen szórakoztató eszköz, amit a CSS ad a betűtípusokkal való játékhoz, a text-shadow , ami elsőre elég egyszerűnek tűnik, de egy kis leleményességgel és kreativitással figyelemre méltó hatásokat lehet vele elérni.

Lásd még: 35+ A legjobb vonal minták & mintázatok; textúrák

Ma végigfutunk néhány text-shadow példák, amelyeket másolhat és beilleszthet saját munkájához.

Lásd még

Az alapvető árnyék

A text-shadow tulajdonság szuper könnyű dolgozni, és jól működik az összes modern böngészőkben, még csak nem is egy vendor prefix nélkül! Az olyan eszközök, mint a Modernizr azonban segítenek a fejlett CSS3 effektek megvalósításában még a régebbi böngészőkben is, ha szükséged van fallback támogatásra.

Szintaxis

Egy egyszerű text-shadow Négy változóval dolgozhatsz, az első kettő az árnyék pozícióját, a harmadik az elmosódás mértékét, a negyedik pedig az árnyék színét határozza meg.

1 text - shadow : vízszintes - offset függőleges - offset blur color ;

Ha ezt a gyakorlatba ültetjük, itt egy példa egy árnyékkal, amelyet két pixelrel lejjebb és négy pixelrel jobbra mozgattunk, három pixeles elmosódással és 30%-os átlátszatlanságú fekete színnel.

1 text - shadow : 2px 4px 3px rgba ( 0 , 0 , 0 , 0 , 0 , 0.3 ) ;

Íme a kód eredménye, egy szép, egyszerű árnyék, amely önmagában is nagyon tetszetős.

Miért rgba?

Egy gyors megjegyzésként, nem muszáj rgba-t használnod az árnyékod színéhez, hanem bármelyik CSS színmódszert használhatod. Én azonban úgy találom, hogy az rgba az ideális színbeállítás az árnyékhoz, mert egy újabb dimenziót ad a munkához. Nemcsak az árnyék pozícióját, elmosódását és színét állíthatod be, hanem az alfa érték segítségével az átlátszatlanságát is.

Ez valójában könnyebb, mint más színmódszerekkel dolgozni, mert általában vadászni kell egy megfelelő akcentust keresni a háttérszínhez, amely talán valamivel sötétebb vagy világosabb. Az rgba-val egyszerűen használhatsz feketét vagy fehéret, és csökkentheted az átlátszatlanságot, hogy összemosódjon a háttérrel.

Gyors és piszkos betűnyomás

A nagyszerű dolog a text-shadows hogy sokkal többet tudsz velük kezdeni, mint egy átlagos árnyékolóval. Itt van például egy gyors trükk a beillesztett szöveg illúziójának megteremtéséhez.

Először is a szöveg színét a háttérszínnél kissé sötétebb árnyalatra kell állítani. Ezután alkalmazzon egy enyhe fehér színt. text-shadow csökkentett opacitással.

Lásd még: 25+ A legjobb pszichedelikus betűtípusok 2023-ban (ingyenes & Pro)

Amint láthatod, #222-es háttérszínt használtam, majd a szöveget 60%-os fedettséggel feketére állítottam. Végül a fehér árnyékomat csak kissé lefelé és jobbra helyeztem 10%-os fedettséggel.

1 2 3 4 5 6 7 8 body { background : #222; } #text h1 { color : rgba ( 0 , 0 , 0 , 0 , 0.6 ) ; text - shadow : 2px 2px 3px rgba ( 255 , 255 , 255 , 255 , 0.1 ) ; }

Kemény árnyék

Ne feledje, hogy egyáltalán nem kell elmosnia az árnyékot. A retró jellegük miatt a kemény szövegárnyékok most nagyon "divatosak", ezért bátran kísérletezzen velük a terveiben.

1 text - shadow : 6px 6px 0px 0px rgba ( 0 , 0 , 0 , 0 , 0 , 0.2 ) ;

Dupla árnyék

Az igazi móka akkor kezdődik, amikor rájössz, hogy nem vagy egyetlen árnyékra korlátozva. Ha vesszővel választod el a nyilatkozatokat, annyi árnyékot alkalmazhatsz, amennyit csak akarsz!

Íme a szintaxis alapvázlata. Figyeljük meg, hogy az első két árnyék után vesszőt, az utolsó árnyék után pedig pontosvesszőt teszünk.

1 text - shadow : shadow1 , shadow2 , shadow3 ;

Ha ezt a gyakorlatba ültetjük, itt egy példa egy olyan szövegkezeléssel, amelyet mostanában mindenhol látni fogsz a weben. Az ötlet alapvetően az, hogy két árnyékot alkalmazzunk, amelyek közül az elsőnek ugyanaz a színe, mint a háttérnek.

1 text - shadow : 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0,0,0.15);

Az eredmény majdnem olyan, mint egy régi újság.

Lent és távol

Amint elkezdi az árnyékokat rétegezni, az eredmények gyorsan egyre lenyűgözőbbé válnak. Nagyon könnyű olyan szép, hamis 3D-s effektusokat létrehozni, amelyekről a webdesignhoz értő felhasználók nem fogják elhinni, hogy élő szöveg.

Az alábbiakban négy árnyékot használtam, mindegyiket egyenesen lefelé irányítva, különböző távolsággal és elmosódottsággal.

1 2 3 4 text - shadow : 0px 3px 0px 0px #b2a98f, 0px 14px 10px rgba ( 0 , 0 , 0 , 0 , 0.15 ) , 0px 24px 2px rgba ( 0 , 0 , 0 , 0 , 0 , 0.1 ) , 0px 34px 30px rgba ( 0 , 0 , 0 , 0 , 0 , 0.1 ) ;

Közel és nehéz

Itt egy másik példa ugyanerre az ötletre, ezúttal három árnyékkal, amelyek sokkal közelebb vannak a forráshoz. A hatás hatására a szöveg egy kicsit súlyosabbnak tűnik.

1 2 3 text - shadow : 0px 4px 3px rgba ( 0 , 0 , 0 , 0 , 0.4 ) , 0px 8px 13px rgba ( 0 , 0 , 0 , 0 , 0 , 0.1 ) , 0px 18px 23px rgba ( 0 , 0 , 0 , 0 , 0 , 0 , 0.1 ) ;

Egy kis segítség

Körülnézve, hogy mit csináltak más tervezők, két kiváló technikát találtam, amelyekről úgy gondoltam, hogy tökéletesek ehhez a bejegyzéshez. Az első Mark Dottótól származik, a második pedig Gordon Halltól.

Mark Dotto komolyan 3D-s szövege

Itt van egy példa, amelyről mindig is úgy gondoltam, hogy igazán lenyűgözően néz ki. A MarkDotto.com oldalról származik, és lenyűgözően tizenkét különálló árnyékot használ, hogy nagyon hihető 3D hatást érjen el.

1 2 3 4 5 6 7 8 9 10 11 12 text - shadow : 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba ( 0 , 0 , 0 , 0 , 0 , . 1 ) , 0 0 5px rgba ( 0 , 0 , 0 , 0 , 0 , . 1 ) , 0 1px 3px rgba ( 0 , 0 , 0 , 0 , 0 , . 3 ) , 0 3px 5px rgba ( 0 , 0 , 0 , 0 , 0 , . 2 ) , 0 5px 10px rgba ( 0 , 0 , 0 . 25 ) , 0 10px 10px rgba ( 0 , 0 , 0 . 2 ) , 0 20px 20px rgba ( 0 , 0 . 15 ) ;

Gordon Hall valódi inzert szövege

Vegye észre, hogy a fenti példában a technikámat "gyors és piszkos" betűnyomásos hatásnak neveztem. Ez azért van, mert van egy sokkal bonyolultabb módja is annak, hogy komolyan beillesztett szöveget hozzon létre, ami sokkal hihetőbb.

Gordon komoly CSS-voodoo-t használ, hogy ne csak külső árnyékot, hanem valódi belső árnyékot is létrehozzon. Nézd meg a blogbejegyzését a technika teljes magyarázatáért.

1 2 3 4 5 6 background - color : #66666666; - webkit - background - clip : text ; - moz - background - clip : text ; background - clip : text ; color : transparent ; text - shadow : rgba ( 255 , 255 , 255 , 255 , 0.5 ) 0px 3px 3px 3px ;

Több Fun Shadows

Most, hogy már jól érzed a kód mögötti logikát, itt van még néhány példa, amit az unalmas magyarázatok nélkül készítettem el. Nyugodtan lopd el őket, és használd fel a munkádban!

Izzó

1 text - shadow : 0px 0px 6px rgba ( 255 , 255 , 255 , 255 , 255 , 0.7 ) ;

Szuperhős

1 2 3 text - shadow : - 10px 10px 0px #00e6e6, - 20px 20px 0px #01cccc, - 30px 30px 0px #00bdbd;

Több fényforrás

1 2 3 text - shadow : 0px 15px 5px rgba ( 0 , 0 , 0 , 0 , 0.1 ) , 10px 20px 5px rgba ( 0 , 0 , 0 , 0 , 0 , 0.05 ) , - 10px 20px 5px rgba ( 0 , 0 , 0 , 0 , 0 , 0.05 ) ;

Puha dombornyomás

1 2 3 color : rgba ( 0 , 0 , 0 , 0 , 0.6 ) ; text - shadow : 2px 8px 6px rgba ( 0 , 0 , 0 , 0 , 0 , 0.2 ) , 0px - 5px 35px rgba ( 255 , 255 , 255 , 255 , 0.3 ) ;

Következtetés

Mint a legtöbb CSS-effektus, a szövegárnyékok is rendkívül egyszerűen megvalósíthatók alapvető formában, de sokféle formát ölthetnek, ha tényleg dolgozol rajtuk. A vesszőket elválasztóként használva a CSS-árnyékok egymásra halmozhatók, hogy drámaian növeljék a hatás érdekességét és realizmusát.

John Morrison

John Morrison tapasztalt tervező és termékeny író, aki több éves tapasztalattal rendelkezik a tervezési iparban. A tudás megosztása és a másoktól való tanulás iránti szenvedélyével John a szakma egyik legjobb dizájnbloggerjeként szerzett hírnevet. Napjait kutatással, kísérletezéssel és a legújabb tervezési trendekről, technikákról és eszközökről írva tölti, azzal a céllal, hogy inspirálja és oktassa a tervezőtársakat. Amikor nem veszett el a dizájn világában, John szívesen túrázik, olvas, és a családjával tölti az idejét.