Effetto delle onde nella barra dell'intestazione


Tutorial Effetto delle onde nella barra dell'intestazione

Messaggio Da Niko Dom 17 Gen 2021 - 15:49

Effetto delle onde nella barra dell'intestazione


Oggigiorno, gli utenti di Internet hanno la tendenza ad essere affascinati da effetti e dettagli innovativi mai visti in esecuzione. Questo tutorial mira ad aggiungere l'animazione delle onde nella parte superiore del tuo forum

Effetto delle onde nella barra dell'intestazione Giphy

Installazione del Codice CSS

L'acronimo CSS deriva dall'inglese e significa "Cascading Style Sheets". Come dice il nome, la sua funzione è quella di personalizzare lo stile del contenuto visibile del tuo forum tramite codici scritti in formato a cascata

Non dobbiamo fare altro che andare nel nostro foglio CSS verso Pannello di amministrazione ► Visualizzazione ► CSS e immagini ► Foglio di stile CSS e aggiungere il codice corrispondente alla propria versione, per poi salvare :bene:

AwesomeBB

Codice:
@keyframes wave {
  0% {
    background-position: 0 bottom, 0 bottom, 0 center;
  }
  100% {
    background-position: -8000px bottom, -20000px bottom, -1659px center;
  }
}
 
#header-banner {
  transform-origin: bottom;
  background-color: #95E4FF;
    background-image: url(https://i.imgur.com/fX1LSeC.png), url(https://i.imgur.com/Agh1uGq.png);
  background-size: 800px,800px,1800px;
  background-position: calc(50% - 200px) bottom, center;
  background-repeat: repeat-x;
  -webkit-animation: wave 30s infinite alternate;
  -moz-animation:    wave 30s infinite alternate;
  -o-animation:      wave 30s linear infinite alternate;
  animation: wave 30s linear infinite alternate;
}

ModernBB e phpBB3

Codice:
@keyframes wave {
  0% {
    background-position: 0 bottom, 0 bottom, 0 center;
  }
  100% {
    background-position: -8000px bottom, -20000px bottom, -1659px center;
  }
}
 
.headerbar {
  transform-origin: bottom;
  background-color: #95E4FF;
    background-image: url(https://i.imgur.com/fX1LSeC.png), url(https://i.imgur.com/Agh1uGq.png);
  background-size: 800px,800px,1800px;
  background-position: calc(50% - 200px) bottom, center;
  background-repeat: repeat-x;
  -webkit-animation: wave 30s infinite alternate;
  -moz-animation:    wave 30s infinite alternate;
  -o-animation:      wave 30s linear infinite alternate;
  animation: wave 30s linear infinite alternate;
}

Invision

Codice:
@keyframes wave {
  0% {
    background-position: 0 bottom, 0 bottom, 0 center;
  }
  100% {
    background-position: -8000px bottom, -20000px bottom, -1659px center;
  }
}
 
div#logostrip {
  transform-origin: bottom;
  background-color: #95E4FF;
    background-image: url(https://i.imgur.com/fX1LSeC.png), url(https://i.imgur.com/Agh1uGq.png);
  background-size: 800px,800px,1800px;
  background-position: calc(50% - 200px) bottom, center;
  background-repeat: repeat-x;
  -webkit-animation: wave 30s infinite alternate;
  -moz-animation:    wave 30s infinite alternate;
  -o-animation:      wave 30s linear infinite alternate;
  animation: wave 30s linear infinite alternate;
}

PunBB

Codice:
@keyframes wave {
  0% {
    background-position: 0 bottom, 0 bottom, 0 center;
  }
  100% {
    background-position: -8000px bottom, -20000px bottom, -1659px center;
  }
}
 
#pun-intro {
  transform-origin: bottom;
  background-color: #95E4FF;
    background-image: url(https://i.imgur.com/fX1LSeC.png), url(https://i.imgur.com/Agh1uGq.png);
  background-size: 800px,800px,1800px;
  background-position: calc(50% - 200px) bottom, center;
  background-repeat: repeat-x;
  -webkit-animation: wave 30s infinite alternate;
  -moz-animation:    wave 30s infinite alternate;
  -o-animation:      wave 30s linear infinite alternate;
  animation: wave 30s linear infinite alternate;
}

Personalizzazione

E' possibile personalizzare ad esempio il colore delle onde, andando a modificare nel nostro codice CSS la parte background-color: #95E4FF; con il codice in formato HEX (esadecimale: #95E4FF) che preferiamo :good:


Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9068
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.