Come realizzare coi CSS sfondo in stile di fibra di carbonio in una pagina web.

In questo tutorial ti insegno come con attraverso linguaggio Css senza usare un disegno realizzare  sfondo in stile della fibra di carbonio usando proprieta gradiente dei CSS . Dopo di che potrai semplicemente copiare il codice di questo sfondo e inserirlo sul proprio sito web o decorare solo una parte e il tuo sito potrebbe cambiare drasticamente il suo look !

Nella realizzazione dello sfondo utilizzeremo come base due proprieta background con diversi valori. Il primo avra un  gradient lineare inclinato di 45deg che si ripete,  e altro background sara un gradiente radiale dal centro verso  top at 50  0%, per simulare il bagliore di luce che potete anche non usare, perche  l'ho inserito soltano di dare piu effetto al esempio :

Cliccare per vedere il codice

/*html*/
<div class="carbon">
<p .prova_titolo>carbon</p>
<hr>
<div>
/*CSS*/
@import url('https://fonts.googleapis.com/css?family=Orbitron:400,900');
.carbon {
background: linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%) repeat scroll 0 0 / 0.375em 0.375em,
linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%) repeat scroll 0.1875em 0.1875em / 0.375em 0.375em, rgba(0, 0, 0, 0)
radial-gradient(at 50% 0 , #484847, #090909) repeat scroll 0 0 / 100% 100%;
 
}
.prova_titolo  {
  color: rgba(0, 0, 0, 0.3);
  font-size: 8em;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 15px;
  text-shadow: rgba(241, 241, 241, 0.05) 3px 2px 3px;
}
hr {
    background: -moz-linear-gradient(left center , rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    border: 0 none;
    box-shadow: 3px 2px 3px rgba(241, 241, 241, 0.05);
    height: 1px;
    width: 90%;
}

L'effetto di sfondo che otteniamo posiamo moltiplicare e modificare atraverso la grandezza dei puntini  cambiando la loro grandezza 0 0 / 0.375em 0.375em   Fate delle prove  con i valori indicati in unità di em, e vedrete  un disegno completamente diverso

Ho inserito anche del testo al interno del tag  <p>, che aumenta l'effeto visivo e ho agiunto linea separatrice atraverso tag html  <hr>, decorato insolitamente, utilizzando lo stesso concetto dello sfondo. Il risultato è stato quello che potete vedere qui sotto

carbon


Ora vediamo  nel dettaglio come ho realizzato questo effetto sul mio sito perché sicuramente troverete dei problemi sui vostri template, perche ci sono gia dei stili predefiniti che sicuramente influenzeranno visualizzazione dell'effetto  finale.

Prima di tutto ho importato un font del google, come farlo abbiamo descritto qui , che il mio template non posiede,  forse dovresti farlo anche tu per essere sicuro che sul tuo sito vedrai la stessa  come quella che vedi nel esempio.

Puoi  nel mio template per il tag <hr> c'era gia scritto uno stile e quindi o dovuto dare la precedenza allo stile del mio esempio per realizzare la riga separatrice con colore scuro .

Dopo di che  vorrei far notare che i gradient dello sfondo sono impostati in em e quindi come la base di calcoli, come sapiate per unita em, è la grandezza del vostro font predefinito. Nel tuo caso per raggiungere effetto uguale uguale a quello che vedi  il font di base dovrebbe avere la grandezza di 16 px   font-size: 16px ;

E puoi ho dovuto cambiare il colore del testo perché nel mio caso è quasi trasparente per poter vedere lo sfondo ed anche qui il mio stile del esempio è entrato in conflitto con il colore predefinito per il tag  p nel mio template. E quindi ho dovuto dare la precedenza al mio stile atraverso la proprieta !important.

Quindi, quello che voglio dire che potrebbe sucedere che se copiate semplicemente il codice non ragiungerete l'effetto subito ma dovrete tribulare un puo e scoprire tutti i conflitti che possono sorgere con i stili del  vostro template. Come risolvere tutti i conflitti  potrete scoprire nel nostro corso "CSS pratica", e una piccola pubblicità del nostro corso, ma vale la pena di passarlo un volta per capire dove mettere le mani nel futuro per cambiare l'aspetto del vostro sito.

Letto 451 volte