افکتهای سایه
سایهٔ جعبه
نشانهگر موس را روی من قرار دهید!
حالت های سایه در CSS
با CSS میتوانید سایه (به انگلیسی: shadow) را به متن و عناصر اضافه کنید.[۱]
در این فصل شما در مورد ویژگیهای زیر را خواهید آموخت:
text-shadow
box-shadow
سایه متن در CSS
ویژگی text-shadow
سایه را به متن اعمال میکند.
در سادهترین حالت، تنها سایه افقی (2px) و سایه عمودی (2px) را مشخص میکنید:
سپس، یک رنگ به سایه اضافه کنید:
سپس، یک حالت مه آلود (Blur) به سایه اضافه کنید:
مثال زیر یک متن سفید را با سایه سیاه نشان میدهد:
مثال زیر یک سایهٔ نئونی درخشان قرمز رنگ را نمایش میدهد:
سایه های گوناگون
برای اضافهکردن بیش از یک سایه به متن، میتوانید لیستی از سایهها را به صورتی که با کاما , از یکدیگر جدا شدهاند اضافه کنید.
مثال زیر یک سایه نئونی درخشان قرمز و آبی رنگ را نمایش میدهد:
مثال زیر یک متن سفید را با سایهٔ سیاه، آبی، و آبی تیره نمایش میدهد:
همچنین میتوانید از ویژگی text-shadow برای ساخت یک کادر ساده دور یک متن (بدون سایهها) استفاده کنید:
این بخش از مقاله: از این قسمت به بعد زیر مجوعه می باشد وباید در جدول جداگانه ذکر شود ، دقیق، کامل و صحیح ترجمه نشده است یا مشکل نگارش فارسی دارد لطفاً این ترجمه را با توجه به نسخهٔ اصلی اصلاح کنید و سپس این الگو را بردارید. |
[[رده:]]
ویژگی box-shadow در CSS
ویژگی box-shadow
سایه را به عناصر اعمال میکند.
در سادهترین حالت این ویژگی، تنها سایه افقی و عمودی را مشخص میکنید:
سپس، یک رنگ به سایه اضافه کنید:
سپس، یک افکت blur به سایه اضافه کنید.
همچنین میتوانید سایهها را به شبه عناصر ::before و ::after، برای ساخت یک جلوه جذاب اضافه کنید:
کارت ها
مثالی از استفاده از ویژگی box-shadow
برای ساخت کارت هایی شبیه کاغذ:
خود را با تمرین ها امتحان کنید!
ویژگیهای سایه در CSS
جدول زیر ویژگیهای سایه (به انگلیسی: shadow) در CSS را لیست میکند:
ویژگی | توضیحات |
---|---|
box-shadow | یک یا چند سایه به عنصر اضافه میکند |
text-shadow | یک یا چند سایه به متن اضافه میکند |
منابع آموزشی