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

مطالعه

مقاله آموزشی

رضا کوهساری

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

مقدمه

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

شروع کار:

ابتدا به انتهای مقاله مراجعه کنید و عکس های پروژه را دانلود و در سیستم خود ذخیره کنید و سپس ...

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

کد html

<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="UTF-8">
	<title>p_1</title>
	<link rel="stylesheet" href="style.css">

</head>

<body>

	<div class="container">
		<img src="man.jpg">
		<img src="bg.jpg" class="cover">
	</div>

</body>
</html>

توضیح کدهای بالا

در تگ title نام پروژه خود را مینویسیم که در اینجام نام پروژه p_1 است
سپس در تگ link سند و کدهای css و استایل های خود را فراخوانی میکنیم
در تگ بدنه که همان تگ body است شروع به ساخت لایه های خود میکنیم
یک تگ والد از نوع div ساخته که شامل دو فرزند از نوع تگ img است
سپس به تگ ها، classهایی با نام continer و cover برای تزریغ استایل css داده

خب هم اکنون کار ما با تگ های html به پایان رسیده و نوبت به کدهای css میرسد:

کد های CSS

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

.container img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.container img.cover{
    mix-blend-mode: multiply;
    filter: contrast(150%);
}

توضیح نکات مهم کدهای بالا

درفایل style.css باید کدها دقیقا به صورت بالا نوشته شود

* در استایل دهی css به معنای کل سند و کل تگ های body است. پس استایل هایی که به صورت * داده میشود به معنای این است که این استایل ها بر روی همه تگ های فرزند تگ body اعمال شود.

margin تمامی فاصله های بیرونی تگ والدرا برابر صفر قرار میدهد
padding تمامی فاصله های داخلی تگ والد را برابر صفر میکند
box-sizing: border-box اطراف و حاشیه ها را متناسب با پروژه از بین میبرد
object-fit:cover باعث میشود عکس کل بک‌گراندش را بپوشاند
mix-blend-mode:multiply مهم ترین قطعه کد در این پروژه که باعث ترکیب دو عکس میشود
filter:contrast(150%) باعث تغییرات وضوح تصویر میشود

حرف آخر

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

تصویر شماره 1

تصویر شماره 2

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

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

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