Tarih :15 Aralık 2019

HTML – CSS Giriş Formu Nasıl Yapılır?

Merhaba değerli arkadaşlar. Bugün sizlerle birlikte aşağıda gördüğünüz çok kolay ve kullanılabilir, görsel açıdan da çok göz kanatmayan bir login panel yapacağız. Eğer istek gelirse login panelimizi login.php‘ye devam ettirebiliriz. Her neyse hemen kodlamamıza geçelim.

Açacağımız klasörün içeriği şu şekilde olacaktır.

CSS klasörümüzün içerisine style.css adlı bir metin dosyası oluşturalım. IMG klasörümüze ise bir adet arkaplan.png adında wallpaper atalım. (Koyduğunuz isimlere dikkat etmelisiniz. Yoksa kodlarınız düzgün çalışmaz.)

Kodları aşağıda vereceğim yanlarına da açıklamalarını yazacağım. Yetişemediğim yerde ise farklı bir paragraf şeklinde sizlere anlatacağım.

	
				
		
	         						
	

		 
	

Giriş yapmak için lütfen aşağıdaki alanları doldurunuz.

Kullanıcı Adı:

Şifre :

© Copyright 2019 kodcular.com - Tüm hakları saklıdır.

Merak etmeyin yabancı kelimelerin hepsinin Türkçe’si aşağıda bulunmakta.

Şimdi ise style.css dosyamıza geçelim.

body{
background-repeat:no-repeat; /* Arkaplan resmimizin tekrarlanmamasını yarayan kod. */
background-size:100%; /* Arkaplan resmimizin boyutunun yüzdesel hali. 100 yapıyoruz ki hiç taşma yahut eksik kalma durumu meydana gelmesin.  */
}

body span{  /* Bodymizdeki bütün span etiketine ait stil ayarlaması. */
font-family:poppins; /* Yazı fontunu poppins yapıyoruz. */
font-size:12pt; /* Yazımızın boyutu 12Punto olacak şekilde ayarlıyoruz. */
color:orange; /* Yazımızın rengini turuncu yapıyoruz. */
}

.kadi{  /* Kullanıcı adı TextBox'ının stil yapılandırması. */
border:2px solid orange; /* 2pixel boyutunda, solid ve turuncu renkte çerçeve ekliyoruz. */
border-radius:4px; /* Eklediğimiz çerçevemize radius veriyoruz yani yarıçap, bu sayede çerçevemiz yuvarlağa yakın oluyor. */
}

.sifre{ /* Şifre password input'unun stil yapılandırması. */
border:2px solid orange;  /* 2pixel boyutunda, solid ve turuncu renkte çerçeve ekliyoruz. */
border-radius:4px; /* Eklediğimiz çerçevemize radius veriyoruz yani yarıçap, bu sayede çerçevemiz yuvarlağa yakın oluyor. */
margin-left:70px; /* Margin-left dediğimiz zaman bileşenimizin sol tarafından ittireceği anlamına geliyor. 70 px soldan ittiriyoruz. */
}

.btn{ /* Butonumuzun stil Yapılandırması. */
background-color:#fff; /* Butonumuzun arkaplan rengini beyaz yapıyoruz. */
color:#000; /* İçerisindeki yazı rengini beyaz yapıyoruz */
font-family:poppins; /* Fontunu poppins yapıyoruz. */
font-size:10pt; /* Yazı boyutunu 10Punto yapıyoruz */
border:2px solid orange; /* 2pixel boyutunda, solid ve turuncu renkte çerçeve ekliyoruz. */
padding:5px; /* Padding dediğimiz zaman bileşeni içerisinden ittirir. Kısacası butonu, kalınlaştırmak için kullanıyoruz. */
margin-left:115px; /* Butonumuzu soldan 115px sağa kaydırıyoruz. */
border-radius:5px; /* Eklediğimiz çerçevemize radius veriyoruz yani yarıçap, bu sayede çerçevemiz yuvarlağa yakın oluyor. */
}

.btn:hover{ /* Butonumuzun üzerine mouse ile gelindiği zaman oluşacak efekt veya değişimleri belirleyen stil yapılandırıcısı :hover .*/
border:2px solid #fff; /* Çerçevesini 2px ve beyaz yapıyoruz. */
border-radius:5px; /* Yarı çapını 5px yapıyoruz. */
color:#fff; /* Yazı rengini beyaz yapıyoruz. */
background-color:#000; /* Arkaplanını siyah yapıyoruz. */
cursor:pointer;  /* Üzerine gelindiğinde çıkacak işareti belirliyoruz.[işaret parmağı ve baş parmak] */

}

form{
margin-top:440px; /* Yukarıdan 440px ittiriyoruz. */
}

.girisYap{
position:relative; /* Div ilişkilendirme  */
top:400px; /* Yukarıdan 400px ittiriyoruz. */
background-color:rgba(255, 255, 255, 0.3); /* Arkaplanını beyaz yapıyoruz ve opacity ekliyoruz, biraz solukluk katıyor. */
width:1200px; /* Genişliğini 1200px'e ayarlıyoruz. */
border-bottom:2px solid #fff; /* Div'imizin alt kısmına 2pixel beyaz çerçeve ekliyoruz. */
	
}

.girisYap{
font-weight:bold; /* Yazımızı kalın yapıyoruz. */
font-family:poppins; /* Yazı fontunu poppins yapıyoruz. */
font-size:20pt; /* Yazı boyutunu 20Punto yapıyoruz */
color:#56ff56; /* Yazımızın rengini ayarlıyoruz. [Açık yeşil] */
}

.kayitBtn{
background-color:#fff; /* Arkaplanı beyaz yapıyoruz. */
color:#000; /* Yazı rengimizi siyah yapıyoruz */
font-family:poppins; /* Yazı fontumuzu poppins yapıyoruz. */
font-size:10pt; /* Yazı boyutumuzu 10Punto yapıyoruz. */
border:2px solid orange; /* 2pixel turuncu çerçeve ekliyoruz. */
padding:5px; /* 5pixel genişlik veriyoruz. */
margin-left:10px; /* Soldan 10pixel ittiriyoruz. */
border-radius:5px; /* 5px yarıçap veriyoruz. */
}

Ve sonuç olarak en üstteki fotoğrafın aynısını elde ediyoruz.

Eğer indirmek isterseniz derste anlatılan içeriği buradan indirebilirsiniz. (Dosyanın virüslü olduğunu söylerse eğer, sakla deyiniz.)

Diğer derslerimizde görüşmek üzere, takıldığınız yerleri sormayı unutmayın.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir