نکته : آموزش پیاده سازی این طرح گرافیکی را میتوانید در دوره آموزش جامع و پروژه محور CSS به صورت کامل مشاهده فرمایید!!!
در این مقاله آموزشی قصد داریم یک پروژه گرافیکی را با استفاده از html و css پیاده سازی کنیم. اگر درباره html و css اطلاعاتی ندارید و یا قصد یادگیری آن را به صورت کامل و پروژه محور دارید میتوانید این آموزش ها را به صورت خیلی حرفه ای از طریق لینک دوره آموزش جامع HTML و دوره جامع و پروژه محور CSS به صورت کامل و پروژه محور یاد بگیرید. در این پروژه ما قصد داریم یک صفحه loading بسیار زیبا و گرافیکی را تنها با استفاده از html و css پیاده سازی کنیم و قدرت این دو زبان را زمانی که با هم ترکیب میشوند را به رخ شما بکشیم تا به راحتی درک کنید که در صورت فراگیری تمامی مباحث html و css به راحتی میتوان چنین طرح های گرافیکی را تنها با این دو زبان پیاده سازی کرد. حال میرویم و نحوه پیاده سازی این پروژه را با هم پیش میگیریم.
ابتدا طبق مراحلی که در زیر گفته شده کار خود را شروع کنید و قدم به قدم طبق این مقاله پیش روید :
کد 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;
}
}
و در پایان نیز یک انیمیشن تعریف کرده با نام animate که عملیات سایه گذاری و تغییر رنگ را در بازه های زمانی که تعیین گردیده عوض میکند و طرح گرافیکی ما به راحتی شروع به کار میکند. شما میتوانید از این طرح زیبا برای حالت انتظار در زمان load شدن وب سایت و زمان بارگذاری صفحات خود استفاده کید که بسیار باعث جلب توجه کاربران میشود.
در این مقاله آموزشی آمدیم و یک طرح گرافیکی را به صورت کامل با html و css خام پباده سازی کردیم و دیدیم که چقدر راحت میشود با بکارگیری این دو زبان طرح های گرافیکی بسیار زیبا و خلاقانه ای را پیاده سازی کرد. شما میتواندید برای شماهده پیاده سازی این طرح به کانال یوتیوپ rtot.it و یا دوره آموزش جامع و پروژه محور css مراجعه کنید و آموزش تصویری پیاده سازی این طرح را در آنجا مشاهده فرمایید.
منبع : سایت آرتور - دوره جامع و پروژه محور CSS
با دیدگاه های سازنده خود ما را در بهتر شدن همراهی کنید !
لینک کوتاه
https://b2n.ir/z14853
وقتی صحبت از زبان فرانت اند می شود؛اولین چیزی که به ذهنمان خطور ک...
بوت استرپ یک فریمورک ( چهار چوب ) رایگان و متن باز است که در سال...
در این مقاله آموزشی یک پروژه گرافیکی را با استفاده از HTML و CSS...
در این مقاله به صورت کامل و مفصل درباره زبان برنامه نویسی html می...
در این مقاله آموزشی قصد داریم بازی حدس تصویر را پیاده سازی کنیم ک...
آرتور در زمستان 1400 با هدف آموزش مهارت برنامه نویسی از سطح مقدماتی تا مرحله کسب درآمد، متناسب با نیاز بازار کار تشکیل گردیده است. وب سایت آرتور یک چارت آموزشی مخصوص به دوره های خود دارد که میتواند نقطه شروع شما را تعیین کند. با دوره های رایگان آرتور کار را شروع کنید و در صورت علاقه راه را ادامه دهید.
شما میتوانید با استفاده از یکی از راههای زیر با پشتیبانی ارتباط برقرار کنید
ایمیل: info@rtor.ir
تلگرام :rtor_dev@