3D -teksteffekt med CSS

La oss se hvordan det gjøresVi trenger:

• Grunnleggende kunnskap om HTML og CSS
• En kodeditor
• Nettleseren vår

Trinn 1

Vi vil opprette en mappe på vårt lokale nettsted for å lagre filene vi trenger, jeg vil kalle det "text_3d" i det en annen samtale css
FORSTØRRE
FORSTØRRE

Steg 2

Vi går til kodeditoren og oppretter en ny index.html -fil som vi lagrer i roten til "3d_text" -mappen som vi opprettet i forrige trinn, der vi skriver vår grunnleggende html -struktur og legger til referansen til en css -fil kalt "style. ccs" som vi skal lage senere.
html -kode

Trinn 3

Vi vil legge til en linje inne i kroppen der vi skal plassere en etikett

som vi vil tildele klassen "3d-tekst" som vi deretter skal lage i .css-filen, vil jeg plassere all tekst inne i denne etiketten for å teste.

3D-teksteffekt

Hvis vi ser det i nettleseren akkurat nå, vil vi ikke se store endringer, bare en normal og aktuell tekst, slik at vi kan ha et 3d -utseende, er det nødvendig å definere noen egenskaper gjennom css. Gå for det.
FORSTØRRE

Trinn 4

I vår kodeditor vil vi lage en ny .css -fil som jeg vil kalle style.css i denne plasserer vi egenskapene slik at teksten vår har den 3D -effekten som vi ønsker å oppnå.

Trinn 5

Vi begynner å redigere vår css først, vi definerer størrelsen på kroppen vår, for dette vil vi gi den en absolutt posisjon med en bredde og høyde på 100%.

 kropp {posisjon: absolutt; bredde: 100%; høyde: 100%} 

Trinn 6

Vi vil skrive i våre .ccs egenskapene for klassen "3d-tekst" som vi hadde kommentert i trinn 3. Vi starter med å definere skriften, jeg liker spesielt å bruke "Helvetica Neue" -fonten, selvfølgelig kan du bruk den med skriften du vil ha. I dette tilfellet vil jeg sette skriftstørrelsen til ca 80px; fet eller fet skrift … Og denne gangen lar jeg den stå i hvitt. Hvis vi ser det i nettleseren vår, vil vi legge merke til at teksten forsvant, det er fordi vi har plassert den i hvitt og bakgrunnen til nettleserne er også hvit …

 kropp {posisjon: absolutt; bredde: 100%; høyde: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; skriftstørrelse: 80px; font-weight: fet skrift; farge: #fff; } 

Vi vil se i nettleseren at teksten forsvinner
FORSTØRRE

Trinn 7

Vi så at i forrige trinn forsvant teksten, nå trenger vi den for å vises og med en 3D -effekt. For dette trenger vi bare å legge til en skygge i teksten vår ved hjelp av egenskapen tekst-skygge, som følger.

 kropp {posisjon: absolutt; bredde: 100%; høyde: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; skriftstørrelse: 80px; font-weight: fet skrift; farge: #fff; tekstskygge: 0 1px 0 #ccc; } 

FORSTØRRE

Vi ser at vi har oppnådd en liten skyggeeffekt, men det er ikke nok til å få det til å se 3D ut, heldigvis lar css oss kombinere flere skygger i tekst-skyggeegenskapen atskilt med et komma, vi vil dra fordel av dette for å plassere flere skygger i en annen avstand fra teksten vår og med forskjellige fargetoner fra en mørkere til en lysere, for å skape effekten, men vi må også kombinere disse skyggene ved hjelp av rgba -farger og transparenter for å gi den diffusjonseffekten på slutten av skyggelegging.
På denne måten ville css -koden vår se slik ut.

 kropp {posisjon: absolutt; bredde: 100%; høyde: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; skriftstørrelse: 80px; font-weight: fet skrift; farge: #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 av effekten ville bli følgende …
FORSTØRRE
Dette er alt for nå her er et .zip med filene, spørsmål eller forslag kan sendes gjennom kommentarer, hilsener …
text_3d20150917130359.zip 694 byte 217 NedlastingerLikte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng