12 érdekes árnyalat lehetőségeket a szöveget az ingatlan css text-shadow

Tipográfia - ez az egyik legnépszerűbb eszközök a web design. És ami a legjobb az egészben, az a tény, chtoCSSdaet nekünk arra, hogy „játszani” a szöveget, különösen az árnyéka. És első pillantásra úgy tűnhet, egy egyszerű elem, de együtt az általános kép tényleg egy szép látszó hatást.

Igyekszünk több lehetőség az árnyékok az ingatlan szöveges árnyék szöveget. Mindez lehet illesztenie a munkát.

Alapvető árnyék.

A szintaxis létrehozása egyszerű árnyék alább látható. Van négy változó a munka, az első két helyzetének beállításához az árnyék, a harmadik - meghatározott elmosódás mértéke és a negyedik - a szín az árnyék.

text-shadow: vízszintes-függőleges eltolás ofszet blur szín;

Most a gyakorlatban árnyék-ra csökkentjük, 2 pixel van jobbra tolódik 4 képpont blur 4 fekete pixel egy átláthatósága 30%

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

Az eredmény egy egyszerű, de ugyanakkor nagyon vonzó árnyékban.

Használhatja valamit, ami használható, és hogy jobban tetszik. De úgy tűnik számunkra, RGBA lehetővé teszi hozzá egy másik változó az ingatlan. Ezért lehet beállítani nem csak a színe az árnyék, hanem az átláthatóság növelése nélkül a kódot.

Illúzió dent szöveget.

A nagy dolog dolgozik szöveges árnyék az, hogy több lehetőséget biztosít, mint az ingatlan árnyék. Például illúzióját keltve horpadás szöveget.

Először be kell állítani a szöveg színe sötétebb, mint a fő háttér. Akkor kell alkalmazni text-shadow. Mi határozza meg a fehér színű, minimális átláthatóságot.

text-shadow: 2px 2px 3px RGBA (255,255,255,0.1);

Mint látható, kértük a fő háttérszínt # 222, és a szöveg - fekete, átláthatósága 60%. És a fehér árnyék volt található kissé lejjebb és jobbra a fő szöveg.

Kemény árnyék.

Ne feledje, hogy nem szükséges, hogy elmossa az árnyék. Nyugodtan kísérletezz, például kemény retro szövegeket.

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

Dupla árnyék.

Egy igazi öröm, hogy nyert, tudván, hogy te nem korlátozódik egyetlen árnyékot. Text-shadow lehet vesszővel elválasztva, hogy hozzanak egy új árnyalat.

Nézd meg az alapvető szintaktikai és vegye figyelembe, hogy az árnyékok vesszővel elválasztva, és a végén a szokásos résztől.

text-shadow: shadow1, shadow2, shadow3;

Például lehetőség van erre, mint az ábrán látható, amelynek Vintage szöveget az újság.

Távolítsuk el az alsó és növeli a távolságot.

Amint elkezd kísérletezni szöveges árnyék, az eredmények minden alkalommal egyre lenyűgöző. Akár azt is megpróbálja létrehozni a 3D szövegeket.

text-shadow: 0px 0px 3px # b2a98f,

Hangsúlyozva.

És egy másik példa a több árnyékok egy tulajdonság. De ezúttal kisebbek és közelebb állnak a fő szöveget. Mindez megteremti a hatása egy teszt jelentősége.

text-shadow: 0px 4px 3px RGBA (0,0,0,0.4)

Végigtekintve mit kínálnak más tervezők használni árnyékok, két módszert találtak, amelyek ideálisak a mi kis „Assistant” részben.

Itt, hogy a kívánt eredmény eléréséhez a 12 különálló árnyékok.

text-shadow: 0 0 1px #ccc,