Тёмный

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

Inteliogia - Dev's Insights
Подписаться 15 тыс.
Просмотров 7 тыс.
50% 1

✅ Transforme suas ideias em projetos reais com o Treinamento Modo Front-end: bit.ly/3KY8mpn
Nesse vídeo vamos criar o efeito de texto sendo digitado utilizando apenas o poder do HTML e do CSS. Este efeito pode ser muito útil para você que quer dar um dinamismo a mais nos seus projetos e não tem tanta habilidade com JavaScript.
💡 Seu projeto ficou pronto? Coloque ele no ar com a Hostinger e ganhe até 20% de desconto:
hostinger.com.br?REFERRALCODE=1BRUNO76
✅ ME SIGA NAS REDES SOCIAIS
🔹 Instagram: bit.ly/3DHrMdj
🔹 GitHub: bit.ly/3tVboSS
✅ Participe da nossa comunidade no Facebook:
bit.ly/3vaJdiy
✅ SE LIGA SÓ
🔹 Meu objetivo é levar o mundo da computação para todos. Você deve saber, né? Existem muitas vagas de emprego para poucos profissionais no mercado. E assim como eu você quer crescer no mundo da programação me acompanhe aqui no canal: / inteliogiatech
✅ Seja membro deste canal e ganhe benefícios:
/ @inteliogiadev
✅ EMAIL PARA CONTATO EMPRESARIAL (não tiro dúvidas por aqui):
🔹 contato@inteliogia.com
✅ É isso #programMaker, seguimos por aqui, codando 👨🏼‍💻

Опубликовано:

 

8 сен 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 43   
@maellcosta
@maellcosta 13 дней назад
Você é um MONSTRO! Salvou demais!!!! Já me inscrevi, curti o vídeo e ativei as notificações. Obrigado, mestre!
@antoniocuricanzagabriel8326
@antoniocuricanzagabriel8326 9 месяцев назад
Sinceramente tenho gostado dos teus conteúdos. Cara, você é fabuloso!!
@devjuliosantos
@devjuliosantos 7 месяцев назад
Esse é o cara, não canso de dizerrr!
@adrianodarvile6952
@adrianodarvile6952 5 месяцев назад
Você é o melhor! Grande Professor!!!
@deivideguilherme
@deivideguilherme 4 месяца назад
Muito bom! Parabéns pelo conteúdo
@souzagiovany3935
@souzagiovany3935 8 месяцев назад
Sensacional, ajudou demais.
@barata_voadora
@barata_voadora 2 месяца назад
Cara sinceramente voce ta me ajudando muito na estilização do meu sistema. por favor continue com seus videos !!!
@Haazorks
@Haazorks 22 дня назад
Muito bom tava batendo cabeça aqui pra ajeitar meu codigo kkk
@ericssonfaustino5312
@ericssonfaustino5312 9 месяцев назад
Cara tu arrebenta!!!
@lavinia32859
@lavinia32859 4 месяца назад
muito bom explicou direitinho, pra quem esta aprendendo, igual a mim muito bom
@matheusmarcolongo6745
@matheusmarcolongo6745 2 месяца назад
Ótimo vídeooo novamenteee!
@Felipe-lg3ei
@Felipe-lg3ei 4 месяца назад
conteudo incrivel, muito obrigado
@fabioandrade3274
@fabioandrade3274 5 месяцев назад
Fiz um mini projeto com essa animação, vou deixar o link desse vídeo no meu "About"
@paulomanimal
@paulomanimal 6 месяцев назад
Coloca mais projetos!!!!!!
@cristiano-code
@cristiano-code 7 месяцев назад
faz um vídeo explicando o addeventlistener por favor 🙏
@teutcm
@teutcm Месяц назад
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!
@luquinha9003
@luquinha9003 14 дней назад
faz com js por favor
@fehxavier4805
@fehxavier4805 Месяц назад
Como fazer quando se tem linear-gradient de fundo? no minuto 15:52
@GILBERTOLEITE2012
@GILBERTOLEITE2012 9 месяцев назад
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 9 месяцев назад
Mano muito obrigado kkkkk e realmente, CSS é muito poderoso, mas não é considerado linguagem de programação kkkkkk
@pedrohenriquenovaes8169
@pedrohenriquenovaes8169 5 месяцев назад
funciona para mobile tbm ou precisa fazer algum ajuste no código?
@michelzinhogeocafbatera8215
@michelzinhogeocafbatera8215 9 месяцев назад
🔝
@viniciusribeiro9187
@viniciusribeiro9187 Месяц назад
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 Месяц назад
Já tentei colocar o background-color transparente
@nickolasdavi2084
@nickolasdavi2084 9 месяцев назад
Em 1:07 , o "Você" poderia ficar dentro de um parágrafo , ou outra tag de texto?
@InteliogiaDev
@InteliogiaDev 9 месяцев назад
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
@soielumsay
@soielumsay 8 месяцев назад
9:36 queria fazer até essa parte, como faço para ter uma transição entre uma frase e outra?
@soielumsay
@soielumsay 8 месяцев назад
e tem quem diga que não da pra programar com css kkkkkkk muito bom
@soielumsay
@soielumsay 8 месяцев назад
uma duvida, vi que usou uma cor para esconder a frase, da pra fazer esse efeito com uma imagem de fundo?
@InteliogiaDev
@InteliogiaDev 7 месяцев назад
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 8 месяцев назад
Poderia explicar como é feito calculo das porcentagem que é feito no @keyframes digita? Quero fazer com apenas três palavras...
@soielumsay
@soielumsay 8 месяцев назад
é 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 7 месяцев назад
@@soielumsay kkkk, bugou mesmo, fui obrigado a ter mais palavras... Obrigado pela resposta!
@xhzinn12
@xhzinn12 6 месяцев назад
como seria para adicionar mais de 5 frases dinamicas, eu tentei, mas não consegui sucesso ficou desalinhado o tempo
@gustavohenriquezollnermunh969
@gustavohenriquezollnermunh969 20 дней назад
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 20 дней назад
kkkkkkkkkkkkk quem faz back sofre no front viu kkkkkkkkkkk
@matheusmoura8407
@matheusmoura8407 6 месяцев назад
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 6 месяцев назад
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 6 месяцев назад
blz meu querido, muito obrigado. @@InteliogiaDev
@vSouzaEu
@vSouzaEu 5 месяцев назад
e so colocar um white-space: nowrap;
@jacyelpablo969
@jacyelpablo969 5 месяцев назад
Não entedi uma coisa qual a logica das porcentagem da animação digita ?
@Hack-N0M4D
@Hack-N0M4D 4 месяца назад
Nem eu entendi.
@hdhdhdhdhdh2504
@hdhdhdhdhdh2504 Месяц назад
É 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
Далее
Como criar um efeito Hover incrível com HTML e CSS
22:48
С Анджилишей на тусе💃
00:15
Просмотров 145 тыс.
Efeito digitação #CSS
6:41
Просмотров 924
Carrossel de Natal com HTML, CSS e JavaScript (JS)
27:29
⭐ Minicurso Animações CSS
53:01
Просмотров 128 тыс.
Como criar um SLIDE CARROSSEL com HTML, CSS e JS
38:29
DESENVOLVENDO MEU PRIMEIRO SITE COM HTML | 4#
7:18
Просмотров 404 тыс.