Repository aimed at building collaborative knowledge about web development, especially with the computer science students at Campus Araguaína - IFTO. However, anyone can contribute if they wish to do so.
4
stars
40
forks
source link
21º Desafio: Criando inputs com animação de Waves - Peso 2 #26
Oi, crianças inocentes! Estou aqui para lançar um desafio super legal para vocês. O desafio consiste em criar um formulário incrível com efeitos de onda nos campos de entrada (ou inputs, como dizemos na programação).
O objetivo é deixar o formulário com uma aparência legal, como se os labels do campos estivessem nadando em um oceano de ondas. Para isso, vocês terão que usar as poderosas linguagens HTML, CSS e JavaScript.
Para começar, é importante lembrar que não é permitido o uso de frameworks existentes. Vocês terão que colocar a mão na massa e criar tudo do zero. Mas não se preocupem, vou dar exemplo e dicas para ajudá-los.
Exemplo:
E por último, mas não menos importante, lembrem-se de que a prática leva à perfeição. Então, não desistam e continuem tentando até alcançarem o resultado esperado. Divirtam-se!
Additional tips
Uma dica importante é criar uma animação com CSS para simular as ondas nos campos de entrada. Para isso, você pode usar a propriedade "animation" do CSS. É importante definir a duração, o tipo de animação e a direção que as ondas irão seguir.
Outra dica é usar JavaScript para interagir com os campos de entrada. Por exemplo, quando o usuário clicar em um campo, você pode aumentar a intensidade das ondas ou mudar a cor do campo.
Contact Details
iury.oliveira@ifto.edu.br
Challenge Description
Oi, crianças inocentes! Estou aqui para lançar um desafio super legal para vocês. O desafio consiste em criar um formulário incrível com efeitos de onda nos campos de entrada (ou inputs, como dizemos na programação).
O objetivo é deixar o formulário com uma aparência legal, como se os labels do campos estivessem nadando em um oceano de ondas. Para isso, vocês terão que usar as poderosas linguagens HTML, CSS e JavaScript.
Para começar, é importante lembrar que não é permitido o uso de frameworks existentes. Vocês terão que colocar a mão na massa e criar tudo do zero. Mas não se preocupem, vou dar exemplo e dicas para ajudá-los.
Exemplo:
E por último, mas não menos importante, lembrem-se de que a prática leva à perfeição. Então, não desistam e continuem tentando até alcançarem o resultado esperado. Divirtam-se!
Additional tips
Uma dica importante é criar uma animação com CSS para simular as ondas nos campos de entrada. Para isso, você pode usar a propriedade "animation" do CSS. É importante definir a duração, o tipo de animação e a direção que as ondas irão seguir.
Outra dica é usar JavaScript para interagir com os campos de entrada. Por exemplo, quando o usuário clicar em um campo, você pode aumentar a intensidade das ondas ou mudar a cor do campo.