Início
> Blogger Profissional
> efeito html fácil de fazer
> efeito neon
> efeito neon blogger
> efeito neon html
> efeito neon html e css
> efeito neon html pronto
Efeito Neon no texto - HTML e CSS (Fácil)
Opa ... beleza com vocês?
Hoje eu vou te ensinar como crie um Efeito Neon em qualquer Texto apenas usando HTML e CSS.
Em poucas linhas de código e com o mínimo de conhecimento é possível fazer isso e muito mais.
Primeiramente você vai precisar de um fundo escuro, para que o Efeito Neon fique bem destacado.
Eu vou utilizar uma imagem de um muro escuro que peguei no google:
Segundo passo escrevo o texto onde quero aplicar o efeito e adiciono a ele uma CLASS="textoneon1"
Terceiro e último passo personalizar esse texto através de CSS
.textoneon1{
color: #fff;
font-size: 8vw;
text-shadow: 1vw 1vw 1vw #000, 0 0 3vw #24ff00, 0 0 3vw #24ff00, 0 0 3vw #24ff00;
}
Para criar outro Efeito Neon de outra cor na mesma página, basta cria outra class...
Veja, vou personalizar os dois textos:
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
body{
background: url(https://image.freepik.com/fotos-gratis/renderizacao-3d-de-holofotes-em-uma-parede-de-tijolos-grunge_1048-6284.jpg);
background-size: cover;
}
.textoneon1{
position: absolute;
color: #fff;
top: 42%;
left: 50%;
font-size: 8vw;
transform: translate(-50%, -50%);
font-family:'Kaushan Script', cursive;
text-shadow: 1vw 1vw 1vw #000, 0 0 3vw #24ff00, 0 0 3vw #24ff00, 0 0 3vw #24ff00;
}
.textoneon2{
position: absolute;
color: #fff;
top: 58%;
left: 50%;
font-size: 8vw;
transform: translate(-50%, -50%);
font-family:'Kaushan Script', cursive;
text-shadow: 1vw 1vw 1vw #000, 0 0 3vw #ff005b, 0 0 3vw #ff005b, 0 0 3vw #ff005b;
}
Muito legal esse efêito, fácil de fazer e fica muito bonito, dependendo do projeto que você esteja criando. (Pode ser utilizado dentro do Blogger e de qualquer página web)
Espero ter ajudado noivamente.
se tiver alguma dúvida entre em contato que eu te respondo.
Nos vemos em breve, com mais dicas.
Acompanhe o nosso trabalho aqui no blog e também no youtube.
Nenhum comentário:
Postar um comentário
Deixe um comentário com seu Feedback sobre este Conteúdo.