مدرس: پس، توی این درس، می‌خوایم یاد بگیریم
چطور در واقع می‌تونیم با استفاده از CSS سایه بسازیم.
و به منظور نشون دادن اینکه سایه‌ها توی CSS چطور کار می‌کنن،
کاری که می‌خوایم انجام بدیم اضافه کردن یه سایه‌ست
به هر کدوم از این کارت‌های اینجا.
و یادتونه که،
اون یکی از کاربردهای متداول سایه‌هاست.
پس، اضافه کردن یه سایه متوسط به یه کارت محصول
مثل این یکی‌های اینجا، درسته؟
حالا، اضافه کردن سایه‌ها توی CSS در واقع کاملاً سادست.
تنها کاری که باید انجام بدیم استفاده از ویژگی box shadow هست.
پس، برای اضافه کردن سایه به یه جعبه،
بعد یادتونه که چطور گفتم ما می‌تونیم
سایه هم به متن اضافه کنیم،
ولی یه ذره بیشتر درباره اون بعداً.
ولی به هر حال، ویژگی box shadow
در واقع نیاز به چندین مقدار اینجا داره.
ما می‌تونیم چهار یا پنج مقدار مشخص کنیم و اولی،
اساساً، فاصله افقی سایه‌ست.
پس اینجا، توی مقدار اول، می‌تونیم یه طول مشخص کنیم،
که بعد فاصله افقی
بین جعبه و سایه خواهد بود.
پس، بیایید فقط 20 پیکسل اینجا امتحان کنیم.
بعد، مقدار دوم همینه،
ولی برای جهت عمودی.
پس، اساساً، فاصله سایه از جعبه
توی این جهت اینجا.
پس، بیایید از 20 پیکسل هم استفاده کنیم.
و فعلاً، فقط دارم هر مقداری رو اینجا می‌ذارم
و بعد توضیح میدم که چطور می‌تونیم
سایه‌های کوچیک و متوسط و بزرگ بسازیم با تنظیم این مقادیر.
بسیار خب.
بعدی، مقدار سوم تاری سایه‌ست.
پس، اگه از یه مقدار کوچیک استفاده کنیم، تقریباً تار نخواهد بود.
و اگه از یه مقدار خیلی بزرگ استفاده کنیم،
اونوقت، البته، تاری خیلی زیاد خواهد بود.
پس دوباره، دارم از 20 پیکسل اینجا استفاده می‌کنم
و بعد اینها رو همین جوری که پیش میریم تنظیم می‌کنیم.
بعد، مقدار شماره چهار در واقع اختیاریه،
ولی چیزی که بهمون اجازه میده انجام بدیم اینه که،
اساساً، سایه رو بزرگ‌ترش کنیم.
پس، بیایید استفاده کنیم، بیایید بگیم 10 اینجا.
بسیار خب.
ولی یادتون باشه که این یکی اختیاریه
و اگه مشخصش نکنیم، به سادگی صفر خواهد بود.
بعد، آخری رنگ سایه‌ست.
و اینجا، بیایید فقط فعلاً از سیاه استفاده کنیم،
که وحشتناک به نظر خواهد اومد،
ولی این فقط برای پُر کردنش با یه سری مقداره.
پس، اگه ذخیره‌اش کنیم، اونوقت
خب، یه سایه بزرگ، سیاه و وحشتناک به نظر دریافت می‌کنیم.
حالا، در واقع، ما می‌خوایم سایه فقط
روی این قسمت نباشه، بلکه روی کل کارت باشه.
پس، بیایید ببینیم یه کلاسی روش هست یا نه.
و هست، پس کلاس chair.
پس اینجا، و،
آره، مهم نیست.
فکر کنم همشون کلاس chair خواهند داشت.
و چیزی که اینجا هم متوجه میشم اینه که
هر کدومشون در واقع یه المان figure هستن.
و یه المان figure فکر کنم قبلاً توضیحش ندادم،
ولی، اساساً، یه المان متداوله
که ما برای یه کارت محصول مثل این استفاده می‌کنیم.
ولی می‌تونستیم از المان HTML مقاله هم استفاده کنیم،
مثل چیزی که توی چالش‌های کدنویسی
بخش قبل استفاده کردیم.
یادتونه؟
پس، اونجا یه کفش داشتیم که اونم،
یه جورایی، یه مقاله بود مثل این یکی‌های اینجا.
و پس اونجا، از المان article استفاده کردیم.
پس دوباره، می‌تونستیم اینجا هم ازش استفاده کنیم،
ولی figure هم، یه جورایی، یه استاندارده
برای نمایش هر کارتی مثل این یکی‌ها.
ولی به هر حال، بیایید حالا برگردیم،
کلاس chair رو اینجا انتخاب کنیم و سایمون رو اونجا منتقل کنیم.
قشنگه، یا شاید اونقدرا هم قشنگ نیست،
چون حالا باید اون مشکل اول رو برطرف کنیم،
که اینه که سایه خیلی تیره‌ست،
که باعث میشه خیلی غیرطبیعی به نظر برسه.
حالا، یادتونه از خیلی وقت پیش چطور یاد گرفتیم
که وقتی می‌خوایم یه رنگ با یه مقدار شفافیت نمایش بدیم،
معمولاً از نشانه‌گذاری RGBA برای اون استفاده می‌کنیم، درسته؟
پس، می‌تونیم راحت این رو با هاور کردن روی این رنگ تبدیل کنیم.
و بعد، اینجا توی انتخاب‌گر رنگ،
فقط باید روی این عنوان کلیک کنیم.
یه بار دیگه.
آره، پس حالا RGB داریم، و اگه بعد این اسلایدر رو عوض کنیم
A رو اینجا و مقدار چهارم رو اضافه می‌کنه،
که برای شفافیته.
حالا معمولاً، برای سایه از یه مقدار خیلی پایین استفاده می‌کنیم،
چیزی مثل 0.1، حداکثر.
پس، این سایه‌ایه که توی اون موقعیت دریافت می‌کنید.
اما، برای نشون دادن همه مقادیر دیگه،
بیایید دوباره‌اش بریم به یه مقدار بالا
تا بتونیم در واقع سایه رو ببینیم
وقتی بقیه مقادیر رو دستکاری می‌کنیم.
پس معمولاً، توی طراحی رابط کاربری،
می‌خوایم منبع نور، اساساً، از بالا بیاد.
پس، اساساً، از اینجا تابیده بشه پایین
به سمت اون المنت از اینجا
پس، معنیش اینه که سایه
نمی‌تونه مثل الان باشه،
چون داشتن یه سایه که به همون میزان
به پایین و راست میره،
یه جورایی، یعنی منبع نور اینجاست،
تو این جهتی که دارم ماوس رو حرکت میدم می‌تابه، درسته؟
پس، فکر کنم کاملاً قابل درکه.
و پس، ولی اگه می‌خوایم منبع نور
اینجا بالا باشه، پس تو این جهت،
اونوقت ما نمی‌خوایم هیچ فاصله‌ای اینجا به این سمت باشه.
و پس، معمولاً، ما این مقدار اینجا رو روی صفر تنظیم می‌کنیم.
باشه؟
و پس، فکر کنم این
الان خیلی طبیعی‌تر به نظر میاد.
بعد، مقدار دیگه در واقع اوکی به نظر میاد،
پس فاصله عمودی.
پس، برای یه سایه متوسط، این یه میزان معقوله.
بعد، این یکی اینجا، یادتونه، تاریه.
و مثلاً، بیایید روی یه چیز کوچیک‌تر تنظیمش کنیم،
فقط برای دیدن.
و توی حالت افراطی، اگه صفر باشه،
اونوقت سایه کاملاً یه جعبه خواهد بود.
پس، درست مثل این، باشه؟
اما، می‌بینید که جعبه،
پس این سایه بزرگ‌تر از خود جعبه اصلیه.
و پس، دلیلش این مقدار شماره چهاره،
که، یادتونه، شعاعه.
که یادتونه، اساساً، یه مقداره
برای بزرگ کردن سایه جعبه.
پس معمولاً، من در واقع این رو روی صفر می‌ذارم،
و پس اونوقت اینطوری به نظر میاد.
پس الان، سایه فقط اینجا پشت جعبه‌ست
و بعد یه ذره اینجا بیرون میاد
به خاطر این 20 پیکسل.
و اگه اونها رو بیشتر کنیم،
اونوقت این قسمت اینجا، البته، بزرگ‌تر میشه، درسته؟
پس، من معمولاً این رو اینجا روی صفر می‌ذارم،
که همون کاره که کلاً حذفش کنیم،
ولی فقط اینجا می‌ذارمش تا بدونید،
برای مرجع، که پنج تا مقدار ممکن وجود داره.
پس، البته، این الان اصلاً شبیه یه سایه نیست.
پس، بیایید یه ذره تاری دوباره اینجا اضافه کنیم.
پس در 10، مثلاً، اینطوری به نظر میاد،
که هنوزم کاملاً غیرطبیعی به نظر میاد.
و در حالی که این یه ذره بهترش می‌کنه،
ولی هنوزم، می‌تونیم بزرگ‌تر بریم، مثل 30 پیکسل.
و پس، در حالی که، حداقل به نظر من،
اون خیلی بهتر به نظر میاد.
می‌تونستیم حتی بزرگ‌تر بریم، ولی اونوقت سایه‌ها
شروع می‌کردن به همپوشانی با هم اینجا.
و پس، بیایید اونجا نریم.
اوکی؟ پس، اگه الان این مقدار اینجا رو کم کنیم،
شروع می‌کنه کاملاً طبیعی به نظر برسه،
که همیشه چیزیه که باید دنبالش باشیم
وقتی داریم اینجا توی CSS سایه طراحی می‌کنیم.
اوکی؟ پس الان این شبیه یه سایه قشنگ و تمیز
و مخصوصاً طبیعی به نظر میاد،
و خوب کارشو انجام میده برای برجسته کردن
این کارت‌های اینجا فقط یه ذره،
ولی بدون اینکه شلوغی بصری زیادی به صفحمون اضافه کنه.
و فکر کنم در واقع می‌تونیم حتی یه ذره کمتر هم بریم.
پس، چی میشه اگه 5% بهش بدیم؟
اونوقت حتی ظریف‌تر میشه، ولی هنوزم کافیه
که ما، اساساً، این حاشیه رو اینجا دریافت کنیم.
پس، بدون سایه، این به سادگی همش سفید بود،
که با انجام این کار می‌تونیم ببینیمش، درسته؟
ولی، وقتی شروع می‌کنیم یه ذره سایه بیشتر اضافه کنیم،
اونوقت، البته، شروع می‌کنه یه جدایی ایجاد کنه
بین خود المان و پس‌زمینه.
پس، البته، اون 0.5 هست،
و شاید این یه ذره خیلی کمه.
بیایید روی هفت بذاریمش.
پس، این، اساساً، یه شفافیت 7% هست.
و پس، این یه مقداریه که دوست دارم
توی این موقعیت‌ها ازش استفاده کنم، و این کاملاً قشنگ به نظر میاد.
و امیدوارم با این، یاد گرفته باشید
که این ویژگی box shadow در واقع چطور کار می‌کنه.
حالا، این نوع ویژگی، که نیاز به این همه مقدار داره
در واقع یه کاندید خوبیه که بریم توی
مستندات MDN دنبالش بگردیم.
پس، MDN box shadow، اگه علاقه‌مند به یادگیری بیشتر
درباره این ویژگی خاص هستید.
مثال‌های زیادی هم هست.
مثلاً، برای ساخت اون نوع درخشش
که قبلاً بهش اشاره کردم.
پس، البته، سایه لازم نیست
یه نوع خاکستری باشه، پس، مثل، یه تغییر شکل سیاه،
ولی می‌تونید از یه رنگ استفاده کنید تا
این نوع جلوه درخشان رو اونجا بسازید.
و البته می‌تونید سایه رو حرکت بدید،
حتی با استفاده از مقادیر منفی اینجا.
و آره، حتی می‌تونید، در واقع، چندین سایه اضافه کنید،
همونطور که روی این المان داریم، با اضافه کردن یه ویرگول اینجا.
درسته، می‌تونید درباره همشون هم بخونید،
ولی ما قرار نیست این کار رو انجام بدیم.
ولی، این دقیقاً همون چیزیه که مستندات واسش هست.
و حالا، فقط برای تموم کردن، بذارید خیلی سریع،
بهتون نشون بدم چطور می‌تونیم روی متن هم از سایه استفاده کنیم.
پس، فقط این رو کپی می‌کنم، چون خیلی شبیهه.
و بیایید فقط اینجا روی المان H1 مون انجامش بدیم.
پس، به جای اینکه box shadow صداش بزنیم،
بهش text shadow میگیم،
و این یکی اون مقدار چهارم spread رو نداره.
پس، فقط همینطوریه.
بیایید یه ذره بیشتر اینجا اضافه کنیم، فقط برای دیدن جلوه.
و بفرما.
حالا، این تاری زیادیه،
به همین خاطره که واقعاً نمی‌تونیم ببینیمش.
پس اینجا، مقادیر باید خیلی کوچیک‌تر باشن،
و حالا می‌تونید ببینیدش، درسته؟
پس، یه چیزی شبیه این ممکنه امکان‌پذیر باشه.
و پس، توی این موقعیت،
البته، این واقعاً خوب به نظر نمیاد،
ولی در واقع text shadow کاملاً مفیده
برای موقعیت‌هایی که روی یه عکس متن دارید.
پس، این یه چیزیه که بحثش نکردم
وقتی درباره عکس حرف زدیم،
ولی اون یه تکنیک دیگه خواهد بود برای مدیریت
متن روی عکس‌ها.
بسیار خب، ولی بیایید خاموشش کنیم،
چون یه جورایی دیوونه‌کننده به نظر میاد.
و پس آره، همین برای کار با سایه‌ها توی CSS.
امیدوارم منطقی بوده باشه و سرگرم‌کننده بوده
که به اضافه کردن جلوه‌های دنیای واقعی ادامه بدیم که
روی صفحات دیگه‌ای می‌بینید که هر روز ازشون بازدید می‌کنید.
و بعدی، قراره درباره border radius حرف بزنیم،
که یکی دیگه از اونهاست،
یه ذره از ویژگی‌های مدرن‌تر CSS،
که توی دنیای واقعی همیشه ازشون استفاده می‌کنیم.