طرح گرافیکی 1

مقدمه

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

شروع کار:

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

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

توضیح کدهای HTML

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

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

توضیح نکات مهم کدهای CSS

درفایل 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 مراجعه کنید و آموزش تصویری پیاده سازی این طرح را در آنجا مشاهده فرمایید.

سورس کد HTML و CSS

تصویر شماره 1

تصویر شماره 2⁠⁠⁠⁠⁠⁠⁠

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