Meu caro, tentei 4 vezes olhando muito atentamente pra editar a coluna certa. Mas não funcionou. Ao lado dos 3 "grad" aparece um triângulo alertando para "propriedade desconhecida"!
@@aEscoladeSites eu tbm fiz td certinho , mais o código está incorreto, coloquei outro código deu certo , mas infelizmente não era igual ao seu... se puder colocar novamente agradecemos , grata.
Opa coloquei na descrição que usei o vídeo do Jim Fahad como inspiração, conteúdo fera de mais, achei super válido trazer esse conteúdo para versão brasileira, o cara é fera!
Opa coloquei na descrição que usei o vídeo do Jim Fahad como inspiração, conteúdo fera de mais, achei super válido trazer esse conteúdo para versão brasileira, o cara é fera!
Vc é bem didático, parabéns
😁😁😁
CSS é vida! Ajuda bastante caso a gnt queria adicionar um diferencial no site do cliente. Muito bao a dica, Eduardo!
Muito legal
😄😄😄
Vou testar.
Vi que usou o Elementor pro ... tem como colocar o css no free?
Seria possível sim, mas precisariamos adaptar um pouquinho o código e a forma de implementar..
Quem sabe eu posso trazer um vídeo mostrando isso 😉
@@oficial.eduardom faz
Ficou lindo
código não funciona
é legal adicionar um transition no CSS pra ter uma transição suave.
Hmmm boa dica
O video ficou bacana demais.
Mas poderia deixar o código.
Valeu!! Para ter acesso ao código basta acessar este link: aescoladesites.com.br/deixe-seu-site-bonito-com-o-efeito-borda-inclinada/
no meu não funcionou, segui todos passos, colei o código mas não aconteceu nada? precisa ativar alguma coisa no elementor para funcionar?
no meu tbm funcionou, eu tbm segui todos passos, se consegui resolver?
tenta colar esse
:root{
--grad1: #00ccff;
--grad2: #0e1538;
--grad3: #d400d4;
}
selector{
position: relative;
z-index: 999;
}
/*SKEWED EFFECT*/
selector::before, selector::after{
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
-webkit-transform: skewX(2deg) skewY(4deg);
transform: skewX(2deg) skewY(4deg);
background: -webkit-linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
background: linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
z-index: -9;
}
/*BLUR EFFECT*/
selector::after{
-webkit-filter: blur(50px);
filter: blur(50px);
}
/*HOVER EFFECT*/
selector:hover::before, selector:hover::after{
background: -webkit-linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
background: linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
}
Meu caro, tentei 4 vezes olhando muito atentamente pra editar a coluna certa. Mas não funcionou.
Ao lado dos 3 "grad" aparece um triângulo alertando para "propriedade desconhecida"!
Poxa, Sérgio! Também tentei de tudo quanto é jeito e não consegui fazer. Deu certo pra você depois?
@@darlley5476 Não deu.
Tenta esse
:root{
--grad1: #00ccff;
--grad2: #0e1538;
--grad3: #d400d4;
}
selector{
position: relative;
z-index: 999;
}
/*SKEWED EFFECT*/
selector::before, selector::after{
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
-webkit-transform: skewX(2deg) skewY(4deg);
transform: skewX(2deg) skewY(4deg);
background: -webkit-linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
background: linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
z-index: -9;
}
/*BLUR EFFECT*/
selector::after{
-webkit-filter: blur(50px);
filter: blur(50px);
}
/*HOVER EFFECT*/
selector:hover::before, selector:hover::after{
background: -webkit-linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
background: linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
}
@@renatanunes3265 o seu funcionou, mas é melhor aplicar na sessão de fora, senão a parte de dentro fica preta também, mas aqui no meu ficou foda
Esse funcionou!@@renatanunes3265 parabéns e muito obrigado!
CODIGO AGENTADO
/*CONTROLE DE CORES*/
:root{
- -grad1: #00ccff;
- -grad2: #0e1538;
- -grad3: #d400d4;
}
selector{
position: relative;
z-index: 999;
}
/*BORDA INCLINADA*/
selector::before, selector::after{
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
-webkit-transform: skewX(2deg) skewY(4deg);
transform: skewX(2deg) skewY(4deg);
background: -webkit-linear-gradient(135deg, var(- -grad1), var(- -grad2), var(- -grad3));
background: linear-gradient(315deg, var(- -grad1), var(- -grad2), var(- -grad3));
z-index: -9;
}
/*EFEITO BLUR*/
selector::after{
-webkit-filter: blur(50px);
filter: blur(50px);
}
/*EFEITO HOVER*/
selector:hover::before, selector:hover::after{
background: -webkit-linear-gradient(315deg, var(- -grad1), var(- -grad2), var(- -grad3));
background: linear-gradient(135deg, var(- -grad1), var(- -grad2), var(- -grad3));
}
agenta o codigo ta errado no site
Olá amigo, parabéns pelo conteúdo. Pode atualizar esse vídeo?, pois agora estamos com o elementor do tipo blocos.
mUITO TOP
Não funcionou o código...
Deu algum erro? Que que rolou?
O meu tbm não funcionou.
/*CONTROLE DE CORES*/
:root{
--grad1: #00ccff;
--grad2: #0e1538;
--grad3: #d400d4;
}
selector{
position: relative;
z-index: 999;
}
/*BORDA INCLINADA*/
selector::before, selector::after{
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
-webkit-transform: skewX(2deg) skewY(4deg);
transform: skewX(2deg) skewY(4deg);
background: -webkit-linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
background: linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
z-index: -9;
}
/*EFEITO BLUR*/
selector::after{
-webkit-filter: blur(50px);
filter: blur(50px);
}
/*EFEITO HOVER*/
selector:hover::before, selector:hover::after{
background: -webkit-linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
background: linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
}
@@hardy_hardware obrigado este deu certo, grata...
no meu tbm não funcionou
Sério? O que que rolou? Deu algum erro? Não ficou igual? Pq quando testei foi certinho kk
Fez todo o passo a passo igual?
fiz todo passo a passo, colei o código mas não aconteceu nada...
Uai, estranho
@@aEscoladeSites eu tbm fiz td certinho , mais o código está incorreto, coloquei outro código deu certo , mas infelizmente não era igual ao seu... se puder colocar novamente agradecemos , grata.
tenta colar esse
:root{
--grad1: #00ccff;
--grad2: #0e1538;
--grad3: #d400d4;
}
selector{
position: relative;
z-index: 999;
}
/*SKEWED EFFECT*/
selector::before, selector::after{
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
-webkit-transform: skewX(2deg) skewY(4deg);
transform: skewX(2deg) skewY(4deg);
background: -webkit-linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
background: linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
z-index: -9;
}
/*BLUR EFFECT*/
selector::after{
-webkit-filter: blur(50px);
filter: blur(50px);
}
/*HOVER EFFECT*/
selector:hover::before, selector:hover::after{
background: -webkit-linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
background: linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
}
@@renatanunes3265 Obrigaadoo Renataa
Muito bom 💥💥💥💥
Tem de colocar a Fonte de onde você copiou isso Amigo th-cam.com/video/eFZTgFriH2I/w-d-xo.html
Opa coloquei na descrição que usei o vídeo do Jim Fahad como inspiração, conteúdo fera de mais, achei super válido trazer esse conteúdo para versão brasileira, o cara é fera!
Esse código aqui do gringo deu bom! Explicação simples e objetiva!
Pegando as ideias de um canal gringo ne
Kkkkkkkkkk
Opa coloquei na descrição que usei o vídeo do Jim Fahad como inspiração, conteúdo fera de mais, achei super válido trazer esse conteúdo para versão brasileira, o cara é fera!