3D teksto efektas su CSS

Pažiūrėkime, kaip tai daromaMums reikės:

• Pagrindinės HTML ir CSS žinios
• Kodų redaktorius
• Mūsų naršyklė

1 žingsnis

Mes sukursime aplanką savo vietinėje svetainėje, kad išsaugotume reikalingus failus, aš jį pavadinsiu „text_3d“ kitu skambučiu css
DIDELIS
DIDELIS

2 žingsnis

Mes eisime į kodų redaktorių ir sukursime naują failą index.html, kurį išsaugosime aplanko „3d_text“, kurį sukūrėme atlikdami ankstesnį veiksmą, šaknyje, kuriame parašysime savo pagrindinę html struktūrą ir pridėsime nuorodą į css failą pavadinimu „style. ccs“, kurį sukursime vėliau.
html kodą

3 žingsnis

Kūno viduje pridėsime liniją, kurioje įdėsime etiketę

kuriai priskirsime klasę „3d-text“, kurią vėliau sukursime .css faile, bet kurį tekstą įdėsiu į šią etiketę.

3-D teksto efektas

Jei dabar matysime tai naršyklėje, nematysime esminių pakeitimų, o tik įprastą ir dabartinį tekstą, kad galėtume turėti 3D išvaizdą, būtina apibrėžti kai kurias savybes per css. Pirmyn.
DIDELIS

4 žingsnis

Savo kodų redaktoriuje sukursime naują .css failą, kurį vadinsiu style.css, čia išdėstysime ypatybes, kad mūsų tekstas turėtų tą 3D efektą, kurį norime pasiekti.

5 žingsnis

Pirmiausia pradėsime redaguoti savo css, nustatysime savo kūno dydį, todėl suteiksime jam absoliučią padėtį, kurios plotis ir aukštis yra 100%.

 body {pozicija: absoliuti; plotis: 100%; aukštis: 100%} 

6 žingsnis

Mes įrašysime savo .ccs klasės „3d-text“ ypatybes, kurias komentavome atlikdami 3 veiksmą. Pradėsime nuo šrifto apibrėžimo, man ypač patinka naudoti šriftą „Helvetica Neue“, žinoma, galite naudokite jį su norimu šriftu. Šiuo atveju šrifto dydį nustatysiu apie 80 pikselių; paryškintas ar paryškintas tipas … Ir šį kartą paliksiu baltą. Jei pamatysime tai savo naršyklėje, pastebėsime, kad tekstas dingo, nes mes įdėjome jį į baltą spalvą, o naršyklių fonas taip pat yra baltas …

 body {pozicija: absoliuti; plotis: 100%; aukštis: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; šrifto dydis: 80 taškų; šrifto svoris: paryškintas; spalva: #fff; } 

Naršyklėje pamatysime, kad tekstas dingsta
DIDELIS

7 žingsnis

Mes matėme, kad ankstesniame žingsnyje tekstas dingo, dabar mums reikia, kad jis pasirodytų ir turėtų 3D efektą. Tam mums tereikia pridėti šešėlį prie savo teksto, naudojant teksto šešėlio ypatybę, kaip nurodyta toliau.

 body {pozicija: absoliuti; plotis: 100%; aukštis: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; šrifto dydis: 80 pikselių; šrifto svoris: paryškintas; spalva: #fff; teksto šešėlis: 0 1px 0 #ccc; } 

DIDELIS

Matome, kad pasiekėme nedidelį atspalvio efektą, tačiau to nepakanka, kad jis atrodytų 3D, laimei, „css“ leidžia sujungti kelis šešėlius teksto šešėlių nuosavybėje, atskirtus kableliu, mes pasinaudosime tuo, kad įdėsime kelis šešėliai, esantys skirtingu atstumu nuo mūsų teksto ir skirtingi spalvų tonai - nuo tamsesnio iki šviesesnio, kad sukurtume efektą, tačiau taip pat turime derinti šiuos šešėlius, naudodami rgba spalvas ir skaidres, kad gautume tą sklaidos efektą teksto pabaigoje. šešėliavimas.
Tokiu būdu mūsų css kodas atrodytų taip.

 body {pozicija: absoliuti; plotis: 100%; aukštis: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; šrifto dydis: 80 pikselių; šrifto svoris: paryškintas; spalva: #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); } 

O efekto rezultatas būtų toks …
DIDELIS
Šiuo metu viskas yra čia .zip su failais, bet kokie klausimai ar pasiūlymai gali būti siunčiami per komentarus, sveikinimus …
text_3d20150917130359.zip 694 baitai 217 atsisiuntimaiAr jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką