유리 형태 효과 및 플로팅 레이블이 있는 로그인 양식

15460 단어 csshtmlcodepenbeginners

안녕 세상!



새 게시물로 돌아왔습니다. 이 게시물에서는 플로팅 레이블로 유리모형 효과가 있는 로그인 양식을 만들 것입니다.

전제 조건:



이것을 만들기 위해서는 HTML과 CSS에 대한 기본 지식만 있으면 됩니다!

이제 시작하겠습니다!
  • 우리 밥솥👇

    • <!DOCTYPE>
<html>
  <head>
    <title>Login form</title>
  </head>
 <body>
<!--Our code will go here-->
</body>
</html>


    컨테이너 클래스로 div를 만들고 양식이 이 컨테이너 안에 들어갈 것입니다. 우리의 컨테이너와 양식을 보자!

    2. 우리의 주요 HTML

     <div class="container">
    <div class="form">
      <h3 class="title">Login to Fitness Champ</h3>
      <form>
        <div class="form-group">
          <input type="text" required/><label>Username</label>
        </div>
        <div class="form-group">
          <input type="password" required/><label>Password</label>
        </div>
        <input type="button" value="Sign In" class="submit"> 
        <div class="row">
          <p>Not Yet Registered? <a href="#">Sign Up</a></p>
        </div>
      </form>
    </div>
    <div class="last">
      <a href="#">T&C</a>
      <a href="#">Policy</a>
    </div>
  </div>


    로그인 양식을 만들었으니 이제 CSS로 스타일을 지정할 차례입니다!
    3. 페이지 스타일링

    html{
  font-family:sans-serif;
} 
body{
      background: url(your_image.png); /*Any Image or color*/
    color: white;
    background-size: cover;
}


    4. 컨테이너 및 양식 스타일링

    .container{
    width: 330px;
    margin: auto;
    margin-top: 10%;
    padding: 5px;
    backdrop-filter: blur(17px) saturate(200%);
    -webkit-backdrop-filter: blur(17px) saturate(200%);
    background-color: rgba(190, 190, 190, 0.44);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    border-radius: 10px;
}
.title{
  text-align: center;
    color: #b82800;
    font-weight: 400;
}
.form{
  padding: 15px;
}
.form-group {
position: relative;
padding: 20px 0;
margin: auto;
max-width: 100%;
}

.form-group input {
background-color: transparent;
border: none;
border-bottom: 1.4px solid #d8d7d7;
font-size: 18px;
padding: 10px 0;
display: block;
width: 100%;
}

.form-group label {
color: #f0eaea;
font-size: 16px;
font-weight: 100;
position: absolute;
pointer-events: none;
top: 0;
transform: translateY(30px);
transition: all 0.2s ease-in-out;
left: 0px;
}

.form-group input:valid,
.form-group input:focus {
border-bottom-color: #dddddd;
outline: none;
}

.form-group input:valid + label,
.form-group input:focus + label {
color: rgb(247, 247, 247);
font-size: 14px;
transform: translateY(0);
}
.submit{
  background: rgb(218 51 3);
    padding: 7px 0;
    outline: none;
    font-size: 18px;
    width: 100%;
    margin: 17px 0;
    cursor: pointer;
    color: rgb(226, 224, 224);
    border-radius: 5px;
    transition: 0.1s;
    border: 1px solid rgb(218 51 3);
}
.submit:hover{
  background: rgba(216, 214, 214, 0.301);
  color: rgb(218 51 3);
}
a{ /*globally*/
  text-decoration: none;
}
.row a{
  color: rgb(218 51 3);
}
a:hover{ /*For all links*/
  color: white;
}
.last{
  text-align: center;
    padding: 5px;
}
.last a{
  margin: 0 10px;
  font-size: 14px;
  color: #66C1E5;
}


    아래 출력을 볼 수 있습니다👇


    매일 HTML, CSS 및 Javascript 팁과 요령을 보려면 저를 팔로우하세요.

    이 게시물에 좋아요를 누르고 친구들과 공유하세요.
    읽어 주셔서 감사합니다!
    안녕👋
    Markdown Preview Enhanced에서 그림의 미리보기가 작동하지 않을 때의 해결 방법
    Kotlin으로fatjar(shadowjar)を作る(kts版)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage