3D tekstualni efekt s CSS -om

Da vidimo kako se to radiMi ćemo trebati:

• Osnovno poznavanje HTML -a i CSS -a
• Uređivač koda
• Naš preglednik

Korak 1

Na našoj ćemo lokalnoj web stranici stvoriti mapu za spremanje datoteka koje će nam trebati, nazvat ću je "text_3d" unutar nje drugi poziv css
POVEĆAJTE
POVEĆAJTE

Korak 2

Ići ćemo u uređivač koda i stvoriti novu datoteku index.html koju ćemo spremiti u korijenu mape “3d_text” koju smo stvorili u prethodnom koraku, u koju ćemo napisati našu osnovnu html strukturu i dodati referencu na css datoteku pod nazivom "style. ccs" koju ćemo stvoriti kasnije.
html kod

Korak 3

U tijelo ćemo dodati liniju u koju ćemo postaviti oznaku

kojoj ćemo dodijeliti klasu "3d-text" koju ćemo zatim stvoriti u .css datoteci, stavit ću bilo koji tekst unutar ove oznake na testiranje.

3-D tekstualni efekt

Ako ga trenutno vidimo u pregledniku, nećemo vidjeti velike promjene, samo normalan i trenutni tekst, tako da možemo imati 3D izgled, potrebno je definirati neka svojstva putem css -a. Idi na to.
POVEĆAJTE

Korak 4

U našem uređivaču koda stvorit ćemo novu .css datoteku koju ću nazvati style.css u koju ćemo postaviti svojstva tako da naš tekst ima onaj 3D efekt koji želimo postići.

Korak 5

Prvo ćemo početi uređivati ​​naš css, definirat ćemo veličinu našeg tijela, za to ćemo mu dati apsolutni položaj sa širinom i visinom od 100%.

 tijelo {položaj: apsolutno; širina: 100%; visina: 100%} 

Korak 6

U naš .ccs zapisat ćemo svojstva za klasu "3d-text" koje smo komentirali u koraku 3. Počet ćemo definiranjem fonta, osobito volim koristiti font "Helvetica Neue", naravno da možete upotrijebite ga sa fontom koji želite. U ovom slučaju postavit ću veličinu fonta na oko 80 piksela; podebljano ili podebljano … I ovaj put ću to ostaviti u bijelom. Ako ga vidimo u svom pregledniku, primijetit ćemo da je tekst nestao, to je zato što smo ga stavili u bijelo, a pozadina preglednika je također bijela …

 tijelo {položaj: apsolutno; širina: 100%; visina: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 80px; font-weight: bold; boja: #fff; } 

Vidjet ćemo u pregledniku da tekst nestaje
POVEĆAJTE

Korak 7

Vidjeli smo da je u prethodnom koraku tekst nestao, sada nam treba da se pojavi i s 3D efektom. Za to je potrebno samo dodati sjenu našem tekstu pomoću svojstva text-shadow, kako slijedi.

 tijelo {položaj: apsolutno; širina: 100%; visina: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 80px; font-weight: bold; boja: #fff; text-shadow: 0 1px 0 #ccc; } 

POVEĆAJTE

Vidimo da smo postigli blagi efekt zasjenjivanja, ali nije dovoljno da izgleda 3D, na sreću css nam omogućuje kombiniranje nekoliko sjena unutar svojstva tekst-sjena odvojenih zarezom, ovo ćemo iskoristiti za postavljanje višestrukih sjene na različitoj udaljenosti od našeg teksta i s različitim tonovima boja od tamnijeg do svjetlijeg, kako bismo stvorili efekt, ali također moramo kombinirati te sjene pomoću rgba boja i prozirnica kako bismo dali taj efekt širenja na kraju sjenčanje.
Na ovaj način naš css kod bi izgledao ovako.

 tijelo {položaj: apsolutno; širina: 100%; visina: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 80px; font-weight: bold; boja: #fff; tekstualna sjena: 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, .1), 0 0 5px rgba (0, 0, 0, .1), 0 1px 3px rgba (0, 0, 0, .3), 0 3px 5px rgba (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, 0, .15); } 

A rezultat učinka bio bi sljedeći …
POVEĆAJTE
Ovo je sve za sada ovdje je .zip s datotekama, sva pitanja ili prijedlozi mogu se poslati putem komentara, pozdrava …
text_3d20150917130359.zip 694 bajta 217 preuzimanjaJe li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod