Come realizzare testo 3D in CSS con riflesso e prospettiva

    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.

<div class=”block”><!-- lo sfondo dell'effeto   -->
<!-- Contenitore di base  -->
    <div class="container">
        <span class="render">Ioeweb.it</span><!-- testo -->
        <span class="render shadow">___________</span><!-- linea del ombra -->
        <span class="render reflect">Ioeweb.it</span><!-- riflessione -->
    </div>
<!-- /fine contenitore -->
</div>

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;.

.block {
    height: 100%;
}
.block {
    margin: 0;
    padding: 0;
    background-color: #454545;
    background-image: linear-gradient(45deg, transparent, transparent 48%, rgba(255, 255, 255, .3) 48%, rgba(255, 255, 255, .3) 52%, transparent 52%);
    background-size: 10px 10px;
    position: absolute;
    width: 100%;
    height: 100%;font-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.block:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}

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à

.render {
    display: inline-block;
    z-index: 0;
    position: relative;
    line-height: 0.55em;
    height: 0.7em;
    -moz-transform: rotateY(45deg);
    -webkit-transform: rotateY(45deg);
    transform: rotateY(45deg);
    font-family: 'Bree Serif', serif;
    font-size: 10em;
    color: #f5f5f5;
    text-shadow: white 0.006em 0.006em 1px, rgba(0, 0, 0, 0.15) -3px 7px 10px, #d0d0d0 -1px 1px 1px, #d0d0d0 -2px 1px 1px, #d0d0d0 -3px 1px 1px, #d0d0d0 -4px 1px 1px, #d0d0d0 -5px 1px 1px, #d0d0d0 -6px 1px 1px, #d0d0d0 -7px 1px 1px, #d0d0d0 -8px 1px 1px, #d0d0d0 -9px 1px 1px, #d0d0d0 -10px 1px 1px, #d0d0d0 -11px 1px 1px, #d0d0d0 -12px 1px 1px, rgba(255, 255, 255, 0.6) -5px 2px 100px;
}
.render.reflect {
    z-index: 0;
    opacity: 0.2;
    -moz-transform: rotateX(180deg) rotateY(-45deg);
    -webkit-transform: rotateX(180deg) rotateY(-45deg);
    transform: rotateX(180deg) rotateY(-45deg);
}
.render.shadow {
    opacity: 0.6;
    z-index: 2;
    color: transparent;
    letter-spacing: -0.02em;
    position: absolute;
    width: 25%;
    top: 0.44em;
    left: 0.1em;
    -moz-transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg);
    -webkit-transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg);
    transform: rotateX(-100deg) rotateY(-5deg) rotateZ(25deg);
    text-shadow: rgba(0, 0, 0, 0.8) 0 0 30px, rgba(0, 0, 0, 0.8) 0 0 80px, black 0 0 150px, black 0 0 150px, black 0 0 250px, black 0 0 250px, white -0.15em 0.4em 250px;
}

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.