Borda degrade com cantos arredondados
Riscar palavra e mudar a cor do risco
Alterando o peso de determinada palavra
Animação de item flutuante
Alterar espaçamento entre parágrafos de um widget de texto
Efeito glitch
- ALINHAR ICONE AO INICIO ALINHAR ICONE AO INICIO ALINHAR ICONE AO INICIO
- FUNDO DEGRADÊ EM LISTA DE ICONES
Média Query
selector {background-color: #0C1B25;}
@media only screen and (max-width: 1024px) {
selector {background-color: #050813;}
}
@media only screen and (max-width: 767px) {
selector {background-color: #050813;}
}
Hover de zoom com desfoque na coluna ( é aplicado na sessão)
Hover de zoom com desfoque na coluna ( é aplicado na sessão)
Hover de zoom com desfoque na coluna ( é aplicado na sessão)
Média Query
selector {background-color: #0C1B25;}
@media only screen and (max-width: 1024px) {
selector {background-color: #050813;}
}
@media only screen and (max-width: 767px) {
selector {background-color: #050813;}
}
[CSS PERSONALIZADO] Botões com cantos retos (sem clip-path)
Deixe a cor do botão como transparente no painel do Elementor. Em seguida, coloque algum dos códigos abaixo para personalizar o botão: Legenda para qual canto aplicar a parte reta: -45deg = canto inferior direito 45deg = canto inferior esquerdo -135deg = canto superior direito 135deg = canto superior esquerdo Para aplicar somente em um canto
.elementor-button{ background: linear-gradient(-45deg, transparent 10px, #ffffff 0); }
Para aplicar nos dois cantos de baixo
.elementor-button{ background: linear-gradient(-45deg, transparent 10px, #ffffff 0) right, linear-gradient(45deg, transparent 10px, #ffffff 0) left; background-size: 50% 100%; background-repeat: no-repeat; }
Para aplicar nos dois cantos de cima
.elementor-button{ background: linear-gradient(-135deg, transparent 10px, #ffffff 0) right, linear-gradient(135deg, transparent 10px, #ffffff 0) left; background-size: 50% 100%; background-repeat: no-repeat; }
Para aplicar nos quatro cantos
.elementor-button{ background: linear-gradient(135deg, transparent 10px, #ffffff 0) top left, linear-gradient(-135deg, transparent 10px, #ffffff 0) top right, linear-gradient(-45deg, transparent 10px, #ffffff 0) bottom right, linear-gradient(45deg, transparent 10px, #ffffff 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; }
Mude o tamanho da inclinação ali onde está 10px, e a cor do botão ali no código hexadecimal (#ffffff) para o que preferir.
[CSS PERSONALIZADO] Barra de progresso animada
selector .elementor-progress-bar { background-image: repeating-linear-gradient( -45deg, transparent, transparent 16px, #ffffff29 16px, #ffffff29 40px ); background-size: 200% 200%; animation: barberpole 10s linear infinite; } @keyframes barberpole { 100% { background-position: 100% 100%; } }