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

ساخت وبلاگ

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

css3 attributes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

موفق باشید

یا علی

Source

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 318 تاريخ : پنجشنبه 11 آبان 1396 ساعت: 13:49

خبرنامه