روز هفتم فرانت اند:قرار دادن متن بر روی تصویر با Css
با یکی دیگر از سری آموزش های روز فرانت اند در خدمت شما دوستان هستیم،امروز میخواهیم در این پست با نحوه قرار دادن متن بر روی تصویر با استفاده از Css آشنا شویم.بیشتر مواقع در کلاسها و هم در سایت دوستان سوال های زیادی در رابطه با نحوه قرار دادن متن بر روی تصویر در طراحی رابط کاربری میکنند،از این رو تصمیم گرفتم در این آموزش با ساده ترین روش ها این قابلیت کاربردی رو به صفحه وب اضافه کنیم.(در این پست آموزش با نحوه قرار دادن متن بر روی تصویر همانند عکس زیر آشنا خواهیم شد.)
قدم اول:ساخت لایه HTML
برای شروع کار نیاز داریم تا یک لایه ساده html برای ایجاد یک نگهدارنده تصویر و متن استفاده کنیم.در سند اچ تی ام ال ما از یک تگ div برای ساخت نگهدارنده اصلی به نام wrapper ایجاد کردیم تا بتوانیم به راحتی استایل های مدنظرمان را به تمامی بخش های پروژه اضافه کنیم و همچنین محل قرارگیری تصویر img هم هست.در ادامه هم از یک تگ div برای ایجاد نگهدارنده description یا توضیحات و تعیین محل نمایش متن استفاده می کنیم.(توصیه میکنم برای درک بهتر توضیحات از دوره ویدئویی رایگان آموزش HTML5 استفاده کنید).
<div class='wrapper'> <!-- محل تصویر --> <img src='https://s8.picofile.com/file/8299621642/233706_3177_4.jpg' /> <!-- نگهدارنده متن --> <div class='description'> <!-- نمایش متن مدنظر --> <p class='description_content'>کدفرند،برگذاری دوره های آموزش برنامه نویسی</p> </div> </div>
قدم دوم:افزودن استایل های Css
در ادامه برای اینکه بتوانیم متن را به راحتی بر روی تصویر قرار دهیم باید از Css استفاده کنیم.در فایل Css ما ابتدا برای نگهدارنده wrapper استایل دهی میکنم.سپس در قدم بعدی به description و description_content که در واقع محل نگهداری متن است استفاده میکنم.من از text-align:right; در داخل نگهدارنده description استفاده کردیم تا بتوانیم متن های فارسی را به راحتی نمایش دهیم.یا هم میتوانیم برای body خاصیت dir را اضافه کنیم تا تمامی بخش های پروژه از راست به چپ نوشته شوند.(توصیه میکنم اگر با مباحث توضیح داده شده آشنا نیستید از دوره آموزش Css استفاده کنیم).
body { padding: 20px; font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; } div.wrapper{ float:left; /* important */ position:relative; } div.description{ position:absolute; /* absolute position (so we can position it where we want)*/ bottom:0px; /* position will be on bottom */ left:0px; width:100%; /* styling bellow */ background-color:black; color:white; opacity:0.6; /* transparency */ text-align:right; } p.description_content{ padding:10px; margin:0px; font-weight:700; font-size: 30px; }
به همین راحتی توانستیم متن مدنظرمون رو بر روی تصویر قرار دهیم.برای نمایش دموی این آموزش و هم چنین ویرایش آن از این لینک استفاده کنید.
برچسب:استایل های Css, اموزش css, اموزش CSS3, اموزش front-end, اموزش انلاین رایگان, اموزش فرانت اند, دوره آموزش Css, دوره انلاین css, ساخت لایه HTML, فرانت اند, قرار دادن متن بر روی تصویر با Css, قرار دادن متن بر روی تصویر در وردپرس, قرار دادن متن روی عکس در html, لایه HTML, متن بر روی تصویر, متن روی تصویر, متن روی عکس وردپرس, نوشتن متن روی عکس css, نوشتن متن روی عکس در html