Conoscere il linguaggio CSS è un requisito cruciale per coloro che vogliono diventare web developer. CSS, insieme ad HTML e JavaScript compongono la base di ogni sito web, poiché con il primo si può determinare lo stile e il layout della pagina, con il secondo definisci la struttura dei contenuti e con JS si possono personalizzare i contenuti rendendoli interattivi.
In particolare, con CSS possiamo generare effetti molto creativi, dando un vero e proprio stile unico alla nostra pagina web. Ma facciamo un passo indietro.
CSS, cos’è?
Il linguaggio CSS (Cascading Style Sheets) è un linguaggio di markup formato da regole che permettono di creare pagine web di grande impatto estetico, compilando i cosiddetti fogli stile. Con CSS sarà possibile personalizzare layout, font, rendendo la pagina adattabile a più dispositivi.
Inoltre, con questo linguaggio è possibile andare a personalizzare lo sfondo della propria pagina web. Tanto che viene messa a disposizione la proprietà background CSS.
Se vogliamo ottenere un effetto sgranato del nostro background, possiamo adottare diverse soluzioni, utilizzando un’immagine .PNG o attraverso un SVG che possiamo creare tramite codice.
Il primo approccio prevede la ricerca di un’immagine sgranata o sfocata. Per farlo basterà interagire con il già citato background CSS. In particolare, con background-image.
Iniziamo scaricando l’immagine sfocatura.png. Dopodiché dobbiamo creare un breve documento HTML e il codice CSS per dare uno stile al container.
<section class="container noise">
<h1>Background sfocato tramite PNG</h1>
</section>
.container{
margin: 0 auto;
display: flex;
width: 100%;
min-height: 33vh;
justify-content: center;
align-items: center;
}
.noise{
background: rgb(182, 34, 58);
background-image: url(/assets/sfocatura.png);
}
Grazie a queste semplici righe di codice otteniamo uno sfondo sfocato all’interno di una pagina web.
Il secondo metodo, tramite SVG, è un po’ più complicato. Creeremo un SVG file che avrà un effetto simile al PNG del tutorial precedente e lo useremo, tramite HTML e CSS, per ottenere un background sfocato.
<!-- svg: first layer -->
<svg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'>
<filter id='noiseFilter'>
<feTurbulence
type='fractalNoise'
baseFrequency='1'
numOctaves='3'
stitchTiles='stitch'/>
</filter>
<rect width='100%' height='100%' filter='url(#noiseFilter)'/>
</svg>
Il primo blocco di codice HTML lo possiamo recuperare dal sito web Grainy Gradient playground che ci permette di creare un effetto grainy già dalla struttura del background del sito web.
Il blocco feTurbulence non è nient’altro che un filtro che rende lo sfondo granuloso. Così la pagina HTML mostrerà uno sfondo “rumoroso”.
L’SVG sostanzialmente è creato tramite righe di codice. Per poter settare questo effetto come stile dello sfondo della pagina web, possiamo creare un noise.svg da inserire all’interno del progetto.
<section class="container noise2">
<h1>Noise using SVG File</h1>
</section>
.noise2{
background: rgb(219, 255, 219);
background-image: url(/assets/noise.svg);
}
In questo modo abbiamo un risultato molto simile a quello ottenuto con l’utilizzo del PNG.
Se diamo un’occhiata al Grainy Gradient playground citato in precedenza, vedremo una terza soluzione. Questa soluzione omette l’utilizzo di file all’interno del progetto. Utilizza gradienti che vanno da opaco a trasparente per consentire la visualizzazione della sfocatura. Puoi ottenere lo stesso effetto su uno sfondo a tinta unita ripetendo parte del nostro codice dall'alto.
Questo tutorial dimostra la flessibilità del linguaggio CSS, così da poter sfruttare una serie di opportunità per personalizzare al meglio il proprio sito web. Consulta il nostro articolo sugli esercizi CSS per prendere dimestichezza con il linguaggio!
Inoltre, se ti appassiona il mondo dello sviluppo web, puoi consultare la nostra guida completa su CSS, oppure puoi iscriverti alla nostra hackademy che include il corso CSS e tante altre tecnologie fondamentali per diventare sviluppatore web. Ti aspettiamo
