3D -tekst CSS

“3D-teksten står for“ tredimensjonal ”tekst. 3D -teksteffekten brukes til å gi en 3D -visning av teksten. 3D-teksteffekten betyr at vi gir et tredimensjonalt utseende til teksten vår. Vi kan skrive teksten vår i en HTML -fil og deretter legge til stil og 3D -effekt til teksten ved å bruke “CSS.”Vi oppretter“ CSS ”-filen og legger til 3D -effekten på den gitte teksten i denne filen. 3D-teksteffekten kan opprettes ved hjelp av tekst-skygge-egenskapen i “CSS.”I denne guiden vil vi gi en 3D -effekt på teksten vår ved å bruke egenskapen“ CSS ”. Vi kommer til å forklare eksempler her.”

Eksempel 1

I dette eksemplet må vi først opprette HTML -filen før vi oppretter CSS -filen. Vi vil utføre eksempler i Visual Code Studio. Du må opprette en ny fil med filnavnet og bruke ".HTML ”Fil Extension for HTML -filen. Skriv deretter følgende kode for å gjengi "Hello World" i nettleseren.

Først må vi nevne dokumenttypen, som er "HTML" her. Husk en ting enhver tag vi må åpne må være lukket med en avsluttende tag. Som den avsluttende taggen til “" vil være ”.”Legg deretter til“ ”-merket, og inne i denne“ ”-taggen har vi den nye taggen, som er“ Meta ”-merket; Vi satte karaktersettet som "Charset", som er "UTF-8". Det vil tillate bruk av flere tegn i et dokument.

Åpne deretter en "" -kode og legg til en tittel som er "dokument" her og lukker denne "" -merket ved å bruke ".”Etter det må vi gi lenken til“ CSS ”-filen. For dette bruker vi "lenke" -merket og her "rel" -attributtet for å definere forholdet mellom den koblede siden og den nåværende siden, som er nevnt som et "stilark" her.

Deretter brukes "href", og vi gir navnet på vår "css" -fil, som vi vil koble til denne "html" -filen. Navnet på vår "CSS" -fil er "Style.CSS ”Lukk hodekoden“ ”her. Og åpne en ny kropps tag ".”I denne kroppen har vi“ Span Class ”, som er lik“ tekst ”, og den aksepterer teksten, som er skrevet som“ Hello World.”Lukk også denne taggen som“. Lukk deretter alle de gjenværende taggene. Den gjenværende taggen vi ikke lukk. Etter dette må du bare lagre denne filen. Og gå til “stilen.CSS ”-fil for styling og å gi en 3D -effekt på denne teksten.

Nå må du opprette en annen fil med navnet du får i "href", og vi gir "stilen.CSS ”filnavn for kobling. Så vi opprettet vår "CSS" -fil med dette navnet. I denne “stilen.css ”-fil, vi vil gjøre litt styling på teksten.

Vi kommer til å legge til stil. Fra og med kroppen gir vi bakgrunnsfargen som “Dimgrey.”Det neste vi har gjort er å style teksten, og tekstens plassering er“ absolutt ”her som vil plassere teksten der vi vil plassere den. Nå gir vi henholdsvis "topp" og "riktig" marginer som "20%" og "30%", henholdsvis ". Vi bruker “Transform: Translate (50% - 50%),” og ved å bruke dette kan vi rotere, skjeve eller oversette teksten vår.

La oss gå videre og transformere teksten vår til “store bokstaver.”Vi kommer til å sette fontfamilien til“ Verdana.”Øk deretter skriftstørrelsen til“ 6EM ”og“ Font-Weight ”til“ 500 ”. "Font-Weight" setter tykkelsen og tynnheten av skriften. Vi setter "fargen" på skriften som "brun.”Vi vil legge til flere lag med tekstskygge her. Den første verdien brukes til den horisontale forskyvningen som vi skal sette som "1px", som betyr 1 piksler, og den andre verdien er for den vertikale forskyvningen, som igjen er "1px, og den tredje er for" uskarphet " som også er "1px" og fargen vi skal velge er "#919191" som er en grå nyanse igjen.

Nå vil vi legge til et nytt lag der vi bruker en horisontalt forskyvning som "1px", men vertikalen som "2px". Samme som ovenfor, vil vi endre den vertikale forskyvningen i hver linje, men den horisontale og uskarpe forskyvningen vil være den samme som vist på bildet. Så tekstskyggen vil ta form. Så har vi en endelig ting å gjøre, vi må legge til noen flere tekstskygge-lag, men denne gangen skal vi bruke “RGBA” fargeverdier der “R” er for “Red”, “G” er For “Green” er “B” for “Blå” og “A” er for “Alpha” -verdi. Vi satte den horisontale forskyvningen som "1px", den vertikale forskyvningen som "18px", "uskarphet" -forskyvningen som "6px", og "RGBA" er satt som "(16, 16, 16, 0.2) ”Der“ 16 ”er for rødt, er neste“ 16 ”for grønt, andre siste“ 16 ”er for blått og verdien av alfa -kanalen er satt som“ 0.4 ”. I de neste linjene endrer vi de vertikale forskyvningene og uskarphetsområdene i hver linje. Det siste vi gjør er å endre alfa -kanalen også.

I Visual Studio Code kjører vi denne koden i nettleseren, så for dette, gå til "utvidelsen" eller trykk "Ctrl+Shift+X" og søk "Åpne i nettleseren" og installer den.

Etter å ha installert dette, må du høyreklikke på HTML-filen og klikke på "Åpne i standard nettleser" eller trykke på "Alt + B" for å åpne denne koden i nettleseren. Deretter blir følgende utgang gjengitt på skjermen.

Eksempel nr. 2

I dette eksemplet bruker vi den samme HTML -filen, men vi skal bruke et annet stilark her. Vi vil gi navnet på en annen “CSS” -fil med den samme “HTML” -koden. Navnet på den andre “CSS” -filen er “Stylesheet1.CSS, ”som vist nedenfor.

I CSS -filen endrer vi koden litt og endrer 3D -effekten av teksten som er gitt i HTML -filen vår. La oss prøve denne koden.

Her setter vi bakgrunnsfargen “Blue-Violet.”Og“ posisjonen ”til teksten er absolutt som i eksemplet ovenfor, men her setter vi toppverdiene som“ 15px ”og“ venstre ”som“ 25px ”. I transformasjon satte vi “skew (-63dg)” og “skala (1,.5) ”. "Skjevet" vil skjule elementene til "-63dg" horisontalt. "Skala" -funksjonen vil endre størrelse på elementene i horisontale og vertikale retninger. Begge er innebygde funksjoner. Så har vi en teksttransformasjon som er "Transform: Arverits", som viser teksten den samme som den er gitt i HTML -filen. Vi bruker "font-family" som "Times New Roman", "fontstørrelsen" er "7em", og vekten "fontvekt" er "500".

Vi setter "fargen" på skriften "hvit" her. Deretter skal vi bruke egenskapen "tekstskygge". I dette setter vi den horisontale forskyvningen som "-1px", vertikal forskyvning som "-1px", uskarp som "1px", og velger farge "#808080," som er koden til den grå fargen. I de neste linjene vil vi endre alle horisontale og vertikale forskyvninger, men uskarphetsforskyvningen og fargen vil være den samme. Vi vil legge til flere tekstskygge-lag, men her bruker vi “RGBA” -verdier. I dette (0, 0, 128, 0.75), satte vi “0” for “Rød”, “0” for “Green”, “128” for “Blue” og “0.75 ”for“ Alpha.”“ Z-indeks ”er her for å kontrollere den vertikale rekkefølgen på elementet som overlapper. Utgangen er her.

Konklusjon

Vi har skrevet denne guiden for deg slik at du kan forstå arbeidet med 3D -tekst i Visual Studio Code. Vi har utført disse eksemplene, som er gitt i denne guiden i Visual Code Studio. Vi diskuterte hvordan vi lager HTML- og CSS -filer hver for seg og koblet deretter begge filene for å bruke CSS -stilfilen i HTML -filen vår. Denne guiden vil hjelpe deg å forstå bruken av “HTML” og “CSS.”