طرح های گرافیکی شماره 2

مطالعه

مقاله آموزشی

رضا کوهساری

خواندن این مقاله 10 دقیقه زمان می‌برد

نکته : آموزش پیاده سازی این طرح گرافیکی را میتوانید در دوره آموزش جامع و پروژه محور CSS به صورت کامل مشاهده فرمایید!!!

مقدمه

در این مقاله آموزشی قصد داریم یک پروژه گرافیکی را با استفاده از html و css پیاده سازی کنیم. اگر درباره html و css اطلاعاتی ندارید و یا قصد یادگیری آن را به صورت کامل و پروژه محور دارید میتوانید این آموزش ها را به صورت خیلی حرفه ای از طریق لینک دوره آموزش جامع HTML و دوره جامع و پروژه محور CSS به صورت کامل و پروژه محور یاد بگیرید. در این پروژه ما قصد داریم یک صفحه loading بسیار زیبا و گرافیکی را تنها با استفاده از html و css پیاده سازی کنیم و قدرت این دو زبان را زمانی که با هم ترکیب میشوند را به رخ شما بکشیم تا به راحتی درک کنید که در صورت فراگیری تمامی مباحث html و css به راحتی میتوان چنین طرح های گرافیکی را تنها با این دو زبان پیاده سازی کرد. حال میرویم و نحوه پیاده سازی این پروژه را با هم پیش میگیریم.

شروع کار

ابتدا طبق مراحلی که در زیر گفته شده کار خود را شروع کنید و قدم به قدم طبق این مقاله پیش روید :

یک پروژه در ide ( ویرایشگر متن ) خود بسازید.
یک فایل از نوع index.html در ویرایشگر متن خود بسازید.
یک فایل css به نام style.css بسازید.
و سپس کدهای سند html خود را به صورت زیر پیاده سازی کنید.

کد html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>P_2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="loading">
    <span style="--i:1"><i>L</i></span>
    <span style="--i:2"><i>o</i></span>
    <span style="--i:3"><i>a</i></span>
    <span style="--i:4"><i>d</i></span>
    <span style="--i:5"><i>i</i></span>
    <span style="--i:6"><i>n</i></span>
    <span style="--i:7"><i>g</i></span>
    <span style="--i:8"><i>.</i></span>
</div>

</body>
</html>

توضیحات قطعه کد بالا

در ابتدا باید متناسب با تعداد کاراکترهایی که قصد داریم در این پرنامه شرکت دهیم تگ از نوع span بسازیم که هر کدام از تگ های span نشان دهنده یک کاراکتر در پروژه میباشند در مرحله بعدی برای هر تگ از نوع span باید یک متغیر تعریف کنیم از یک نوع چون در قسمت افکت دادن با استفاده از کدهای css این متغیر ها نقش کلیدی خواند داشت، پس یک متغیر به نام i برای هر تگ تعریف کرده و مقادیر متوالی به آن میدهیم و دلیل این کار دقیقا این است که ما قصد این را داریم که برنامه و پروژه به گونه ای باشد که کلمه loadnig به صورت متوالی افکت بگیرد. تا جلوه زیبا ترین به خود بگیرد در ادامه باز هم این موضوع را توضیع خواهیم داد، پس تا اینجا کدهای html خود را به صورت کامل نوشتیم و حال باید کدهای css را برای زیبایی کار به تگ های html تزریغ کنیم.

کد CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}
.loading{
    display: flex;
    align-items: flex-end;
    transform: translateY(-35px);

}
.loading span{
    width: 20px;
    height: 20px;
    background: #111;
    margin: 0 10px;
    height: calc(20px * var(--i));
    display: flex;
    justify-content: center;
    align-items: flex-end;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.25s * var(--i));
}

@keyframes animate {

    0%{
        background: #fff;
        filter: blur(2px);
        box-shadow: 0 0 10px #00b3ff,
                    0 0 20px #00b3ff,
                    0 0 40px #00b3ff,
                    0 0 80px #00b3ff,
                    0 0 120px #00b3ff,
                    0 0 200px #00b3ff,
                    0 0 300px #00b3ff,
                    0 0 400px #00b3ff;
    }
      25%,75%{
        background: #111;
        filter: blur(0px);
        box-shadow: none;
    }
      100%{
        background: #fff;
        filter: blur(2px);
        box-shadow: 0 0 10px #00b3ff,
                    0 0 20px #00b3ff,
                    0 0 40px #00b3ff,
                    0 0 80px #00b3ff,
                    0 0 120px #00b3ff,
                    0 0 200px #00b3ff,
                    0 0 300px #00b3ff,
                    0 0 400px #00b3ff;
    }

}

.loading span i{
    display: block;
    font-style: normal;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    transform: translateY(70px);
    animation: animate2 2s linear infinite;
    animation-delay: calc(0.25s * var(--i));

}

@keyframes animate2 {

    0%{
        color: #fff;
        filter: blur(2px);
        text-shadow: 0 0 10px #00b3ff,
        0 0 20px #00b3ff,
        0 0 40px #00b3ff,
        0 0 80px #00b3ff,
        0 0 120px #00b3ff,
        0 0 200px #00b3ff,
        0 0 300px #00b3ff,
        0 0 400px #00b3ff;
    }
    25%,75%{
        color: #111;
        filter: blur(0px);
        text-shadow: none;
    }
    100%{
        color: #fff;
        filter: blur(2px);
        text-shadow: 0 0 10px #00b3ff,
        0 0 20px #00b3ff,
        0 0 40px #00b3ff,
        0 0 80px #00b3ff,
        0 0 120px #00b3ff,
        0 0 200px #00b3ff,
        0 0 300px #00b3ff,
        0 0 400px #00b3ff;
    }

}

بررسی نکات مهم قطعه کد بالا

font-family اعمال یک فونت بر روی طرح گرافیکی خود
min-height قرار دادن حداقل ارتفاع بر روی 100vh به این معنا که ارتفاع بدنه پروژه ما کمتر از 100vh نباید باشد.
transform به این معناست که در جهت محور Y در محور مختصات به اندازه 35px در جهت عکس حرکت کن.
animation تعریف یک انیمیشن به نام animate که در مدت زمان 2 ثانیه انجام شدنش زمان ببرد که به صورت خطی این انیمیشن بر روی طرح ما اعمال شود.

و در پایان نیز یک انیمیشن تعریف کرده با نام animate که عملیات سایه گذاری و تغییر رنگ را در بازه های زمانی که تعیین گردیده عوض میکند و طرح گرافیکی ما به راحتی شروع به کار میکند. شما میتوانید از این طرح زیبا برای حالت انتظار در زمان load شدن وب سایت و زمان بارگذاری صفحات خود استفاده کید که بسیار باعث جلب توجه کاربران میشود.

در این مقاله آموزشی آمدیم و یک طرح گرافیکی را به صورت کامل با html و css خام پباده سازی کردیم و دیدیم که چقدر راحت میشود با بکارگیری این دو زبان طرح های گرافیکی بسیار زیبا و خلاقانه ای را پیاده سازی کرد. شما میتواندید برای شماهده پیاده سازی این طرح به کانال یوتیوپ rtot.it و یا دوره آموزش جامع و پروژه محور css مراجعه کنید و آموزش تصویری پیاده سازی این طرح را در آنجا مشاهده فرمایید.

منبع : سایت آرتور - دوره جامع و پروژه محور CSS

900 بازدید 2 سال پیش این مقاله در سایت قرار گرفته

برای ثبت نظر ابتدا باید وارد سایت شوید