Olá, como posso fazer esse tipo de animação em um site? Que conteúdos devo procurar e estudar? Eu até fiz um no Adobe animate mas não sei como deixar fluido assim e interativo com o mouse do usuário.
Eu tenho um form e toda vez que alguém clicar no input eu quero que a borda de baixo mude a cor e quando ele clicar fora quero que volte ao normal quero isso para todos os campo de todos os foms que eu tiver
Vaga: Web designer - WordPress
Estamos com vaga aberta para Web Designer com experiência em WordPress para atuar na área de Marketing.
Principais atividades:
Desenvolvimento e manutenção de websites em ambiente WordPress.
Criação de artes gráficas para o uso no ambiente web, que atendam sites, redes sociais e anúncios para campanhas de marketing.
Requisitos:
Grande experiência em Wordpress com desenvolvimento de layouts responsivos e também com instalação de plugins/componentes.
Conhecimento dos formatos e tamanhos de imagens para site, rede sociais, e para anúncios de campanhas de marketing.
Conhecimentos de HTML | CSS | SEO.
Excelentes habilidades no PACOTE ADOBE (Illustrator e Photoshop).
Detalhes:
VAGA CLT - Período Integral - Home Office
Estamos localizados em condomínio empresarial próximo à Unicamp.
Detalhes da empresa e local, clique aqui.
Interessados, por favor preencher o formulário ao lado até 31/Maio/2020.
Interessados deverão enviar o portfólio e realizar o cadastro nesse link:
Estou migrando para o frontend recentemente e tenho tido dificuldades para lidar com a formatação de estilos com o CSS, alguém poderia me ajudar? Minha intenção é que o conteúdo destacado em vermelho ocupe o local da marcação verde e o resto fique centralizado na tela. Estou usando o ReactJS para a composição, porém o CSS segue as mesmas regras do tradicional com HTML puro.
Como podem ver até pela imagem, design não é meu ponto forte.
Código do JSX (Componente do React):
<div className="login-container">
<section className="form">
<form>
<h1>Bem vindo!</h1>
<input
type="text"
placeholder="Login"
/>
<input
type="password"
placeholder="Senha"
/>
<p>Possuo um Token</p>
<input
type="text"
placeholder="Token"
className="token-input"
/>
</form>
</section>
</div>
Código do CSS:
.login-container{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1120px;
height: 100vh;
margin: 0 auto;
}
.login-container section.form{
width: 100%;
max-width: 350px;
}
.login-container section.form form{
display: flex;
justify-content: center;
width: 100%;
max-width: 1250px;
height: 100%;
max-height: 700px;
}
.login-container section.form form h1{
color: #fff;
font-weight: bolder;
text-shadow: #1B182E 2px 2px 8px;
font-size: 42px;
margin-bottom: 32px;
position: absolute;
margin-top: -65px;
background: transparent;
}
.login-container section.form form input{
display: flex;
justify-content: space-between;
margin: 5px;
width: 180px;
height: 40px;
max-width: 100%;
font-weight: bold;
padding: 8px;
border-radius: 5px;
color: white;
background: #0A0816;
border: solid #0D0929 2px;
}
.login-container section.form form p{
}
.login-container section.form form input + p + input{
background: black;
border: solid yellow 2px;
}
Pra quem não estiver afim de interpretar todo o código para tentar ajudar apenas diga o que você imagina que resolverá o problema. Obrigado desde já :)
Olá Pessoal, então, gostaria de saber se existe pessoas, dispostas a trabalhar comigo para fazer um anime, gostaria de montar um grupo de brasileiros com, Ilustradores, Iluminadores, Efeitos especiais e etc, para juntos conseguirmos criar um Anime Brasileiro. Irei criar um Discord para juntar todas essas pessoas e realizar isso. Quem tiver interesse me manda seu Email e se possível seu Discord.
Olá, como posso fazer esse tipo de animação em um site? Que conteúdos devo procurar e estudar? Eu até fiz um no Adobe animate mas não sei como deixar fluido assim e interativo com o mouse do usuário.
Share this post
Link to post
Share on other sites