11º Desafio: Animando Inputs - Peso 1

[iurygdeoliveira]

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Estilizar o HTML fornecido usando CSS de tal forma que o resultado se comporte como o gif animado abaixo

<div class="search-box">
  <input type="text" placeholder="search ...." />
  <a href="###" class="icon">
     <i class="fas fa-search"></i>
 </a>
</div>

Additional tips

Utilize a biblioteca fonte awesome para incluir o icone de lupa.

[GiorgeLucas]

Equipe Vikings

Resultado

CSS

*:focus {
    outline: none;
}

.search-box{
    display: flex;
    flex-direction: row;
    width: fit-content;
    background-color: rgb(17, 17, 17);
    padding: 10px;
    border-radius: 50px;

}

.search-box input{
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    transition-duration: 0.2s;

}

.icon{
    display: flex;
    justify-content: center;
    align-items: center;
}

a {
    text-decoration: none;
    color: black;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: rgb(219, 219, 219);
    transition: width 0.2s, height 0.2s, transform 0.2s;
}

a:hover{
    width: 27px;
    height: 27px;
    transform: rotate(180deg);
}

.search-box{
    margin: 50px;
    padding-right: 10px;
}

.search-box input {
    color: white;
    padding: 5px 0px;
    width: 0px;
    transition: all 0.2s ease;
}

.search-box a:active{
    background-color:rgb(179, 179, 179);
}
.search-box:hover input {
    width: 200px;

}

[Marifrrs]

Equipe Three Coders

Resultado

Código Css

.search-box { width: 400px; height: 40px; background-color: #fff; border: 1px solid #ddd; border-radius: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.search-box input[type="text"] { width: 100%; height: 100%; border: none; outline: none; padding: 0 20px; font-size: 16px; }

.search-box .icon { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background-color: #007bff; border: 1px solid #007bff; border-radius: 20px; display: flex; justify-content: center; align-items: center; transition: background-color 0.3s ease, border-color 0.3s ease; }

.search-box .icon i { color: #fff; }

.search-box .icon:hover { background-color: #fff; border-color: #007bff; }

.search-box .icon:hover i { color: #007bff; }

[gff001]

DUO ORCACA

RESULTADO:

CSS APLICADO:

*{
    padding: 0px;
    margin: 0;

}

body{
    width: 100%;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #242424;
}

.search-box{
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px;
   background-color: #353b48;
    border-radius: 100px;
}

input{

    background-color: #353b48;
    padding: 0px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    outline: none;
    border: none;
    width: 0px;

    transition: all 0.4s;
}

.icon i{
    color: #2863e2;
    padding: 10px;
   /* background-color: white;*/
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
}

div:hover > input{
    padding: 5px;
    width: 200px;

}

.icon i:hover{
    background-color: white;
    transform: rotate(360deg);
}

[iurygdeoliveira]

*:focus { outline: none; }

.search-box{ display: flex; flex-direction: row; width: fit-content; background-color: rgb(17, 17, 17); padding: 10px; border-radius: 50px;

}

.search-box input{ background-color: transparent; border: 0px solid; height: 20px; width: 160px; color: #CCC; transition-duration: 0.2s;

}

.icon{ display: flex; justify-content: center; align-items: center; }

a { text-decoration: none; color: black; width: 30px; height: 30px; border-radius: 100%; background-color: rgb(219, 219, 219); transition: width 0.2s, height 0.2s, transform 0.2s; }

a:hover{ width: 27px; height: 27px; transform: rotate(180deg); }

.search-box{ margin: 50px; padding-right: 10px; }

.search-box input { color: white; padding: 5px 0px; width: 0px; transition: all 0.2s ease; }

.search-box a:active{ background-color:rgb(179, 179, 179); } .search-box:hover input { width: 200px;

}

Ponto pra equipe

[iurygdeoliveira]

Equipe Three Coders

Resultado

Código Css

.search-box { width: 400px; height: 40px; background-color: #fff; border: 1px solid #ddd; border-radius: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.search-box input[type="text"] { width: 100%; height: 100%; border: none; outline: none; padding: 0 20px; font-size: 16px; }

.search-box .icon { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background-color: #007bff; border: 1px solid #007bff; border-radius: 20px; display: flex; justify-content: center; align-items: center; transition: background-color 0.3s ease, border-color 0.3s ease; }

.search-box .icon i { color: #fff; }

.search-box .icon:hover { background-color: #fff; border-color: #007bff; }

.search-box .icon:hover i { color: #007bff; }

o resultado do código não é como o pedido no desafio