Login panel

Web siteleriniz için kullanabileceğiniz çok güzel ve bir o kadarda hafif bir giriş formu örneği. Marco Biedermann tarafından hazırlanmış bu giriş formu örneğinde yüklemeniz gereken herhangi bir icon yada resim bulunmuyor. Fontawasome kullanılarak eklenmiş olan ikonlar(kilit, kullanıcı, ok işaret) form örneğine çok güzel bir görünüm kazandırmış.

Form alanlarına tıkladığınızda form alanı çevresindeki renkler her tarayıcıda farklı farklı görünüyor. Cheromede sarı, Mozillada kırmızı, Safaride mavi, Opera ve İnternet Explorerda çerçeve renkleri yok. Çok büyük bir fark olmasa bile bilmenizde fayda var. Ayrıca İnternet Explorerda Fontawasome ikonları gözükmüyor. İkonlar yerine boş bir kare görünüyor.

Download

Demo

Kullanım

Head etiketleri arasına eklemeniz gereken bölümler.

Font Awasome ve Css url adresleri :

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700">
<link rel="stylesheet" href="stil.css" />

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div id="login">
     <form action="javascript:void(0);" method="get">
                     <fieldset class="clearfix">                
             <p><span class="fontawesome-user"></span><input type="text" value="Username" onBlur="if(this.value == '') this.value = 'Username'" onFocus="if(this.value == 'Username') this.value = ''" required></p> <!-- JS because of IE support; better: placeholder="Username" -->
             <p><span class="fontawesome-lock"></span><input type="password"  value="Password" onBlur="if(this.value == '') this.value = 'Password'" onFocus="if(this.value == 'Password') this.value = ''" required></p> <!-- JS because of IE support; better: placeholder="Password" -->
             <p><input type="submit" value="Giris"></p>
         </fieldset>
     </form>        
     <p>Üye degil misin? <a href="#">Simdi üye ol</a><span class="fontawesome-arrow-right"></span></p>
 </div>