Glow Effect Box Shadow CSS

Bila temen-temen masuk ke area login twitter maka inputan text username dan password tersebut menggunakan animasi Glow Effect pada inputan text tersebut.
Tujuan dari animasi tersebut yaitu memberikan kesan menarik pada tampilan website, walaupun penerapan animasi ini sederhana akan tertapi sangatlah penting bagi seseorang design website.

Animasi ini di buat dengan menggunakan CSS3, untuk melihat singkat mengenai sourcode CSS yang digunakan lihat di bawah ini :
style.css

input{
  outline:none;
  transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  border-radius:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border:1px solid rgba(0,0,0, 0.2);
}
input:focus{
  box-shadow: 0 0 5px rgba(0, 0, 255, 1);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
  border:1px solid rgba(0,0,255, 0.6);
}

To Demo, Klik Here
To Download, Klik Here
Tweet