بی آکادمی
css آموزش
جلوههای بصری-سایه ها
اجرای کد
<!DOCTYPE html> <html dir="rtl"> <head> <meta charset="UTF-8"> <title>مثال ساده سایههای CSS</title> <style> body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f0f0; } /* سایه برای جعبه */ .box { width: 200px; height: 200px; background-color: #4CAF50; margin: 30px auto; padding: 20px; border-radius: 10px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); } /* سایه برای متن */ .text { font-size: 24px; color: white; text-shadow: 2px 2px 4px #000; padding: 20px; } </style> </head> <body> <div class="box"> <div class="text">متن با سایه</div> </div> <p>این یک مثال ساده از box-shadow و text-shadow است.</p> </body> </html>