CSS를 사용한 글래스모픽 로그인 양식

안녕하세요 여러분! 이 블로그에서는 CSS를 사용하여 글래스모피즘 로그인 양식을 만드는 방법을 설명하겠습니다. 이것은 HTML과 CSS를 포함한 단계별 가이드가 될 것입니다. 시작합시다 🚀.

Coding Torque에서 전체 소스 코드 및 기타 놀라운 웹 개발 프로젝트를 받으세요.

간단한 디자인을 Glassmorphism 디자인으로 변환할 수 있습니다. 이를 위해 약간의 코드 변경이 필요합니다. 먼저 rgba(255,255,255,0.1.5)와 같은 배경색 반투명을 사용합니다.
그런 다음 backdrop-filter: blur (10px)를 사용하여 배경을 약간 흐리게 해야 합니다. 결국 테두리를 사용하여 아름다움을 향상시켜야 합니다.

HTML 부분을 다루겠습니다.

우리는 웹사이트의 뼈대를 만들기 위해 HTML을 사용합니다. HTML은 마크업 언어입니다.

이제 Google Fonts API를 사용하여 글꼴을 가져오겠습니다. 아래는 Poppins 글꼴에 대한 코드입니다. <head> 태그에 아래 코드를 붙여넣습니다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

이제 <body> 태그에 컨테이너를 디자인해 보겠습니다. 아래 HTML 코드에서 유리모형 효과를 표시하기 위해 원 모양에 대해 클래스 이름이 'circle'인 두 개의 div가 포함된 컨테이너를 만들었습니다. 다음으로 사용자 이름과 암호에 대한 양식 입력과 마지막으로 로그인 버튼이 포함된 카드 div가 있습니다.

<div class="container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="card">
        <h4 class="title">Login</h4>
        <div class="form-input">
            <label for="username">Username</label>
            <input type="email" id="username" placeholder="Email">
        </div>
        <div class="form-input">
            <label for="password">Password</label>
            <input type="password" id="password" placeholder="Password">
        </div>
        <button class="login-btn">Log in</button>
    </div>
</div>

다음은 최종 HTML 코드입니다.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Login Form with Glassmorphism CSS - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="container">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="card">
            <h4 class="title">Login</h4>
            <div class="form-input">
                <label for="username">Username</label>
                <input type="email" id="username" placeholder="Email">
            </div>
            <div class="form-input">
                <label for="password">Password</label>
                <input type="password" id="password" placeholder="Password">
            </div>
            <button class="login-btn">Log in</button>
        </div>
    </div>
</body>

</html>

지금까지 출력

CSS 부분을 이해하자

아래 CSS 코드에서.

head 태그에서 가져온 글꼴 Poppins에 대해 * 선택자를 선언합니다.

다음으로 어두운 모드에 대한 스타일로 구성되고 본문의 모든 요소를 중앙에 정렬하는 본문 선택기를 선언합니다.

다음으로 동일한 높이와 너비를 사용하고 border-radius: 50%를 사용하여 모든 가장자리를 구부리는 원을 만들었습니다. 그런 다음 원의 그라데이션 배경을 만들었습니다.

다음으로 놀라운 유리 형태 효과를 만들기 위해 backdrop-filter: blur(10px), background: semi-transparent 및 border 속성이 포함된 카드가 있습니다.

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    background: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15rem;
}

.container {
    position: relative;
}

.circle {
    width: 6rem;
    height: 6rem;
    background: linear-gradient(45deg, #7b4397, #dc2430);
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    top: -40px;
    right: -30px;
}

.circle:nth-child(2) {
    top: 240px;
    left: -45px;
    background: linear-gradient(45deg, #000046, #1CB5E0);
}

.card {
    backdrop-filter: blur(16px) saturate(180%);
    background-color: rgb(255 255 255 / 11%);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 15rem;
    padding: 20px 20px;
    padding-top: 20px;
}


.title {
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
}

.form-input {
    margin: 5px 0;
}

.form-input label {
    font-size: 12px;
}

.form-input input {
    backdrop-filter: blur(16px) saturate(180%);
    background-color: rgb(255 255 255 / 11%);
    border: 1px solid rgba(255, 255, 255, 0.125);
    width: 90%;
    padding: 6px 10px;
    color: white;
    outline: none;
}

.form-input input::placeholder {
    color: white;
}

.login-btn {
    background-color: white;
    color: black;
    width: 100%;
    padding: 10px 0;
    margin: 20px 0;
    cursor: pointer;
    border: none;
}

지금까지 출력

Reference

이 문제에 관하여(CSS를 사용한 글래스모픽 로그인 양식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/piyushpatil1243/glassmorphic-login-form-using-css-1led

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

CSS를 사용한 글래스모픽 로그인 양식

HTML 부분을 다루겠습니다.

다음은 최종 HTML 코드입니다.

지금까지 출력

CSS 부분을 이해하자

지금까지 출력

Reference

좋은 웹페이지 즐겨찾기