آموزش کار با سایه ها یا Shadows در CSS3

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با سایه ها یا Shadows در CSS3 با من همراه باشید.

آموزش کار با سایه ها یا Shadows در CSS3

Free-Learn

کار با سایه ها یا Shadows در CSS3

سایه یا به انگلیسی Shadow به حالتی گفته می شود که با استفاده از آن میتوان برای عناصر در یک صفحه وب سایه ایجاد کرد، سایه ای که میتونه در ظاهر به عناصر جذابیت خاصی بده.

ما در زبان CSS دو (۲) حالت سایه میتونیم داشته باشیم :

  • سایه برای باکس ( خوده عنصر )
  • سایه برای متن ( برای متن ها )

که پیشنهاد میکنم در ادامه و تا پایان این جلسه با من همراه باشید تا نحوه کار با این ۲ نمونه سایه رو در CSS بطور کامل یاد بگیرید.

Free-Learn

سایه برای باکس یا Box Shadow در CSS3

در زبان CSS با استفاده از ویژگی box-shadow میتوان به راحتی برای عناصر سایه ایجاد کرد، سایه ای که برای خوده عنصر ( باکس ) باشد.

شکل کلی برای استفاده از این ویژگی در CSS بصورت زیر می باشد :

توضیح گزینه های موجود در دستور بالا :

  • h-shadow : ضروری – سایه افقی را مشخص میکند
  • v-shadow : ضروری – سایه عمودی را مشخص میکند
  • blur : اختیاری – میزان شفافیت یا تاری سایه را مشخص میکند
  • spread : اختیاری – میزان پخش شدن سایه را مشخص میکند
  • color : اختیاری – رنگ سایه را مشخص میکند

مثال شماره ۱ : فقط سایه افقی و عمودی

امتحان کنید

مثال شماره ۲ : سایه افقی و عمودی بهمراه رنگ

امتحان کنید

مثال شماره ۳ : سایه افقی و عمودی ، رنگ و میزان شفافیت یا تاری سایه

امتحان کنید

مثال شماره ۴ : سایه افقی و عمودی ، رنگ و میزان شفافیت و میزان پخش شدن سایه

امتحان کنید

Free-Learn

سایه برای متن یا Text Shadow در CSS3

ویژگی دیگری به اسم text-shadow در CSS داریم که با استفاده از این ویژگی میتوان یک سایه را برای متن ایجاد کرد.

شکل کلی برای استفاده از این ویژگی در CSS بصورت زیر می باشد :

توضیح گزینه های موجود در دستور بالا :

  • h-shadow : ضروری – سایه افقی را مشخص میکند
  • v-shadow : ضروری – سایه عمودی را مشخص میکند
  • blur-radius : اختیاری – میزان شفافیت یا تاری سایه را مشخص میکند
  • color : اختیاری – رنگ سایه را مشخص میکند

مثال شماره ۱ : سایه افقی و عمودی

امتحان کنید

مثال شماره ۲ : سایه افقی و عمودی بهمراه رنگ

امتحان کنید

مثال شماره ۳ : سایه افقی و عمودی بهمراه رنگ و میزان شفافیت

امتحان کنید

Free-Learn

مثال های بیشتر از سایه ها در CSS3

مثال شماره ۱ :

امتحان کنید

مثال شماره ۲ :

امتحان کنید

مثال شماره ۳ : سایه با رفتن ماوس بروی یک عنصر بهمراه افکت انتقال ( transition )

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب