Como criar o efeito de Texto sendo Digitado com HTML e CSS

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

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

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

    Sinceramente tenho gostado dos teus conteúdos.
    Cara, você é fabuloso!!

  • @soazcoder
    @soazcoder 4 หลายเดือนก่อน +1

    O daora desta hora, que cada tag css há uma explicado sobre

  • @DevNety
    @DevNety 4 หลายเดือนก่อน

    Gostei sim, meu caro! Simplicidade, eu gosto disso 😊 Sou do backEnd, mas como estou buscando conteúdos para construir meu portfólio de maneira simples e profissional, vasculhei aqui no TH-cam e achei seu vídeo! Sucesso e parabéns

  • @biancapillon7860
    @biancapillon7860 5 หลายเดือนก่อน +1

    Tirando a parte do calculo que eu fiquei meio perdida kkkk melhor tutorial!

  • @maellcosta
    @maellcosta 6 หลายเดือนก่อน

    Você é um MONSTRO! Salvou demais!!!! Já me inscrevi, curti o vídeo e ativei as notificações. Obrigado, mestre!

  • @barata_voadora
    @barata_voadora 7 หลายเดือนก่อน +1

    Cara sinceramente voce ta me ajudando muito na estilização do meu sistema. por favor continue com seus videos !!!

  • @nivaldoneto719
    @nivaldoneto719 5 หลายเดือนก่อน

    Muito obrigado pelo conteúdo, além de aprender novos códigos, estou melhorando o meu e me motivando a pegar trabalhos freelancer!

  • @ovalado204
    @ovalado204 4 หลายเดือนก่อน

    Show conseguir fazer tudinho e só uma dica é as frases tem que ficar no mesmo tamanho se não fica muito estranho o cursor não trabalha direito. Outra coisa vc disse que seria fácil kkk só que não. Mas obrigada por repassar esse conhecimento, consegui entender a lógica dos porcentos obg

  • @adrianodarvile6952
    @adrianodarvile6952 11 หลายเดือนก่อน

    Você é o melhor! Grande Professor!!!

  • @Lavínia_Vitória133
    @Lavínia_Vitória133 10 หลายเดือนก่อน

    muito bom explicou direitinho, pra quem esta aprendendo, igual a mim muito bom

  • @fabioandrade3274
    @fabioandrade3274 11 หลายเดือนก่อน

    Fiz um mini projeto com essa animação, vou deixar o link desse vídeo no meu "About"

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

    Esse é o cara, não canso de dizerrr!

  • @Haazorks
    @Haazorks 6 หลายเดือนก่อน

    Muito bom tava batendo cabeça aqui pra ajeitar meu codigo kkk

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

    Cara tu arrebenta!!!

  • @Jean-z3d
    @Jean-z3d หลายเดือนก่อน

    No meu caso eu queria que fosse uma frase sendo digitada e o cursor piscando. tive um trabalho pra modificar apartir do seu código mas deu bom. muito obrigadoo

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

      Cara esse código que fiz no vídeo ele é mais limitado, por isso eu indico apenas para frases ou palavras curtas, mas vou ver se trazer um vídeo onde ensino a criar esse msm efeito para textos maiores. TMJ mano!

  • @deivideguilherme
    @deivideguilherme 10 หลายเดือนก่อน

    Muito bom! Parabéns pelo conteúdo

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

    Olá, primeiro parabéns pelo conteúdo, é top. E segundo, queria saber se é possível utilizar esse efeito sem apagar o texto, mas adicionando uma quebra de linha para cada frase? Obrigado!

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

    Coloca mais projetos!!!!!!

  • @cristiano-code
    @cristiano-code ปีที่แล้ว

    faz um vídeo explicando o addeventlistener por favor 🙏

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

    Ótimo vídeooo novamenteee!

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

    Que vídeo espetacular parceiro, estou aplicando para um projeto, mas estou com uma dúvida, você colocou como background no pseu do Span a própria cor de fundo, como que eu faria caso o fundo seja uma imagem?

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

      Já tentei colocar o background-color transparente

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

    Como fazer quando se tem linear-gradient de fundo? no minuto 15:52

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

    Estudo programação e desenvolvimento web faz uns 7 anos aproximadamente.. E o engraçado é que em toda videoaula que vou assistir sobre um determinado conteúdo para me aprimorar, sempre ouço a palavra: "Muito simples" kkkkkk.. Nunca vi alguém falar: Vou te ensinar esse recurso muito complexo, é sempre muito simples, por mais endiabado que seja a complexidade do recurso, sempre será muito simples. Só queria registrar essa observação msm que é um padrão que tenho observado kkkkk Ótimo vídeo.

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

      KKKKKKKKKKKKKKKKK IRMÃO AGORA QUE TU FALOU ISSO REALMENTE FAZ SENTIDO KKKKKKKKKKK
      Pra mim meio que virou um vício de linguagem acabar de fazer uma funcionalidade e falar "muito simples" pq pra mim realmente foi muito simples kkkkkkkkkkk
      Mas obrigado pela observação mano kkkkkk

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

      @@InteliogiaDev kkkkkkkk Pois então.. Uma vez resolvi estudar o Framework Django do python. Fui ver uns tutoriais para economizar tempo e vi o rapaz falando: Vou ensinar a utilizar o django esse framework maravilhoso do python e é bem simples... Meu irmão, pensa num framework do demon, chorava de raiva na frente do computador tentando entender a lógica daquele trem. O cara falando que era simples e eu detonando meus neurônios kkkkkkkkkkkkkkkkk.. Eu pensava: Poxa! Se isso é simples não quero nem conhecer o complexo.

    • @InteliogiaDev
      @InteliogiaDev  หลายเดือนก่อน +1

      🤣🤣🤣🤣🤣🤣🤣 mano isso já é jogada psicológica. O troço é difícil até pra quem tá fazendo, mas a gente diz que é simples pra nos convencemos que realmente é kkkkkkkkkkkkkkk

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

    Como sempre... Exceeeeeeeeeeeeelente conteúdo. É nessas horas que eu não concordo qdo dizem que css não é linguagem de programação rsrs.
    Poderiam então dizer que é uma linguagem 'mista', de programação e de estilo kkk

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

      Mano muito obrigado kkkkk e realmente, CSS é muito poderoso, mas não é considerado linguagem de programação kkkkkk

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

    Em 1:07 , o "Você" poderia ficar dentro de um parágrafo , ou outra tag de texto?

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

      Você pode fazer uns testes, mas a tag ela é block-level, ou seja, qualquer conteúdo q vc por ao lado dela como o será forçado a quebrar linha, aí não ficaria alinhado.
      Para resolver você poderia usar display:flex... seria um rolê, então eu recomendo fazer dessa forma como tá no vídeo kkkkkkkk

  • @Felipe-lg3ei
    @Felipe-lg3ei 10 หลายเดือนก่อน

    conteudo incrivel, muito obrigado

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

    Sensacional, ajudou demais.

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

    9:36 queria fazer até essa parte, como faço para ter uma transição entre uma frase e outra?

  • @luquinha9003
    @luquinha9003 6 หลายเดือนก่อน

    faz com js por favor

  • @pedrohenriquenovaes8169
    @pedrohenriquenovaes8169 11 หลายเดือนก่อน +1

    funciona para mobile tbm ou precisa fazer algum ajuste no código?

  • @deivideguilherme
    @deivideguilherme 3 หลายเดือนก่อน +1

    Existe alguma possibilidade de fazer o texto se "ocultar" quando não tem uma cor de background definida. No meu caso por exemplo, meu background é um vídeo, sendo assim não consegui aplicar com perfeição como vc ensina, com uma cor sólida, funciona 100%, mas com o vídeo definido como background não rolou

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

      Você sabe se tem como fazer com IMG?

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

    e tem quem diga que não da pra programar com css kkkkkkk muito bom

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

      uma duvida, vi que usou uma cor para esconder a frase, da pra fazer esse efeito com uma imagem de fundo?

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

      Dá sim, mas aí teríamos que usar Javascript kkkkkkk nesse modelo de vídeo funciona melhor com cores sólidas de fundo ok? 😁

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

    Poderia explicar como é feito calculo das porcentagem que é feito no @keyframes digita? Quero fazer com apenas três palavras...

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

      é só dividir 100% pelo numero de palavras que você quer, mas no seu caso que o resultado é 33,3333...% acredito eu que vai bugar tudo kkkkj

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

      @@soielumsay kkkk, bugou mesmo, fui obrigado a ter mais palavras... Obrigado pela resposta!

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

    Podem me ajudar? Eu tenho uma img de fundo no background, se eu coloco um background-color de fundo fica feio, não sei como progredir...

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

    como seria para adicionar mais de 5 frases dinamicas, eu tentei, mas não consegui sucesso ficou desalinhado o tempo

  • @gustavohenriquezollnermunh969
    @gustavohenriquezollnermunh969 6 หลายเดือนก่อน

    Cara me bati um monte pq meu vscode nao fechou o span, ai a frase ficava duplicando, fiquei procurando o b.o no css um tempão (back fzndo front é foda kk)

    • @InteliogiaDev
      @InteliogiaDev  6 หลายเดือนก่อน

      kkkkkkkkkkkkk quem faz back sofre no front viu kkkkkkkkkkk

  • @matheusmoura8407
    @matheusmoura8407 11 หลายเดือนก่อน

    Muito foda, mas mano e quando o texto quebra a linha? o meu aqui eu quero que ele quebre a linha mas aí o efeito não funciona muito bem, to tentando aqui mas se já tiver solucionado isto por via das dúvidas da uma forcinha aqui kkk

    • @InteliogiaDev
      @InteliogiaDev  11 หลายเดือนก่อน +1

      Então Matheus esse método é mais limitado e por isso não permite que vc utilize palavras longas que forcem a quebra de linhas 🫠
      Já estou elaborando novos métodos, breve posto aqui pra vcs.

    • @matheusmoura8407
      @matheusmoura8407 11 หลายเดือนก่อน

      blz meu querido, muito obrigado. @@InteliogiaDev

    • @vSouzaEu
      @vSouzaEu 10 หลายเดือนก่อน

      e so colocar um white-space: nowrap;

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

    🔝

  • @jacyelpablo969
    @jacyelpablo969 11 หลายเดือนก่อน

    Não entedi uma coisa qual a logica das porcentagem da animação digita ?

    • @Hack-N0M4D
      @Hack-N0M4D 10 หลายเดือนก่อน

      Nem eu entendi.

    • @hdhdhdhdhdh2504
      @hdhdhdhdhdh2504 7 หลายเดือนก่อน +2

      É a porcentagem da duração de animação, por exemplo: uma animação de 10 segundos (20% é igual aos 2 segundos da animação) isso serve pra inserir o que vai mostrar no início, meio e fim da animação