Login panel

Login1

Login

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.

 

Kullanım

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

Font Awasome ve Css url adresleri :

<link rel="stylesheet" href="http://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="Giriş"></p>
            </fieldset>
        </form>        
        <p>Üye değil misin? <a href="#">Şimdi üye ol</a><span class="fontawesome-arrow-right"></span></p>
    </div>
0 Comments

Leave a Comment