3D teksta efekts ar CSS

Apskatīsim, kā tas tiek darītsMums būs nepieciešams:

• Pamatzināšanas par HTML un CSS
• Koda redaktors
• Mūsu pārlūkprogramma

1. darbība

Vietējā vietnē mēs izveidosim mapi, lai saglabātu nepieciešamos failus, es to saucu par "text_3d" citā zvanā css
PALIELINĀT
PALIELINĀT

2. solis

Mēs dosimies uz koda redaktoru un izveidosim jaunu failu index.html, kuru saglabāsim iepriekšējā solī izveidotās mapes “3d_text” saknē, kurā mēs uzrakstīsim savu pamata html struktūru un pievienosim atsauci uz css failu ar nosaukumu "style. ccs", kuru mēs izveidosim vēlāk.
html kods

3. solis

Korpusa iekšpusē mēs pievienosim līniju, kurā mēs ievietosim etiķeti

kurai mēs piešķirsim klasi "3d-teksts", ko pēc tam izveidosim .css failā, es ievietošu jebkuru tekstu šīs etiķetes iekšpusē, lai pārbaudītu.

3D teksta efekts

Ja mēs to pašlaik redzam pārlūkprogrammā, mēs neredzēsim lielas izmaiņas, tikai parastu un aktuālu tekstu, lai mums būtu 3D izskats, ir jānosaka dažas īpašības, izmantojot css. Dari tā.
PALIELINĀT

4. solis

Mūsu koda redaktorā mēs izveidosim jaunu .css failu, ko es saukšu par style.css.

5. solis

Mēs vispirms sāksim rediģēt mūsu css, mēs definēsim ķermeņa izmēru, šim nolūkam mēs piešķirsim tai absolūtu pozīciju ar platumu un augstumu 100%.

 ķermenis {pozīcija: absolūts; platums: 100%; augstums: 100%} 

6. darbība

Mēs ierakstīsim savā .ccs klases "3d-text" rekvizītus, kurus bijām komentējuši 3. solī. Sākumā definēsim fontu, man īpaši patīk izmantot fontu "Helvetica Neue", protams, izmantojiet to ar vēlamo fontu. Šajā gadījumā es iestatīšu fonta lielumu aptuveni 80 pikseļi; treknrakstā vai treknrakstā … Un šoreiz atstāšu to baltā krāsā. Ja mēs to redzēsim savā pārlūkprogrammā, mēs pamanīsim, ka teksts ir pazudis, tas ir tāpēc, ka esam to ievietojuši baltā krāsā un pārlūkprogrammu fons ir arī balts …

 ķermenis {pozīcija: absolūts; platums: 100%; augstums: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; fonta lielums: 80 pikseļi; fonta svars: treknraksts; krāsa: #fff; } 

Pārlūkprogrammā mēs redzēsim, ka teksts pazūd
PALIELINĀT

7. solis

Mēs redzējām, ka iepriekšējā solī teksts pazuda, tagad mums ir nepieciešams, lai tas parādītos un ar 3D efektu. Šim nolūkam mūsu tekstam ir jāpievieno tikai ēna, izmantojot teksta-ēnas īpašību, kā norādīts tālāk.

 ķermenis {pozīcija: absolūts; platums: 100%; augstums: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; fonta lielums: 80 pikseļi; fonta svars: treknraksts; krāsa: #fff; teksta ēna: 0 1px 0 #ccc; } 

PALIELINĀT

Mēs redzam, ka esam sasnieguši nelielu ēnojuma efektu, taču ar to nepietiek, lai tas izskatītos 3D formātā, par laimi, css ļauj mums apvienot vairākas ēnas teksta ēnu īpašumā, kas atdalīts ar komatu, mēs to izmantosim, lai ievietotu vairākus ēnas, kas atrodas citā attālumā no mūsu teksta, un ar dažādiem krāsu toņiem no tumšākas uz gaišāku, lai radītu efektu, taču mums ir arī jāapvieno šīs ēnas, izmantojot rgba krāsas un caurspīdīgās plēves, lai beigās iegūtu šo izkliedes efektu ēnojums.
Tādā veidā mūsu css kods izskatītos šādi.

 ķermenis {pozīcija: absolūts; platums: 100%; augstums: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; fonta lielums: 80 pikseļi; fonta svars: treknraksts; krāsa: #fff; teksta ēna: 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); } 

Un efekta rezultāts būtu šāds …
PALIELINĀT
Tas viss pagaidām ir šeit .zip ar failiem, visus jautājumus vai ieteikumus var nosūtīt, izmantojot komentārus, apsveikumus …
text_3d20150917130359.zip 694 baiti 217 lejupielādesVai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu