Miten luodaan: animoitu hakupalkki

Opi, miten CSS:llä luodaan animoitu hakulomake.

Napsauta syötealaa:

Miten luodaan animoitu hakupalkki

Ensimmäinen vaihe - lisää HTML:

<input type="text" name="search" placeholder="Hae..">

Toinen vaihe - lisää CSS:

input[type=text] {
  leveys: 130px;
  -webkit-transition: leveys 0.4s ease-in-out;
  transition: leveys 0.4s ease-in-out;
}
/* Kun syöteala saa kohdistuksen, muuta sen leveys 100%:iin */
input[type=text]:focus {
  leveys: 100%;
}

Kokeile itse

Liittyvät sivut

Oppitunti:HTML-lomake

Oppitunti:CSS-lomake