3D -teksteffekt med CSS

Lad os se, hvordan det gøresVi får brug for:

• Grundlæggende kendskab til HTML og CSS
• En kode editor
• Vores browser

Trin 1

Vi opretter en mappe på vores lokale websted for at gemme de filer, vi skal bruge, jeg vil kalde det "text_3d" i det endnu et opkald css
FORSTØRRE
FORSTØRRE

Trin 2

Vi går til kodeeditoren og opretter en ny index.html -fil, som vi vil gemme i roden af ​​"3d_text" -mappen, som vi oprettede i det foregående trin, hvor vi skriver vores grundlæggende html -struktur og tilføjer henvisningen til en css -fil kaldet "style. ccs", som vi vil oprette senere.
html -kode

Trin 3

Vi tilføjer en linje inde i kroppen, hvor vi vil placere en etiket

hvortil vi vil tildele klassen "3d-tekst", som vi derefter vil oprette i .css-filen, vil jeg placere enhver tekst inde i denne etiket for at teste.

3D-teksteffekt

Hvis vi ser det i browseren lige nu, vil vi ikke se store ændringer, bare en normal og aktuel tekst, så vi kan få et 3d -udseende, er det nødvendigt at definere nogle egenskaber gennem css. Gå efter det.
FORSTØRRE

Trin 4

I vores kode -editor vil vi oprette en ny .css -fil, som jeg vil kalde style.css, i denne vil vi placere egenskaberne, så vores tekst har den 3D -effekt, som vi ønsker at opnå.

Trin 5

Vi begynder at redigere vores css først, vi definerer størrelsen af ​​vores krop, for dette vil vi give den en absolut position med en bredde og højde på 100%.

 krop {position: absolut; bredde: 100%; højde: 100%} 

Trin 6

Vi vil skrive i vores .ccs egenskaberne for klassen "3d-tekst", som vi havde kommenteret i trin 3. Vi starter med at definere skrifttypen, jeg kan især godt lide at bruge "Helvetica Neue" skrifttype, selvfølgelig kan du brug den med den skrifttype, du ønsker. I dette tilfælde vil jeg indstille skriftstørrelsen til omkring 80px; fed eller fed type … Og denne gang lader jeg den stå i hvidt. Hvis vi ser det i vores browser, vil vi bemærke, at teksten forsvandt, det er fordi vi har placeret den i hvidt, og baggrunden for browserne er også hvid …

 krop {position: absolut; bredde: 100%; height: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; skrifttype: 80px; skrifttype-vægt: fed; farve: #fff; } 

Vi vil se i browseren, at teksten forsvinder
FORSTØRRE

Trin 7

Vi så, at i det forrige trin forsvandt teksten, nu har vi brug for, at den vises og med en 3D -effekt. Til dette behøver vi kun at tilføje en skygge til vores tekst ved hjælp af egenskaben tekst-skygge, som følger.

 krop {position: absolut; bredde: 100%; height: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; skrifttype: 80px; skrifttype-vægt: fed; farve: #fff; tekstskygge: 0 1px 0 #ccc; } 

FORSTØRRE

Vi ser, at vi har opnået en lille skyggeeffekt, men det er ikke nok til at få det til at se 3D ud, heldigvis giver css os mulighed for at kombinere flere skygger inden for tekst-skyggeegenskaben adskilt af et komma, vi vil drage fordel af dette til at placere flere skygger i en anden afstand fra vores tekst og med forskellige farvetoner fra en mørkere til en lysere for at skabe effekten, men vi skal også kombinere disse skygger ved hjælp af rgba -farver og transparenter for at give den diffusionseffekt i slutningen af skygge.
På denne måde ville vores css -kode se sådan ud.

 krop {position: absolut; bredde: 100%; height: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; skrifttype: 80px; skrifttype-vægt: fed; farve: #fff; tekstskygge: 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); } 

Og resultatet af effekten ville være følgende …
FORSTØRRE
Dette er alt for nu her er en .zip med filerne, eventuelle spørgsmål eller forslag kan sendes gennem kommentarerne, hilsner …
text_3d20150917130359.zip 694 bytes 217 DownloadsKan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt