آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه آخر) : آموزش text-shadow و box-shadow

همونطور که اطلاع دارید در جلسه قبل در مورد ویژگی Pointer-events توضیحاتی رو قرار دادیم و مثالهایی رو زدیم تا شما رو با قابلیتهای اون آشنا کنیم. در این جلسه میخوایم کار با ویژگی‌های text-shadow و box-shadow و فیلتر drop-shadow و کاربردهای اونا رو به شما توضیح بدیم.

میبینید که در این جلسه تمرکزمون رو میخوایم بر روی سایه‌ها قرار بدیم. در ابتدا در مورد سایه‌های متنی یا همون text-shadow توضیح میدیم و بعد از اون مباحث مربوط به box-shadow و تفاوتهایی که با فیلتر drop-shadow داره رو با هم بررسی میکنیم.

قرار دادن سایه برای متن با text-shadow

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

<h1>CSS Shadow</h1>

حالا میتونیم به راحتی برای اون سایه قرار بدیم. بصورت زیر:

h1 {
	text-shadow: 10px 10px;
}

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

میبینید که یک سایه دقیقا شبیه به خود متن 10 پیکسل در راست و پایین متن قرار گرفته. اگر مقادیر منفی برای این دو مقدار قرار بدین، سایه مورد نظر در جهت‌های مخالف قرار خواهد گرفت. شما میتونین با استفاده از مقدار اختیاری سوم، یک شعاع بلور یا محوشدگی برای سایه درنظر بگیرید. مثلا کد رو بصورت زیر تغییر میدیم:

h1 {
	text-shadow: 10px 10px 10px;
}

خروجی بصورت زیر میشه:

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

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

h1 {
	text-shadow: 10px 10px 10px red;
}

میبینید که یک سایه قرمز رنگ رو به وجود آوردیم. خروجی بصورت زیر میشه:

همچنین شما میتونین چند سایه رو بصورت همزمان برای یک متن قرار بدین. برای اینکار سایه‌ها رو با استفاده از کاما از هم جدا میکنیم. بصورت زیر:

h1 {
	text-shadow: 50px 50px 10px red, 100px 100px yellow, -10px -10px green;
}

خروجی بصورت زیر میشه:

در مواردی که از چند سایه بصورت همزمان استفاده میکنید، هر سایه ای که اول‌تر باشه، بالاتر قرار میگیره و بقیه موارد زیر اون قرار میگیرن.

قرار دادن سایه با box-shadow

همونطور که میدونین میتونین با استفاده از box-shadow برای المنتهای مورد نظرتون سایه قرار بدین. فرض کنید که یک المنت بصورت زیر دارید:

<div class="caret"></div>

حالا کد CSS زیر رو براش قرار میدیم:

.caret {
  background-color: #eee;
  box-shadow: 10px 10px 30px #333;
  width: 100px;
  height: 100px;
}

میبینید که یک سایه برای اون قرار گرفته است. خروجی بصورت زیر میشه:

میبنیید که به همین راحتی میتونیم سایه قرار بدیم. حالا یک نکته جالب که در این لینک بیان شده رو با هم بررسی میکنیم. فرض کنید که المنت div بالا رو بصورت مثلثی در بیاریم و دوباره براش سایه قرار بدیم. بصورت زیر:

.caret {
  box-shadow: 10px 10px 30px #333;
  border-left: solid 70px transparent; 
  border-right: solid 70px transparent; 
  border-bottom: solid 70px #ddd; 
  height: 0; 
  width: 0; 
}

میبینید که با استفاده از تکنیک border‌ها یک مثلث رو به وجود آوردیم. زمانی که از box-shadow برای این مثلث استفاده میکنیم، خروجی بصورت زیر میشه:

میبینید که سایه همچنان بصورت مستطیلی نمایش داده میشه و از قواعد CSS Box Model پیروی میکنه و سایه دور تا دور مثلث قرار نمیگیره. برای حل این مشکل میتونین از ویژگی فیلتر و تابع drop-shadow استفاده کنید. بصورت زیر:

.caret {
  filter: drop-shadow(0 0 30px #333);
  border-left: solid 70px transparent; 
  border-right: solid 70px transparent; 
  border-bottom: solid 70px #ddd; 
  height: 0; 
  width: 0; 
}

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

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

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

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

موفق باشید

یا علی

Source

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.