- Grundläggande kunskaper i HTML och CSS
- En kodredigerare
- Vår webbläsare
Steg 1
Vi kommer att skapa en mapp på vår lokala webbplats för att spara de filer som vi kommer att behöva, jag kommer att kalla det "text_3d" i det ett annat samtal css
FÖRSTORA
FÖRSTORA
Steg 2
Vi går till kodredigeraren och skapar en ny index.html -fil som vi kommer att spara i roten till mappen "3d_text" som vi skapade i föregående steg, där vi skriver vår grundläggande html -struktur och lägger till referensen till en css -fil som heter "style. ccs" som vi kommer att skapa senare.
html -kod
Steg 3
Vi kommer att lägga till en linje inuti kroppen där vi kommer att placera en etikett
som vi kommer att tilldela klassen "3d-text" som vi sedan kommer att skapa i .css-filen, kommer jag att placera all text inuti denna etikett för att testa.
Om vi ser det i webbläsaren just nu kommer vi inte att se stora förändringar, bara en normal och aktuell text, så att vi kan ha ett 3d -utseende är det nödvändigt att definiera några egenskaper genom css. Gör det.3D-texteffekt
FÖRSTORA
Steg 4
I vår kodredigerare skapar vi en ny .css -fil som jag kommer att kalla style.css i den här placerar vi egenskaperna så att vår text har den 3D -effekten som vi vill uppnå.
Steg 5
Vi kommer att börja redigera vår css först kommer vi att definiera storleken på vår kropp, för detta kommer vi att ge den en absolut position med en bredd och höjd på 100%.
kropp {position: absolut; bredd: 100%; höjd: 100%}
Steg 6
Vi kommer att skriva i våra .ccs egenskaperna för klassen "3d-text" som vi hade kommenterat i steg 3. Vi börjar med att definiera typsnittet, jag gillar särskilt att använda "Helvetica Neue" -teckensnittet, naturligtvis kan du använd den med det teckensnitt du vill ha. I det här fallet kommer jag att ställa in teckenstorleken till cirka 80 pixlar; fet eller fet typ … Och den här gången lämnar jag den i vitt. Om vi ser det i vår webbläsare kommer vi att märka att texten försvann, det är för att vi har placerat den i vitt och bakgrunden på webbläsarna är också vit …
kropp {position: absolut; bredd: 100%; height: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; teckenstorlek: 80px; font-weight: fet; färg: #fff; } Vi kommer att se i webbläsaren att texten försvinner
FÖRSTORA
Steg 7
Vi såg att i föregående steg försvann texten, nu behöver vi att den ska visas och med en 3D -effekt. För detta behöver vi bara lägga till en skugga till vår text med hjälp av egenskapen text-skugga, enligt följande.
kropp {position: absolut; bredd: 100%; height: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; typsnitt: 80px; font-weight: fet; färg: #fff; text-skugga: 0 1px 0 #ccc; }
FÖRSTORA
På så sätt skulle vår css -kod se ut så här.
kropp {position: absolut; bredd: 100%; height: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; teckenstorlek: 80px; font-weight: fet; färg: #fff; text-skugga: 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); } Och resultatet av effekten skulle bli följande …
FÖRSTORADetta är allt för nu här är ett .zip med filerna, eventuella frågor eller förslag kan skickas genom kommentarer, hälsningar …
text_3d20150917130359.zip 694 byte 217 NedladdningarGillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng 
