CSS Neumorfik Giriş Formu Tasarımı

CSS Neumorfik Giriş Formu Tasarımı

Kutu Gölge Numarası

İlk önce giriş formumuz için yeni bir div oluşturalım

<div class="login-div"></div>

border-radius, yumuşak bir yuvarlak köşe efekti oluşturmak için neumorfik tasarımda önemli bir rol oynar. Giriş formu gövdeden dışarı taşacağı için aynı arka plan rengini kullanacağım.

Ve işte kilit kısım. Işık efekti oluşturmak için kutu gölgesini kullanacağım. Sağ alt tarafa koyu gölge ekleyin. Ardından sol üst tarafa parlak renk gölgesi ekleyin. Bu, öğenin ekranın sol üst köşesinden aydınlatan ışık kaynağına sahipmiş gibi görünmesini sağlar.

 

.login-div {
  width:430px;
  height: 700px;
  padding: 60px 35px 35px 35px;
  border-radius: 40px;
  background: #ecf0f3;
  box-shadow: 13px 13px 20px #cbced1,
              -13px -13px 20px #ffffff;
}

 

Giriş Formu

Şimdi forma içerik eklemeye başlayacağız. Yapısı oldukça basittir. Logo, başlık, alt başlık, giriş alanları, buton ve şifremi unuttum/kaydolma bağlantıları.

 

<div class="login-div">
  <div class="logo"></div>
  <div class="title">Red Stapler</div>
  <div class="sub-title">BETA</div>
  <div class="fields">
    <div class="username"><input type="username" class="user-input" placeholder="username" /></div>
    <div class="password"><input type="password" class="pass-input" placeholder="password" /></div>
  </div>
  <button class="signin-button">Login</button>
  <div class="link">
    <a href="#">Forgot password?</a> or <a href="#">Sign up</a>
  </div>
</div>

Logo için küçük bir logo gölgesi ekleyeceğim. Ardından, oturum açma formu arka planıyla aynı renkte 5 piksellik bir ofset ekleyin. Ardından, daha önce giriş formu gövdesiyle yaptığımız gibi sağ alt gölgeyi ve sol üst gölgeyi ekleyin.

.logo {
  background:url("Logo.png");
  width:100px;
  height: 100px;
  border-radius: 50%;
  margin:0 auto;
  box-shadow: 
  /* logo shadow */
  0px 0px 2px #5f5f5f,
  /* offset */
  0px 0px 0px 5px #ecf0f3,
  /*bottom right */
  8px 8px 15px #a7aaaf,
  /* top left */
  -8px -8px 15px #ffffff
  ;
}

 

Ardından metinlerin yazı tipi ayarı için biraz CSS ekleyin

 

.title {
  text-align: center;
  font-size: 28px;
  padding-top: 24px;
  letter-spacing: 0.5px;
}
.sub-title {
  text-align: center;
  font-size: 15px;
  padding-top: 7px;
  letter-spacing: 3px;
}

Sonra giriş alanlarına batık efekt ekleyeceğim. Kutu gölgesini daha önce yaptığımız gibi ekleyin, ancak bu sefer bunun yerine iç metin kullanacağız.

.fields {
  width: 100%;
  padding: 75px 5px 5px 5px;
}
.fields input {
  border: none;
  outline:none;
  background: none;
  font-size: 18px;
  color: #555;
  padding:20px 10px 20px 5px;
}
.username, .password {
  margin-bottom: 30px;
  border-radius: 25px;
  box-shadow: inset 8px 8px 8px #cbced1,
              inset -8px -8px 8px #ffffff;
}

 

Daha sonra giriş alanlarına küçük simgeler ekleyeceğiz. Ücretsiz svg ikonu kullanacağım . Ardından yüksekliği CSS'de ayarlayın ve biraz kenar boşluğu ekleyin.

.fields svg {

height: 22px;

margin:0 10px -3px 25px;

}

 Ardından, düğme ve bağlantılar için CSS stilini uygulayın

.signin-button {
  outline: none;
  border:none;
  cursor: pointer;
  width:100%;
  height: 60px;
  border-radius: 30px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  color:#fff;
  text-align: center;
  background: #24cfaa;
  box-shadow: 3px 3px 8px #b1b1b1,
              -3px -3px 8px #ffffff;
  transition: 0.5s;
}
.signin-button:hover {
  background:#2fdbb6;
}
.signin-button:active {
  background:#1da88a;
}
.link {
  padding-top: 20px;
  text-align: center;
}
.link a {
  text-decoration: none;
  color:#aaa;
  font-size: 15px;
}

İşlem Bu Kadar...