برنامه نویسی

چگونه کامپوننت کارت با ظاهری زیبا ایجاد کنیم؟

ek3nk4r 2023-07-05

0 53 خواندن این مطلب 5 دقیقه زمان میبرد

چگونه کامپوننت کارت با ظاهری زیبا ایجاد کنیم؟

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فهرست مطالب

معرفی

اجزای کارت در طراحی های رابط کاربری مدرن بسیار رایج هستند و در همه جا قابل مشاهده هستند. این یک ابزار همه کاره و ضروری برای ارائه اطلاعات و محتوا به شیوه ای جذاب و بصری جذاب است. در این مقاله، ما با اجزای کارت آشنا می شویم و یاد می گیریم که چگونه می توانیم اجزای کارت را با ظاهری زیبا با ساخت یک جزء کارت پروفایل بسازیم.

نتیجه نهایی

کامپوننت کارت نمایه نهایی

اگر می‌خواهید امتحان کنید، در نهایت اینگونه به نظر می‌رسد. در این قسمت می توانید فایل شروع و کد نهایی را دریافت کنید

کد نهایی و فایل شروع

ایجاد جزء کارت نمایه

کارت پروفایل چیست؟

کارت های نمایه اجزای رابط کاربری هستند که برای نمایش اطلاعات در مورد یک فرد به شیوه ای مختصر و از نظر بصری جذاب استفاده می شوند. به طور کلی، یک کارت نمایه شامل یک تصویر نمایه، نام، عنوان شغلی، مکان، اطلاعات تماس، مهارت‌ها است. ممکن است یک بیوگرافی مختصر نیز وجود داشته باشد. با در نظر گرفتن همه اینها، کارت نمایه خود را می سازیم.

بیایید شروع به ساختن کنیم

مرحله اول، اجازه دهید یک سند html حاوی جزئیات ذکر شده در بالا ایجاد کنیم

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico"/>
    <link rel="stylesheet" href="./style/style.css">
    <title>profile-card</title>
</head>
<body>
    <main class="profile-card">
        <img class="profile-pic" src="./assets/images/profile-pic.png">
        <div class="details">
        <h1 class="name">
            Whiskers Whiskerton
        </h1>

        <div class="location"><img src="./assets/images/location-dot-solid.svg"/><span >NEW YORK</span></div>
        <p class="description">
            UI/UX designer and front-end developer
        </p>
        <div class="button">
            <button class="message-button">Message</button>
            <button class="follow-button following">Follow</button>
        </div>
        <div class="skills">
            <h2>SKILLS</h2>
            <ul class="skills-list">
            <li>UI/UX</li>
            <li>Front End Development</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>React</li>
            <li>Bootstap</li>
        </ul>
        </div>
    </div>
    </main>
</body>
</html>

<main> شامل تمام جزئیات است و این کارت ما خواهد بود.
من قبلاً فایل css را اضافه کرده ام <head>.
نام کلاس را هم برای استایل تعریف کرده ام.

اکنون به استایل می پردازیم که مهمترین بخش در این امر است

/* GLOBAL */

* {
    margin: 0;
    padding: 0;
}

انتخاب طرح رنگ مناسب:
- این بستگی به رنگ برند دارد. سپس می توانید رنگ های مکمل را انتخاب کنید.
- رنگ برند رنگ اصلی شماست، این رنگ زودتر قابل مشاهده خواهد بود. این بدان معنا نیست که بیشتر در طراحی مورد استفاده قرار می گیرد، بلکه به این معنی است که در جایی استفاده می شود که می خواهید کاربر شما روی آن تمرکز کند.
- در اینجا این جزء و دکمه های کارت ما خواهد بود.

/* COLORS */
:root {
    /* primary */
    --brand-color: rgb(42, 38, 95);
    --button: rgb(29, 24, 107);
    /* neutral */
    --dark: rgb(20, 16, 68);
    --light: rgb(238, 237, 253);
    --light-grey: rgb(211, 211, 245);
    --background-blue: rgb(113, 117, 218);
}

تعریف ساختار و چیدمان:
- کارت باید مستطیل شکل باشد.
- به طور کلی، عرض و ارتفاع ثابتی دارد.
- تعیین موقعیت کارت در اینجا از آنجایی که فقط روی کارت وجود دارد، باید در مرکز قرار گیرد.

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-card {
    width: 350px;
    padding: 3rem 0rem 0rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-radius: 14px;
    background-color: var(--light);
}

از تایپوگرافی قانع کننده استفاده کنید:
- ما استفاده می کنیم font-face اضافه کنم که

/* FONTS */

@font-face {
    font-family: 'Roboto';
    src: url(../assets/fonts/Roboto-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    src: url(../assets/fonts/Roboto-Bold.ttf);
    font-weight: 700;
}
body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--light-grey);
    background-color: var(--background-blue);
}

سبک دادن به تمام عناصر دیگر، در حالی که یک ظاهر طراحی شده است، این نکات را در نظر داشته باشید
- گوشه را دور نگه دارید، گرد بودن ممکن است متفاوت باشد، آن را نرم به نظر می‌رساند (از شعاع حاشیه استفاده کنید).
- متفاوت font-size و font-weight به طوری که سلسله مراتب را قابل مشاهده می کند.

.profile-pic {
    padding: 5px;
    width: 160px;
    border-radius: 90px;
    filter: brightness(70%);
    border: 3px solid var(--brand-color)
}


.details {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background-color: var(--brand-color);
    border-radius: 0px 0px 14px 14px;
}

.name {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.location {
    display: flex;
    align-items: center;
    gap: 10px;
}

.location img {
    height: 1rem;
    filter: invert();
}

.button {
    width: 70%;
    display: flex;
    justify-content: space-around;
}

.button button {
    width: 100px;
    padding: 0.8rem 1.2rem;
    border: none;
    background-color: var(--dark);
    color: var(--light);
    border-radius: 5px;
}


.skills {
    margin-top: 30px 0px;
    padding: 1rem 0rem;
    border-top: 2px solid var(--dark);
}

.skills h2 {
    padding: 0.3rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

.skills-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.skills-list li {
    cursor: pointer;
    padding: 0.1rem 1rem;
    margin: 2px 0px;
    font-size: 0.8rem;
    border-radius: .4rem;
    display: inline-block;
    color: var(--light);
}

.skills-list li:hover {
    transform: translateY(-5px);
    color: var(--dark);
    background-color: var(--background-blue);
}

.button button:hover {
    transform: translateY(-3px);
    color: white;
    background-color: var(--button);
}
.profile-pic:hover {
    transform: translateY(-5px);
    filter: brightness(100%);
}

پس از تمام این تغییرات، Componet کارت پروفایل

کد نهایی CSS

/* GLOBAL */

* {
    margin: 0;
    padding: 0;
}


/* FONTS */

@font-face {
    font-family: 'Roboto';
    src: url(../assets/fonts/Roboto-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    src: url(../assets/fonts/Roboto-Bold.ttf);
    font-weight: 700;
}

/* COLORS */
:root {
    /* primary */
    --brand-color: rgb(42, 38, 95);
    --button: rgb(29, 24, 107);
    /* neutral */
    --dark: rgb(20, 16, 68);
    --light: rgb(238, 237, 253);
    --light-grey: rgb(211, 211, 245);
    --background-blue: rgb(113, 117, 218);
}


body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--light-grey);
    background-color: var(--background-blue);
}

.profile-card {
    width: 350px;
    padding: 3rem 0rem 0rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-radius: 14px;
    background-color: var(--light);
    box-shadow: 0px 3px 8px var(--dark);
}

.profile-pic {
    padding: 5px;
    width: 160px;
    border-radius: 90px;
    filter: brightness(70%);
    border: 3px solid var(--brand-color)
}

.profile-pic:hover {
    transform: translateY(-5px);
    filter: brightness(100%);
}

.details {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background-color: var(--brand-color);
    border-radius: 0px 0px 14px 14px;
}

.name {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.location {
    display: flex;
    align-items: center;
    gap: 10px;
}

.location img {
    height: 1rem;
    filter: invert();
}

.button {
    width: 70%;
    display: flex;
    justify-content: space-around;
}

.button button {
    width: 100px;
    padding: 0.8rem 1.2rem;
    border: none;
    background-color: var(--dark);
    color: var(--light);
    border-radius: 5px;
    box-shadow: 0px 1px 3px 0px black;
}

.button button:hover {
    transform: translateY(-3px);
    color: white;
    background-color: var(--button);
}

.skills {
    margin-top: 30px 0px;
    padding: 1rem 0rem;
    border-top: 2px solid var(--dark);
}

.skills h2 {
    padding: 0.3rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

.skills-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.skills-list li {
    cursor: pointer;
    padding: 0.1rem 1rem;
    margin: 2px 0px;
    font-size: 0.8rem;
    border-radius: .4rem;
    display: inline-block;
    color: var(--light);
}

.skills-list li:hover {
    transform: translateY(-5px);
    color: var(--dark);
    background-color: var(--background-blue);
}

جزء کارت نهایی
کامپوننت کارت نمایه نهایی

نتیجه

این فرآیندی است که من هنگام ساختن بیشتر کامپوننت ها دنبال می کنم. اگر تمام نکات مقاله را حفظ کنید، خوب است که ادامه دهید. سعی کنید پروژه های بیشتر و بیشتری بسازید. تمرین تنها راه درست کردن این موارد است.

من از fontendmentor تمرین می کنم. می توانید آن را امتحان کنید.

برای هر گونه پیشنهاد زیر نظر دهید. ممنون که خواندید