بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید " شاهکار تولید محتوا " برای علاقمندان به سئو ، جزئیات دوره

آموزش سلکتور backdrop:: در css

مقالات طراحی سایت

چگونه به کمک دستور backdrop می‌توان پس زمینه سیاه رنگ در پشت ویدیوها یا المان های مشابه آن را تغییر داد ؟ این محتوا ممکن است برای شما بسیار جالب باشد !!!

0 8
آموزش سلکتور backdrop:: در css

در مقالات قبلی در مورد انتخاب کننده های بسیاری در css صحبت کردیم . تمامی این انتخاب کننده‌ها بصورت انتخاب کننده‌های :: بودند و مثال هایی از این انتخاب کننده‌ها مواردی همچون marker و placeholder و selection و … بود .

یکی دیگر از انتخاب کننده‌هایی که به شکل انتخابگر :: است ، انتخاب کننده backdrop است که طبق بررسی‌های انجام شده ، تعداد بسیارکمی از css کاران درمورد این انتخاب کننده و نحوه کار آن اطلاع دارند . تقریبا می‌توان بیش از 90 درصد المان های داخل صفحه را توسط دستورات css کنترل کرد . حتی بخش هایی که از نظر شما توسط مروگر کنترل می‌شود همچون قسمت اسکرول بار در صفحه وب را نیز می‌توان با css کنترل نموده و استایل آن را تغییر داد .

از این جهت می‌توان اینگونه برداشت کرد که ما در طراحی وب ، استایل های پیشفرض و هرچیزی که درکل دارای رنگ و عرض و ارتفاع و خصوصیات مربوط به css است را می‌توانیم تغییر دهیم . دراین مقاله به انتخاب کننده backdrop پرداخته و نحوه عملکرد بعلاوه روش درست استفاده از آن را شرح خواهیم داد .

وظیفه سلکتور backdrop چیست ؟

برای اینکه مفهوم عملکرد این سلکتور را بخوبی درک کنید با یک مثال بسیار ساده خدمت شما هستیم . تصور کنید که شما یک ویدیو با ابعاد کوچک دارید . برای مثال ابعاد ویدیو 400 عرض در 1400 ارتفاع است . زمانی که این ویدیو را در نمایشگر بزرگی پخش کرده و حالت تمام صفحه یا Full Screen را فعال کنید ، ویدیو شما در وسط صفحه نمایش داده شده و مابقی صفحه را یک پس زمینه به رنگ مشکی پوشش خواهد داد .

انتخاب کننده backdrop دقیقا در اینجا وارد عمل خواهد شد تا شما بتوانید رنگ پس‌زمینه پیشفرض در این قسمت را نیز تغییر دهید . به مثال زیر دقت کنید :

تغییر رنگ مشکی پشت ویدیو با دستور backdrop

همانطور که در تصویر مشاهده می‌کنید ، فضاهایی که امکان پوشش ویدیو در آنها وجود ندارد با رنگ مشکی پرشده است . اکنون قصد داریم تا این پس‌زمینه را توسط css تغییر دهیم . برای این کار باید در قسمت مدنظر قطعه کدی را به شکل زیر استفاده کنیم ( برای مثال قصد تغییر رنگ در backdrop ویدیوها را دارید ) :

video::backdrop {
  background-color: #448;
}

زمانی که این کد را داخل کدهای css خودتان قرار دهید ، متوجه خواهید شد که رنگ مشکی پیشفرض به رنگی که شما اضافه کردید ، تغییر خواهد کرد . نمونه دیگری از این کد می‌تواند به شکل زیر باشد :

video::backdrop {
  background: hsla(0, 0%, 0%, .5);
}

این کد رنگ توسط دستور hsl نوشته شده است که بازهم یک دستور جهت اعمال رنگ بوده و تفاوتی با حالت HEX یا rgb ندارد . نکته جالب اینجاست که می‌توانید برای پس زمینه این قسمت از دستورات linear-gradient نیز استفاده کرده و پس زمینه چندرنگی به backdrop اضافه کنید که البته درصورتی که رنگ ها به درستی ترکیب نشوند ، نمای جذابی نخواهد داشت و به دلیل مشکلات احتمالی در برخی مرورگرها ، بهتر است از پس زمینه ساده استفاده کنید . البته بازهم این مورد بستگی به سلیقه خود شما دارد .

دستور backdrop تقریبا توسط اکثر مرورگرهای نسخه قدیمی نیز پشتیبانی می‌شود . این ویژگی در مرورگر Chrome از نسخه 37 به بالا ، در مرورگر Edge از نسخه 79 به بالا ، در مرورگر Firefox از نسخه 47 به بالا و در opera از نسخه 24 به بالا پشتیبانی می‌شود .

این سلکتور نیز ازجمله انتخاب کننده‌هایی است که می‌توان تقریبا با اطمینان از آنها استفاده کرد و نگران اعمال نشدن آن در مروگرهای جدید نبود . البته که تمامی مروگرهای جدید این بخش  را بدون مشکل پشتیبانی می‌کنند .

اگر سری مقالات منشتر شده در بخش مقالات طراحی سایت را درمورد دستورات :: مشاهده کرده باشید ، باید گفت این دستورات برای css کاران حرفه‌ای بسیار اهمیت دارد  متاسفانه در دوره های آموزشی css نیز درمورد این موارد توضیحات قابل قبولی ارائه نمی‌شود اما شما با مطالعه مجموعه مقالاتی که خدمتتان ارائه کردیم ، به اصل موضوع این نوع انتخاب کننده‌ها اشراف کامل خواهید داشت .

اگر علاقمند به یادگیری دستورات css به شکلی کامل و دقیق هستید می‌توانید از دوره های آموزشی وب سایت ما خصوصا دوره ” نابغه Css ” استفاده کنید . در این دوره صفرتا هزار مباحث مربوط به css در قالب صدها مثال عملی به همراه بیش از 5 پروژه واقعی و متناسب با نیاز بازارکار از صفر تا صد آموزش داده شده است که با یکبار شرکت در این دوره ، برای همیشه از هر منبع دیگری برای یادگیری مباحث طراحی با زبان css بی‌نیاز خواهید شد . نظرات خود را در بخش دیدگاه‌های همین صفحه با ما به اشتراک بگذارید .

امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

مدت زمان تسلط به Css چقدر است ؟! ممکن است برای برخی تازه کارها و دانشجو های طراحی سایت این سوال پیش آید که مدت زمان تسلط به Css چقدر است و برای یادگیری این زبان جهت طراحی سایت چقدر باید زمان و انرژی صرف کنند تا بتوانند قالب های شیک و کاربر پسند برای […]

9 2,692

چگونه توسط سلکتور focus: در css ، تغییر استایل های مختلفی را روی المان های فرم ایجاد کنیم ؟ بررسی تفاوت focus و hover در طراحی با css !

0 10
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود