افکت های سایه CSS (Shadow Effects)
در «افکت های سایه CSS»، می توانید با ویژگی «سایه متن (Text Shadow)» به نوشته ها عمق و درخشش بدهید. ابتدا فاصله افقی و عمودی را تعیین می کنید؛ سپس، برای واقعی تر شدن، رنگ و میزان محو شدن را نیز می افزایید.
سایه متن در افکت های سایه CSS
ویژگی text-shadow روی متن اعمال می شود. در ساده ترین حالت فقط دو مقدار افقی و عمودی دارد؛ با این حال، می توانید رنگ و بلور را نیز اضافه کنید.
سایه ساده (بدون رنگ و بلور)
h1 { text-shadow: 2px 2px; }
افزودن رنگ به سایه
h1 { text-shadow: 2px 2px red; }
افزودن محو شدن (blur)
h1 { text-shadow: 2px 2px 5px red; }
متن سفید با سایه تیره
h1 { color: white; text-shadow: 2px 2px 4px #000000; }
درخشش نئونی قرمز
h1 { text-shadow: 0 0 3px #ff0000; }
چندین سایه (Multiple Shadows)
برای بیش از یک سایه، مقدارها را با ویرگول جدا کنید. این روش برای افکت های نئونی چندرنگ بسیار کاربردی است.
h1 { text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff; }
همچنین می توانید با چهار سایه جهت دار، دور متن یک «بوردر» بسازید.
h1 { color: coral; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }
نکته: برای یادگیری بیشتر، مستندات text-shadow در MDN را ببینید. همچنین مبحث گرادیان مخروطی و صفحه سایه کادر (Box Shadow) را دنبال کنید.