CSS를 사용한 글래스모픽 프로필 카드

22393 단어
안녕하세요 여러분! 이 블로그에서는 CSS를 사용하여 glassmorphism 프로필 카드를 만드는 방법을 설명하겠습니다. 이것은 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">
        <div class="profile-img">
            <img src="../imgs/prof-pic.jpg" alt="profile">
        </div>
        <h4 class="name">Code Scientist</h4>
        <p class="designation">Full Stack Developer</p>
        <button class="glass-btn">View Profile</button>
        <div class="ratings">
            <p>
                <span>80%</span>
                <span>Rating</span>
            </p>
            <p class="partition"></p>
            <p>
                <span>90%</span>
                <span>Activity</span>
            </p>
        </div>
    </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">

    <!-- Google Fonts  -->
    <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>Profile Card (Glassmorphic) using CSS - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="container">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="card">
            <div class="profile-img">
                <img src="../imgs/prof-pic.jpg" alt="profile">
            </div>
            <h4 class="name">Code Scientist</h4>
            <p class="designation">Full Stack Developer</p>
            <button class="glass-btn">View Profile</button>
            <div class="ratings">
                <p>
                    <span>80%</span>
                    <span>Rating</span>
                </p>
                <p class="partition"></p>
                <p>
                    <span>90%</span>
                    <span>Activity</span>
                </p>
            </div>
        </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;
}

/* 3 */
.circle {
    width: 6rem;
    height: 6rem;
    background: linear-gradient(45deg, #fc00ff, #00dbde);
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    top: -40px;
    right: -30px;
}

.circle:nth-child(2) {
    top: 112px;
    left: -65px;
    background: linear-gradient(45deg, #2980B9, #6DD5FA, #ffffff);
}

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

.profile-img {
    height: 100px;
    width: 100px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    backdrop-filter: blur(16px) saturate(180%);
    background-color: rgb(255 255 255 / 11%);
    border: 1px solid rgba(255, 255, 255, 0.125);
}

.profile-img img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
}

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

.designation {
    text-transform: uppercase;
    color: gainsboro;
    font-size: 12px;
    letter-spacing: 1px;
}

.glass-btn {
    backdrop-filter: blur(16px) saturate(180%);
    background-color: rgb(255 255 255 / 11%);
    border: 1px solid rgba(255, 255, 255, 0.125);
    margin: 20px 0;
    padding: 8px 20px;
    cursor: pointer;
    color: white;
}

.ratings {
    backdrop-filter: blur(16px) saturate(180%);
    background-color: rgb(255 255 255 / 11%);
    border: 1px solid rgba(255, 255, 255, 0.125);
    font-size: 12px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: 9px 0;
}

.ratings p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.partition {
    width: 2px;
    background-color: white;
    margin: 0 15px;
}


    지금까지 출력



    "객체.지정". 생각보다 쉽습니다
    【python】화상 처리 그 3 ~NumPy 배열~

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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