본문 바로가기
css

HTML 및 CSS를 사용한 Glassmorphism 로그인 양식

by code-box 2022. 2. 19.
반응형

친구들아, 오늘은 이 블로그에서 HTML과 CSS를 사용하여 글라스모피즘 로그인 양식을 만드는 방법을 볼 거야. 지난 블로그에서 HTML과 CSS를 사용하여 멋진 로그인 양식을 만드는 방법을 살펴보았습니다. 이제 HTML과 CSS를 사용하여 glassmorphism 로그인 양식을 만들 차례입니다. HTML, CSS, Javascript 관련 프로젝트도 많이 공유했습니다. 여기 있는 이것들 확인하는 거 잊지 마세요.

글라스모피즘 로그인 폼은 현재 이 아름다움으로 많은 인기를 얻고 있습니다. CSS Glassmorphism은 기본적으로 투명한 디자인과 같은 UI 디자인입니다.

다만 이 경우 배경이 반투명하고 약간 흐릿하다. 이러한 유형의 디자인을 사용하는 다양한 유형의 웹 사이트와 응용 프로그램을 볼 수 있습니다. 현재, 애플, 윈도우, 그리고 많은 다른 웹사이트들이 이런 종류의 디자인을 사용합니다.

이 블로그에서 저는 이 멋지고 투명한 로그인 양식을 공유할 것입니다. 왼쪽 상단 모서리에 원 두 개가 있고 오른쪽 하단 모서리에 그라데이션 색상이 있는 이미지에서 볼 수 있듯이 페이지 중간에 로그인이 있습니다.

 

여기서 미리보기를 사용할 수 있습니다.

소스 코드

HTML 코드

<!-- --------------- Created By InCoder --------------- -->
<!DOCTYPE html>
  <html lang="en">

    <head>
      <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>Glassmorphism login Form - InCoder</title>
  <link rel="stylesheet" href="main.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
          <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
            </head>

<body>
              <div class="inFormBackground">
                    <div class="circle"></div>
    <div class="circle"></div>
    <div class="inLoginForm">
            <form onsubmit="return false">
                      <div class="title">
                                  <h3>Login Here</h3>
        </div>
        <div class="inputGroup">
                    <label for="email">Email</label>
          <input type="email" placeholder="Enter Email" id="email">
                    </div>
        <div class="inputGroup">
                    <label for="password">Password</label>
          <input type="email" placeholder="Enter Password" id="password">
                    </div>
        <button class="submitForm">Log In</button>
        <div class="social">
                    <div class="go"><i class="fab fa-google"></i></div>
                                <div class="fb"><i class="fab fa-facebook"></i></div>
                                            <div class="tw"><i class="fab fa-twitter"></i></div>
                                                      </div>
      </form>
    </div>
  </div>
</body>

</html>

CSS 코드

 
/* --------------- Created By InCoder ---------------  */

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-color: #141225;
}

.inFormBackground {
    margin: 0rem 2rem;
}

.inFormBackground,
  .inLoginForm {
      width: 25rem;
      height: 30rem;
      max-width: 320px;
      position: relative;
  }

.circle {
    width: 10rem;
    height: 10rem;
    position: absolute;
    border-radius: 50%;
}

.circle:first-child {
    left: -20%;
      top: -12%;
        background: linear-gradient(#ff0060, #c302b5);
}

.circle:nth-child(2) {
    right: -22%;
      bottom: -14%;
        background: linear-gradient(164deg, #144e7cfc, #1877f2);
}

.inLoginForm form {
    top: 50%;
      left: 50%;
        width: 16rem;
    height: 24rem;
    max-width: 320px;
    position: absolute;
    padding: 50px 35px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.13);
}

form * {
    border: none;
    outline: none;
    color: #ffffff;
    letter-spacing: 0.5px;
    font-family: "Poppins", sans-serif;
}

.title {
    font-size: 32px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
}

.inputGroup label {
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}

.inputGroup input {
    width: 92%;
      height: 50px;
    display: block;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.07);
}

::placeholder {
    color: #e5e5e5;
}

.submitForm {
    width: 100%;
      z-index: 1;
    margin-top: 30px;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    background: #fff;
}

.submitForm::before {
    content: "";
    top: 0%;
      left: -100%;
        z-index: -1;
    width: 100%;
      height: 100%;
        color: #fff;
    border-radius: 5px;
    position: absolute;
    transition: left 0.4s, color 0.4s;
    background-color: #202020;
}

.submitForm:hover {
    color: #fff;
}

.submitForm:hover::before {
    left: 0%;
}

.social {
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
}

.social div {
    width: 3rem;
    height: 3rem;
    display: flex;
    cursor: pointer;
    color: #eaf0fb;
    border-radius: 50%;
      align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.27);
}

.social div:hover {
    background-color: rgba(255, 255, 255, 0.47);
}

.social .fb {
    margin-left: 25px;
}

.social .tw {
    margin-left: 25px;
}
저작자표시

'css' 카테고리의 다른 글

14 코데펜이 당신을 날려버립니다!  (0) 2022.02.19
5 gratuitos 파라 프라티카 CSS  (0) 2022.02.19
애니메이션 테이블 예약 상호 작용(React/GSAP)  (0) 2022.02.19
HTML CSS 및 JavaScript를 사용한 응답형 개인 포트폴리오 웹 사이트  (0) 2022.02.19
예니 바슬라얀라 아이친 HTML5 CSS3  (0) 2022.02.19

관련글

댓글

티스토리툴바