Effetto testo 3D con CSS

Vediamo come si faAvremo bisogno:

• Conoscenza base di HTML e CSS
• Un editor di codice
• Il nostro browser

Passo 1

Creeremo una cartella nel nostro sito locale per salvare i file di cui avremo bisogno, la chiamerò "text_3d" al suo interno un'altra chiamata css
INGRANDIRE
INGRANDIRE

Passo 2

Andremo nell'editor del codice e creeremo un nuovo file index.html che salveremo nella radice della cartella “3d_text” che abbiamo creato nel passaggio precedente, in cui scriveremo la nostra struttura html di base e aggiungeremo il riferimento a un file css chiamato "style.ccs" che creeremo in seguito.
codice html

Passaggio 3

Aggiungeremo una linea all'interno del corpo in cui posizioneremo un'etichetta

a cui assegneremo la classe "3d-text" che poi creeremo nel file .css, inserirò qualsiasi testo all'interno di questa etichetta da testare.

Effetto testo 3D

Se lo vediamo nel browser in questo momento non vedremo grandi cambiamenti, solo un testo normale e corrente, in modo che possiamo avere un aspetto 3d è necessario definire alcune proprietà tramite css. Fallo.
INGRANDIRE

Passaggio 4

Nel nostro editor di codice creeremo un nuovo file .css che chiamerò style.css in questo posizioneremo le proprietà in modo che il nostro testo abbia quell'effetto 3D che vogliamo ottenere.

Passaggio 5

Inizieremo a modificare il nostro css prima definiremo la dimensione del nostro corpo, per questo gli daremo una posizione assoluta con una larghezza e un'altezza del 100%.

 corpo {posizione: assoluta; larghezza: 100%; altezza: 100%} 

Passaggio 6

Scriveremo nel nostro .ccs le proprietà per la classe "3d-text" che avevamo commentato nel passaggio 3. Inizieremo definendo il font, mi piace particolarmente usare il font "Helvetica Neue", ovviamente puoi usalo con il carattere che desideri. In questo caso imposterò la dimensione del carattere a circa 80px; grassetto o grassetto … E questa volta lo lascerò in bianco. Se lo vediamo nel nostro browser noteremo che il testo è scomparso, perché lo abbiamo posizionato in bianco e anche lo sfondo dei browser è bianco …

 corpo {posizione: assoluta; larghezza: 100%; altezza: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; dimensione del carattere: 80px; font-weight: grassetto; colore: #fff; } 

Vedremo nel browser che il testo scompare
INGRANDIRE

Passaggio 7

Abbiamo visto che nel passaggio precedente il testo è scomparso, ora abbiamo bisogno che appaia e con un effetto 3D. Per questo abbiamo solo bisogno di aggiungere un'ombra al nostro testo usando la proprietà text-shadow, come segue.

 corpo {posizione: assoluta; larghezza: 100%; altezza: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; dimensione del carattere: 80px; font-weight: grassetto; colore: #fff; text-shadow: 0 1px 0 #ccc; } 

INGRANDIRE

Vediamo che abbiamo ottenuto un leggero effetto di ombreggiatura, ma non è sufficiente per farlo sembrare 3D, fortunatamente css ci permette di combinare più ombre all'interno della proprietà text-shadow separate da una virgola, ne approfitteremo per posizionare più ombre a una distanza diversa dal nostro testo e con tonalità di colore diverse da una più scura a una più chiara, per creare l'effetto, ma dobbiamo anche combinare queste ombre usando colori e trasparenze rgba per dare quell'effetto di diffusione alla fine del ombreggiatura.
In questo modo il nostro codice CSS sarebbe simile a questo.

 corpo {posizione: assoluta; larghezza: 100%; altezza: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; dimensione del carattere: 80px; font-weight: grassetto; colore: #fff; text-shadow: 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 5 pixel rgba (0, 0, 0, .1), 0 1 pixel 3 pixel rgba (0, 0, 0, .3), 0 3 pixel 5 pixel rgba (0, 0, 0, .2), 0 5 pixel 10 pixel rgba (0 , 0, 0, .25), 0 10px 10px rgba (0, 0, 0, .2), 0 20px 20px rgba (0, 0, 0, .15); } 

E il risultato dell'effetto sarebbe il seguente …
INGRANDIRE
Questo è tutto per ora ecco un .zip con i file, eventuali domande o suggerimenti possono essere inviati tramite i commenti, saluti …
text_3d20150917130359.zip 694 byte 217 downloadTi è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo