آموزش CSS – سایه در CSS3

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با ویژگی text-overflow در CSS3 آشنا شدید. در این بخش قصد داریم به سایه در CSS3 یپردازیم.

با CSS3 شما می توانید shadow یا سایه را روی متن یا هر المان دیگری در صفحه وب لحاظ کنید

استفاده از سایه در CSS3

CSS3 به شما امکان افزودن افکت سایه را به المان ها همانند آنچه در فتوشاپ است را بدون استفاده از تصاویر, می دهد.

قبل از CSS3 , تصاویر بریده شده برای ساخت سایه ها اطراف المان استفاده می شد که بسیار آزاردهنده بود.

ویژگی box-shadow در CSS3

خاصیت box-shadow به شما امکان افزودن سایه به المان های باکس مانند را می دهد.

شما همچنین می توانید چندین افکت shadow را با کاما جدا و قرار بدید.

مقادیر دریافتی ویژگی box-shadow بصورت زیر است:

  • offset-x – مقدار فاصله سایه با باکس را در راستای محور X – اگر این مقدار مثبت باشد سایه به سمت راست حرکت دارد و اگر منفی باشد سایه به سمت چپ حرکت می کند.
  • offset-y – مقدار فاصله سایه با باکس را در راستای محور y – اگر این مقدار مثبت باشد سایه به سمت پایین حرکت دارد و اگر منفی باشد سایه به سمت بالا حرکت می کند.
  • blur-radius (اختیاری) میزان مات شدن یا محو شدن سایه – اگر تعیین نشود مرورگر مقدار پیشفرض آن که صفر است را به سایه اعمال می کند. وقتی این مقدار صفر باشد لبه سایه کاملا واضح و تیز می شود و هر چه این مقدار بیشتر شود لبه سایه مات تر و محوتر می شود.
  • color – رنگ سایه که اگر مشخص نشود مقدار ویژگی color را دریافت می کند.

مشابه آن می توانید از box-shadow چندگانه به اینصورت استفاده کنید

ویژگی text-shadow در CSS3

با خاصیت text-shadow می توانید افکت سایه را روی متن لحاظ کنید. همچنین همانند مثال بالا اینجا هم می توانید از چندین سایه در یک دستور استفاده کنید.

 

امیدوارم در این بخش آموزش CSS, از سایه در CSS3 نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
برچسب ها : , ,
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره های آموزشی