Da come viene interpretato o meglio decorato e scelto il tipo del testo nella scrittura dei titoli o paragrafi dipende in certi casi lo successo dell'intero progetto web.
Se il testo di articoli è abbastanza facile rendere ben leggibile, vale a dire scegliere le dimensioni e colori ottimali del font e combaciarli con l'idea dei colori principali del sito, nel caso del logo o nome del sito (nei casi in cui logo è visualizzato come testo) o dei titoli degli articoli la cosa cambia e dovresti prestare maggiore attenzione per la loro interpretazione.
In questo articolo, voglio dimostrare una variante piuttosto interessante nella realizzaione del testo in stile 3D, con effetti di trasformazione tridimensionali, in particolare, con effetti di riflessione e prospettiva, senza usare la grafica, usando solo i CSS, inoltre vedrai come usare proprietà di gradiente di CSS per creare uno sfondo insolito per qualsiasi elemento sulla pagina.
Markup HTML
Markup html, direi che è abbastanza semplice, per il contenitore di base ho usato elemento <div> con una classe specifica, e già all'interno di questo blocco ho inserito tutti gli altri elementi necessari. Testo, l'ombra lineare e la riflessione vengono realizzati attraverso tag <span>, con una classe specifica, necessaria per un'ulteriore formazione e stilizzazione gia nei CSS.
CSS
Come la prima cosa realizzeremo lo sfondo per il nostro testo aggiungendo una scatola di involucro per le scatole precedentemente mostrate, creando un altro div con la classe block come esempio, il quale sara riempito dalla sfondo strutturato.
Con aiuto della proprietà background-color: impostiamo colore di base dello sfondo e al interno della proprietà background-image: scriveremo tutto il necessario per realizzare un gradiente lineare linear-gradient, e con aiuto del background-size ridimensioniamo lo sfondo.
Dopo di che per ricreare effetto visivo della luce useremo pseudo elemento block:after, definiamo posizione come position: absolute; e scriveremo altri proprietà necessarie per realizzare un gradiente radiale background-image: radial-gradient(.....);.
Per fare in modo che la nostra scritta si troverà giusto al centro useremo modello di flexbox- display: flex; flex-direction: column; justify-content: center;.
E ora passiamo direttamente alla formattazione e decorazione del nostro effetto. Tutta la struttura comprende quattro elementi, contenitore base, testo, linea del ombra e riflessione del testo.
Come hai gia notato al contenitore di base attribuiremo la classe .container, alienandolo al centro lungo l'asse orizzontale align-self: center; definiamo la sua posizione come relativa con aiuto del position: relative; dopo di che usando la proprietà perspective, creeremo il nostro elemento 3D perspective: 980px;.
Per tutti gli altri elementi al interno del blocco genitore useremo un' unica classe class="render", dopo di che direttamente nei css stilizziamoli con aiuto di varie proprietà
A questo punto direi di vedere piu nel dettaglio certe proprietà che avevo inserito. Come avevo gia detto o meglio scritto la classe principale attribuita a tute le scatole è la class="render". E come hai capito elemento principale del nostro effetto è il nostro testo e ho usato il tag span per dividere elementi inline. Ad ogni elemento avevo applicato proprietà di trasformazione transform, con la funzione rotate, con aiuto di essa ho rotato ogni elemento ad un certo angolo
Dopo di che ho usato la proprietà di ombra per il testo text-shadow con parametri indicati sopra per elemento base con la classe “render” e anche per la linea di sottolineatura con la classe .render.shadow. Alla riflessione avevo indicato livello di opacità come opacity: 0.2;e ho rotato per 180 gradi rispetto l'asse X rotateX(180deg), e rispetto l'asse Y abbiamo realizzato rotazione in senso opposto rotateY(-45deg).
A questo punto direi è tutto, l'effetto della riflessione e della prospettiva per il testo in stile 3d è pronto, resta solo di trovare applicazione giusta per questo effetto . Per esempio, realizzare una scritta in questo stile per la pagina di errore 404 .
Quindi chi ne ha bisogno, troverà dove avvitare questo effetto. Ovimente che modificando colori inclinazione e qualche altro proprietà si possa ottenere effetto ben diverso in linea con il disegno del tuo sito.