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

جلوه های سایه 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;
}

منبع