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

Поділитися
Вставка
  • Опубліковано 12 січ 2025

КОМЕНТАРІ • 57

  • @curicanzagabriel0401
    @curicanzagabriel0401 Рік тому +3

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

  • @soazcoder
    @soazcoder 5 місяців тому +1

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

  • @barata_voadora
    @barata_voadora 8 місяців тому +1

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

  • @DevNety
    @DevNety 5 місяців тому

    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 UA-cam e achei seu vídeo! Sucesso e parabéns

  • @biancapillon7860
    @biancapillon7860 6 місяців тому +1

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

  • @maellcosta
    @maellcosta 7 місяців тому

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

  • @nivaldoneto719
    @nivaldoneto719 6 місяців тому

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

  • @adrianodarvile6952
    @adrianodarvile6952 Рік тому

    Você é o melhor! Grande Professor!!!

  • @ovalado204
    @ovalado204 5 місяців тому

    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

  • @fabioandrade3274
    @fabioandrade3274 Рік тому

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

  • @Lavínia_Vitória133
    @Lavínia_Vitória133 10 місяців тому

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

  • @devjuliosantos
    @devjuliosantos Рік тому

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

  • @Jean-z3d
    @Jean-z3d 2 місяці тому

    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  2 місяці тому

      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!

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

  • @ericssonfaustino5312
    @ericssonfaustino5312 Рік тому +1

    Cara tu arrebenta!!!

  • @makalau3865
    @makalau3865 2 місяці тому +1

    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  2 місяці тому

      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 2 місяці тому

      @@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  2 місяці тому +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

  • @Haazorks
    @Haazorks 7 місяців тому

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

  • @deivideguilherme
    @deivideguilherme 11 місяців тому

    Muito bom! Parabéns pelo conteúdo

  • @matheusmarcolongo6745
    @matheusmarcolongo6745 8 місяців тому

    Ótimo vídeooo novamenteee!

  • @souzagiovany3935
    @souzagiovany3935 Рік тому

    Sensacional, ajudou demais.

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

  • @paulomanimal
    @paulomanimal Рік тому

    Coloca mais projetos!!!!!!

  • @Felipe-lg3ei
    @Felipe-lg3ei 11 місяців тому

    conteudo incrivel, muito obrigado

  • @cristiano-code
    @cristiano-code Рік тому

    faz um vídeo explicando o addeventlistener por favor 🙏

  • @fehxavier4805
    @fehxavier4805 8 місяців тому

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

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

  • @soielumsay
    @soielumsay Рік тому

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

  • @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? 😁

  • @viniciusribeiro9187
    @viniciusribeiro9187 8 місяців тому

    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?

  • @deivideguilherme
    @deivideguilherme 4 місяці тому +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

  • @ppnovaes
    @ppnovaes Рік тому +1

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

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

  • @luquinha9003
    @luquinha9003 7 місяців тому

    faz com js por favor

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

  • @xhzinn12
    @xhzinn12 Рік тому

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

  • @gustavohenriquezollnermunh969
    @gustavohenriquezollnermunh969 7 місяців тому

    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  7 місяців тому

      kkkkkkkkkkkkk quem faz back sofre no front viu kkkkkkkkkkk

  • @jacyelpablo969
    @jacyelpablo969 Рік тому

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

    • @Hack-N0M4D
      @Hack-N0M4D 11 місяців тому

      Nem eu entendi.

    • @hdhdhdhdhdh2504
      @hdhdhdhdhdh2504 8 місяців тому +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

  • @matheusmoura8407
    @matheusmoura8407 Рік тому

    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  Рік тому +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 Рік тому

      blz meu querido, muito obrigado. @@InteliogiaDev

    • @vSouzaEu
      @vSouzaEu 11 місяців тому

      e so colocar um white-space: nowrap;

  • @michelzinhogeocafbatera8215

    🔝