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