[TUTORIAL] Efeito onda no headerbar

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Admineiro

Tutorial [TUTORIAL] Efeito onda no headerbar

Mensagem por pedxz 30.06.20 23:49

Efeito de ondas no headerbar
Nos dias atuais, os usuários da internet têm a tendência de se fascinar com efeitos e detalhes inovadores jamais vistos em execução. Este tutorial tem como objetivo adicionar a animação ondas no topo do seu fórum

EFEITO DE ONDAS NO HEADERBAR
TUTORIAIS, DICAS E ASTÚCIAS

Instalação do Código CSS

A sigla CSS é derivada do inglês e tem como significado "Folhas de Estilo em Cascata". Como o próprio nome diz, sua função é personalizar o estilo do conteúdo visível do seu fórum por meio de códigos escritos em formato de cascata. Para saber mais sobre esta linguagem de folhas de estilo, consulte o tópico "Como elaborar um código CSS".

Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS

[TUTORIAL] Efeito onda no headerbar TUT47qg

[TUTORIAL] Efeito onda no headerbar T0wZE7kSeta Salvar CSS - Este botão salva todo o código CSS no seu computador em um arquivo de texto (.txt).
[TUTORIAL] Efeito onda no headerbar RRwxeNSSeta Forçar o CSS base do seu fórum - Força o CSS padrão da versão do seu fórum ignorando o CSS personalizado. Caso queira verificar o código CSS base do seu fórum, basta clicar no link abaixo deste campo.
[TUTORIAL] Efeito onda no headerbar A1HaeDnSeta Desativar o CSS de base - Ignora todo o código CSS base do seu fórum, lendo apenas o código que está escrito na folha de estilo CSS personalizada.
[TUTORIAL] Efeito onda no headerbar I5OBoXfSeta Melhorar seu CSS - Essa opção aumenta a capacidade de carregamento da página, facilitando a navegação nas páginas do seu fórum. No entanto, é importante lembrar que, para que a função funcione como prometida, você terá que adicionar o código correto na folha de estilo. Portanto, para evitar erros, selecione a opção não.

Desse modo, adicione na sua folha de estilo CSS o seguinte código de acordo com a sua versão:

AwesomeBB:
Código:
@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:
Código:
@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;
}

InvisionBB:
Código:
@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:
Código:
@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;
}

Resultado

[TUTORIAL] Efeito onda no headerbar Giphy

pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6404
Pontos ativos : 7564

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


Permissão neste fórum:
Você não pode responder aos tópicos