- 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.
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.3D-teksteffekt
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
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ØRREDette 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
