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