٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش جلوه های سایه CSS

جلوه های سایه CSS با CSS می توانید سایه را به متن و عناصر اضافه کنید. در این فصل ها با خواص زیر آشنا خواهید شد: text-shadow box-shadow سایه متن CSS text-shadowویژگی CSS سایه را به متن اعمال می کند. در ساده…

محمد یوسفی

13 جولای 2021

جلوه های سایه CSS

با CSS می توانید سایه را به متن و عناصر اضافه کنید.

در این فصل ها با خواص زیر آشنا خواهید شد:

  • text-shadow
  • box-shadow

سایه متن CSS

text-shadowویژگی CSS سایه را به متن اعمال می کند.

در ساده ترین کاربرد آن ، شما فقط سایه افقی (2px) و سایه عمودی (2px) را مشخص می کنید:

 

 


جلوه های سایه CSS

با CSS می توانید سایه را به متن و عناصر اضافه کنید.

در این فصل ها با خواص زیر آشنا خواهید شد:

  • text-shadow
  • box-shadow

سایه متن CSS

text-shadowویژگی CSS سایه را به متن اعمال می کند.

در ساده ترین کاربرد آن ، شما فقط سایه افقی (2px) و سایه عمودی (2px) را مشخص می کنید:

جلوه سایه متن!

مثال

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

بعد ، یک رنگ به سایه اضافه کنید:

 

مثال

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

سپس ، یک اثر تاری به سایه اضافه کنید:

مثال

h1 {
  text-shadow: 2px 2px 5px red;
}

مثال زیر متن سفید با سایه سیاه را نشان می دهد:

مثال

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

مثال زیر سایه براق نئون قرمز را نشان می دهد:

مثال

h1 {
  text-shadow: 0 0 3px #FF0000;
}

چندین سایه

برای افزودن بیش از یک سایه به متن ، می توانید لیستی از سایه ها را با کاما جدا کنید.

مثال زیر سایه براق نئون قرمز و آبی را نشان می دهد:

مثال

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

مثال زیر متن سفید با سایه سیاه ، آبی و آبی تیره را نشان می دهد:

مثال

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

همچنین می توانید از ویژگی text-shadow برای ایجاد یک حاشیه ساده در اطراف برخی از متن ها (بدون سایه) استفاده کنید:

مثال

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها