ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 28) : کار کردن با ویرایشگر سایه یا Shadow



visibility  
mode_comment   ۰

همونطور که اطلاع دارید در جلسه قبل کار کردن با شبیه ساز Sensors یا حسگرهای مختلف رو به شما آموزش دادیم. در این جلسه میخوایم کار با ویرایشگرهای سایه box-shadow و text-shadow رو آموزش بدیم.

همونطور که میدونین با استفاده از text-shadow و box-shadow میتونیم سایه های مختلفی رو برای المنتها و متن های مورد نظرمون قرار بدیم. در این لینک نحوه قرار دادن سایه با این ویژگی ها رو بصورت کامل آموزش دادیم.

ویرایش سایه متن یا text-shadow

فرض کنید که یک المنت h1 بصورت زیر داشته باشیم:

حالا میتونیم با استفاده از ویژگی text-shadow برای متن اون یک سایه قرار بدیم. بصورت زیر:

به همین راحتی. اگر خروجی رو ببینیم، بصورت زیر خواهد بود:

میبینید که یک سایه برای متن قرار گرفته است. حالا بر روی این متن کلیک راست کرده و Inspect Element رو انتخاب کنید. اگر بخش استایلهای مربوط به این المنت رو مشاهده کنید، بصورت زیر خواهد بود:

میبینید که یک آیکون قبل از مقادیر سایه قرار داده شده است. زمانی که بر روی اون هاور میکنید، Open shadow editor نمایش داده میشه. با کلیک بر روی این آیکون میتونین ویرایشگر سایه رو باز کرده و سایه مربوط به این متن رو تغییر بدین. بصورت زیر:

میبینید که خیلی راحت میتونیم سایه مورد نظر رو تغییر بدیم تا به اون چیزی که میخوایم تبدیل بشه. شما هم میتونین درون ورودی های مورد نظر عدد رو وارد کنید و یا اینکه با درگ کردن دسته های موجود، موقعیت سایه و میزان محوشدگی اون رو مشخص کنید.

برای تغییر رنگ نیز بصورت زیر عمل میکنیم:

میبینید که چقد راحت با استفاده از color picker این کار رو انجام میدیم.

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

ویرایش سایه المنت یا box-shadow

فرض کنید که یک المنت div بصورت زیر داشته باشیم:

حالا میتونیم با استفاده از ویژگی box-shadow برای این المنت یک سایه قرار بدیم. بصورت زیر:

به همین راحتی. اگر خروجی رو ببینیم، بصورت زیر خواهد بود:

میبینید که یک سایه برای div قرار گرفته است. حالا بر روی این المنت کلیک راست کرده و Inspect Element رو انتخاب کنید. اگر بخش استایلهای مربوط به این المنت رو مشاهده کنید، بصورت زیر خواهد بود:

میبینید که همانند گذشته، در اینجا هم آیکون مربوط به ویرایشگر سایه قرار دارد و میتونین با استفاده از اون سایه مورد نظر رو ویرایش کنید. با کلیک بر روی این آیکون میتونین ویرایشگر سایه رو باز کرده و سایه مربوط به این المنت رو تغییر بدین. بصورت زیر:

میبینید که در اینجا امکانات بیشتری در اختیارمون قرار میگیره و میتونیم میزان Spread و Inset یا درونی بودن سایه رو نیز برای المنت مورد نظر مشخص کنیم. کار کردن با این ویرایشگر لذت بخش و راحت می باشد و میتونه در قرار دادن سایه به شما خیلی کمک کنه.

برای تغییر رنگ نیز بصورت قبل عمل کرده و از Color picker استفاده میکنیم.

اضافه کردن سریع سایه

تا اینجا در مورد ویرایش سایه صحبت کردیم ولی راهی وجود داره که با استفاده از اون میتونیم به سرعت برای المنت خودمون سایه جدیدی رو اضافه کرده و اون رو تست کنیم.

زمانی که در بخش استایل ها بر روی هر بلاک هاور میکنیم، یک آیکون ... در پایین و سمت راست اون نمایش داده میشه. اگر بر روی اون هاور کنید، میتونین چند کار رو انجام بدین:

میبینید که با هاور کردن بر روی اون تعدادی آیکون نمایش داده میشه که مربوط به اضافه کردن color و background-color و سایه هستند.

با استفاده از آیکونهای سایه با سرعت میتونین سایه مورد نظرتون رو قرار بدین:

میبینید که چقدر سریع میتونیم با ویرایشگر سایه کار کنیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.