Efect text 3D cu CSS

Să vedem cum se faceNoi vom avea nevoie:

• Cunoștințe de bază despre HTML și CSS
• Un editor de cod
• Browserul nostru

Pasul 1

Vom crea un folder în site-ul nostru local pentru a salva fișierele de care vom avea nevoie, îl voi numi „text_3d” în cadrul acestuia un alt apel css
MARI
MARI

Pasul 2

Vom merge la editorul de cod și vom crea un nou fișier index.html pe care îl vom salva în rădăcina folderului „3d_text” pe care l-am creat în pasul anterior, în care vom scrie structura noastră de bază html și vom adăuga referința la un fișier css numit „style. ccs” pe care îl vom crea mai târziu.
cod html

Pasul 3

Vom adăuga o linie în interiorul corpului în care vom plasa o etichetă

căruia îi vom atribui clasa „3d-text” pe care o vom crea apoi în fișierul .css, voi plasa orice text în interiorul acestei etichete pentru a testa.

Efect text 3D

Dacă îl vedem în browser chiar acum nu vom vedea modificări majore, doar un text normal și actual, astfel încât să putem avea un aspect 3d este necesar să definim unele proprietăți prin css. Du-te.
MARI

Pasul 4

În editorul nostru de coduri vom crea un nou fișier .css pe care îl voi numi style.css în acesta vom plasa proprietățile astfel încât textul nostru să aibă acel efect 3D pe care dorim să îl realizăm.

Pasul 5

Vom începe mai întâi să ne edităm css-ul, vom defini dimensiunea corpului nostru, pentru aceasta îi vom oferi o poziție absolută cu lățimea și înălțimea de 100%.

 corp {poziție: absolut; lățime: 100%; înălțime: 100%} 

Pasul 6

Vom scrie în .ccs-ul nostru proprietățile pentru clasa „3d-text” pe care le-am comentat la pasul 3. Vom începe prin definirea fontului, îmi place în mod deosebit să folosesc fontul „Helvetica Neue”, bineînțeles că poți folosiți-l cu fontul dorit. În acest caz, voi seta dimensiunea fontului la aproximativ 80 px; tip îndrăzneț sau îndrăzneț … Și de data aceasta îl voi lăsa în alb. Dacă îl vedem în browserul nostru, vom observa că textul a dispărut, asta pentru că l-am așezat în alb și fundalul browserelor este de asemenea alb …

 corp {poziție: absolut; lățime: 100%; înălțime: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; dimensiunea fontului: 80px; font-weight: bold; culoare: #fff; } 

Vom vedea în browser că textul dispare
MARI

Pasul 7

Am văzut că la pasul anterior textul a dispărut, acum avem nevoie să apară și să aibă un efect 3D. Pentru aceasta trebuie doar să adăugăm o umbră textului nostru folosind proprietatea text-umbră, după cum urmează.

 corp {poziție: absolut; lățime: 100%; înălțime: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; dimensiunea fontului: 80px; font-weight: bold; culoare: #fff; text-shadow: 0 1px 0 #ccc; } 

MARI

Vedem că am obținut un ușor efect de umbrire, dar nu este suficient să-l facem să arate 3D, din fericire css ne permite să combinăm mai multe umbre în proprietatea text-umbră separate printr-o virgulă, vom profita de aceasta pentru a plasa mai multe umbre la o distanță diferită de textul nostru și cu tonuri de culoare diferite, de la una mai închisă la una mai deschisă, pentru a crea efectul, dar trebuie să combinăm și aceste umbre folosind culori rgba și transparențe pentru a da acel efect de difuzie la sfârșitul umbrire.
În acest fel, codul nostru CSS ar arăta astfel.

 corp {poziție: absolut; lățime: 100%; înălțime: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; dimensiunea fontului: 80px; font-weight: bold; culoare: #fff; 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, .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); } 

Iar rezultatul efectului ar fi următorul …
MARI
Totul este deocamdată aici este un .zip cu fișierele, orice întrebări sau sugestii pot fi trimise prin comentarii, salutări …
text_3d20150917130359.zip 694 octeți 217 DescărcăriV-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv