Como fazer efeito de borda inclinada neon no Elementor

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ธ.ค. 2024

ความคิดเห็น • 47

  • @ivanpaladino21
    @ivanpaladino21 ปีที่แล้ว

    Vc é bem didático, parabéns

  • @BrunoSouza
    @BrunoSouza 3 ปีที่แล้ว +3

    CSS é vida! Ajuda bastante caso a gnt queria adicionar um diferencial no site do cliente. Muito bao a dica, Eduardo!

  • @analutravassos5317
    @analutravassos5317 2 ปีที่แล้ว

    Muito legal

  • @burlinando
    @burlinando 3 ปีที่แล้ว

    Vou testar.

  • @nomadehillpro7
    @nomadehillpro7 3 ปีที่แล้ว +1

    Vi que usou o Elementor pro ... tem como colocar o css no free?

    • @oficial.eduardom
      @oficial.eduardom 3 ปีที่แล้ว +1

      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 😉

    • @larissacunha5930
      @larissacunha5930 2 ปีที่แล้ว

      @@oficial.eduardom faz

  • @alexdonega
    @alexdonega 3 ปีที่แล้ว +1

    Ficou lindo

  • @jefersondiaro9656
    @jefersondiaro9656 7 หลายเดือนก่อน

    código não funciona

  • @joavitt
    @joavitt 2 ปีที่แล้ว +2

    é legal adicionar um transition no CSS pra ter uma transição suave.

  • @MarceloGoncalves-zm3ph
    @MarceloGoncalves-zm3ph 2 ปีที่แล้ว

    O video ficou bacana demais.
    Mas poderia deixar o código.

    • @aEscoladeSites
      @aEscoladeSites  2 ปีที่แล้ว

      Valeu!! Para ter acesso ao código basta acessar este link: aescoladesites.com.br/deixe-seu-site-bonito-com-o-efeito-borda-inclinada/

  • @leandrocosta-gestormkt
    @leandrocosta-gestormkt 3 ปีที่แล้ว +2

    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?

    • @LiestA
      @LiestA 3 ปีที่แล้ว +1

      no meu tbm funcionou, eu tbm segui todos passos, se consegui resolver?

    • @renatanunes3265
      @renatanunes3265 2 ปีที่แล้ว +4

      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));
      }

  • @1ssphenix
    @1ssphenix 2 ปีที่แล้ว +2

    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"!

    • @darlley5476
      @darlley5476 2 ปีที่แล้ว

      Poxa, Sérgio! Também tentei de tudo quanto é jeito e não consegui fazer. Deu certo pra você depois?

    • @1ssphenix
      @1ssphenix 2 ปีที่แล้ว

      @@darlley5476 Não deu.

    • @renatanunes3265
      @renatanunes3265 2 ปีที่แล้ว +2

      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));
      }

    • @HeleniltonAlves
      @HeleniltonAlves ปีที่แล้ว

      @@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

    • @reconstruaoamor
      @reconstruaoamor ปีที่แล้ว

      Esse funcionou!@@renatanunes3265 parabéns e muito obrigado!

  • @hardy_hardware
    @hardy_hardware 2 ปีที่แล้ว +1

    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));
    }

  • @hardy_hardware
    @hardy_hardware 2 ปีที่แล้ว

    agenta o codigo ta errado no site

  • @jeanfialho5649
    @jeanfialho5649 ปีที่แล้ว

    Olá amigo, parabéns pelo conteúdo. Pode atualizar esse vídeo?, pois agora estamos com o elementor do tipo blocos.

  • @eletrotracksound9841
    @eletrotracksound9841 2 ปีที่แล้ว

    mUITO TOP

  • @pablorodriguez8010
    @pablorodriguez8010 3 ปีที่แล้ว

    Não funcionou o código...

    • @aEscoladeSites
      @aEscoladeSites  2 ปีที่แล้ว

      Deu algum erro? Que que rolou?

    • @regianedecassiafreitas6428
      @regianedecassiafreitas6428 2 ปีที่แล้ว

      O meu tbm não funcionou.

    • @hardy_hardware
      @hardy_hardware 2 ปีที่แล้ว +5

      /*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));
      }

    • @claudiateixeira8018
      @claudiateixeira8018 2 ปีที่แล้ว

      @@hardy_hardware obrigado este deu certo, grata...

  • @LiestA
    @LiestA 3 ปีที่แล้ว

    no meu tbm não funcionou

    • @aEscoladeSites
      @aEscoladeSites  2 ปีที่แล้ว

      Sério? O que que rolou? Deu algum erro? Não ficou igual? Pq quando testei foi certinho kk

    • @aEscoladeSites
      @aEscoladeSites  2 ปีที่แล้ว

      Fez todo o passo a passo igual?

  • @regianedecassiafreitas6428
    @regianedecassiafreitas6428 2 ปีที่แล้ว

    fiz todo passo a passo, colei o código mas não aconteceu nada...

    • @aEscoladeSites
      @aEscoladeSites  2 ปีที่แล้ว

      Uai, estranho

    • @claudiateixeira8018
      @claudiateixeira8018 2 ปีที่แล้ว

      @@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.

    • @renatanunes3265
      @renatanunes3265 2 ปีที่แล้ว

      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));
      }

    • @yohanpaulicena8007
      @yohanpaulicena8007 ปีที่แล้ว

      @@renatanunes3265 Obrigaadoo Renataa

  • @leosalon
    @leosalon 3 ปีที่แล้ว

    Muito bom 💥💥💥💥

  • @atrazdeumsonho
    @atrazdeumsonho 3 ปีที่แล้ว +3

    Tem de colocar a Fonte de onde você copiou isso Amigo th-cam.com/video/eFZTgFriH2I/w-d-xo.html

    • @oficial.eduardom
      @oficial.eduardom 3 ปีที่แล้ว

      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!

    • @guidoyuri92
      @guidoyuri92 2 ปีที่แล้ว

      Esse código aqui do gringo deu bom! Explicação simples e objetiva!

  • @birawssf
    @birawssf 3 ปีที่แล้ว +1

    Pegando as ideias de um canal gringo ne
    Kkkkkkkkkk

    • @oficial.eduardom
      @oficial.eduardom 3 ปีที่แล้ว

      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!