3D-teksteffect met CSS

Laten we eens kijken hoe het gedaan isWij hebben nodig:

• Basiskennis van HTML en CSS
• Een code-editor
• Onze browser

Stap 1

We zullen een map op onze lokale site maken om de bestanden op te slaan die we nodig hebben, ik noem het "text_3d" erin een andere oproep css
VERGROTEN
VERGROTEN

Stap 2

We gaan naar de code-editor en maken een nieuw index.html-bestand dat we opslaan in de hoofdmap van de map "3d_text" die we in de vorige stap hebben gemaakt, waarin we onze basis-html-structuur zullen schrijven en de verwijzing naar een css-bestand genaamd "style.ccs" dat we later zullen maken.
HTML code

Stap 3

We zullen een regel in de body toevoegen waarin we een label zullen plaatsen

waaraan we de klasse "3d-tekst" zullen toewijzen die we vervolgens in het .css-bestand zullen maken, zal ik elke tekst in dit label plaatsen om te testen.

3D-teksteffect

Als we het nu in de browser zien, zullen we geen grote veranderingen zien, alleen een normale en huidige tekst, zodat we een 3D-weergave kunnen hebben, het is nodig om enkele eigenschappen te definiëren via css. Ga ervoor.
VERGROTEN

Stap 4

In onze code-editor zullen we een nieuw .css-bestand maken dat ik style.css zal noemen. Hierin zullen we de eigenschappen plaatsen zodat onze tekst dat 3D-effect heeft dat we willen bereiken.

Stap 5

We zullen beginnen met het bewerken van onze css, eerst zullen we de grootte van ons lichaam definiëren, hiervoor zullen we het een absolute positie geven met een breedte en hoogte van 100%.

 lichaam {positie: absoluut; breedte: 100%; hoogte: 100%} 

Stap 6

We zullen in onze .ccs de eigenschappen voor de klasse "3d-text" schrijven die we in stap 3 hebben becommentarieerd. We zullen beginnen met het definiëren van het lettertype, ik gebruik vooral het lettertype "Helvetica Neue", natuurlijk kunt u gebruik het met het gewenste lettertype. In dit geval stel ik de lettergrootte in op ongeveer 80px; vetgedrukt of vetgedrukt … En deze keer laat ik het in het wit. Als we het in onze browser zien zullen we merken dat de tekst verdwenen is, dat komt omdat we het in het wit hebben geplaatst en de achtergrond van de browsers ook wit is…

 lichaam {positie: absoluut; breedte: 100%; hoogte: 100%} .3d_text {font-familie: "Helvetica Neue", Helvetica, Arial, schreefloos; lettergrootte: 80px; lettergewicht: vet; kleur: #fff; } 

We zullen in de browser zien dat de tekst verdwijnt
VERGROTEN

Stap 7

We zagen dat in de vorige stap de tekst verdwenen is, nu moeten we deze laten verschijnen en met een 3D-effect. Hiervoor hoeven we alleen een schaduw aan onze tekst toe te voegen met behulp van de eigenschap text-shadow, als volgt.

 lichaam {positie: absoluut; breedte: 100%; hoogte: 100%} .3d_text {font-familie: "Helvetica Neue", Helvetica, Arial, schreefloos; lettergrootte: 80px; lettergewicht: vet; kleur: #fff; tekstschaduw: 0 1px 0 #ccc; } 

VERGROTEN

We zien dat we een licht schaduweffect hebben bereikt, maar het is niet genoeg om het er 3D uit te laten zien, gelukkig stelt css ons in staat om verschillende schaduwen te combineren binnen de tekst-schaduweigenschap, gescheiden door een komma, we zullen hiervan profiteren om meerdere te plaatsen schaduwen op een andere afstand van onze tekst en met verschillende kleurtonen van een donkere tot een lichtere, om het effect te creëren, maar we moeten deze schaduwen ook combineren met RGB-kleuren en transparanten om dat diffusie-effect aan het einde van de schaduw.
Op deze manier zou onze css-code er als volgt uitzien.

 lichaam {positie: absoluut; breedte: 100%; hoogte: 100%} .3d_text {font-familie: "Helvetica Neue", Helvetica, Arial, schreefloos; lettergrootte: 80px; lettergewicht: vet; kleur: #fff; tekst-schaduw: 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); } 

En het resultaat van het effect zou het volgende zijn…
VERGROTEN
Dit is alles voor nu hier is een .zip met de bestanden, eventuele vragen of suggesties kunnen worden verzonden via de opmerkingen, groeten …
text_3d20150917130359.zip 694 bytes 217 DownloadsVond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven