-1

هل يمكن جعل ال box-shadow متعدد الالوان ؟

🌹🌹🌹🖤

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

0
waelaljamal أضف ردا

نعم يمكن ذلك بتمريرالأولان تباعاً

أمثلة:

box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80), 0 -10px 20px -5px #7b272c;
أو
box-shadow: 0 5px 0 rgba(255, 0, 0, 1), 0 10px 0 rgba(0, 255, 0, 1);
0
waelaljamal أضف ردا

مثال مع تحديد الإتجاهات:

box-shadow: 
  0px -10px 15px -6px  rgba(255,000,000,0.7), /* أعلى - أحمر */
  0px  5px  15px  0px  rgba(000,255,000,0.3), /* أسفل*/
  5px  0px  15px  0px  rgba(000,000,255,0.3), /* يمين */
  -5px  0px  15px  0px  rgba(100,100,100,0.3); /* يسار*/
0
Alasdee_Ali أضف ردا

طيب اكدر اخلي اللون الواحد يكون في الزاوية وليس في الضلع ؟

يعني بدل ما يكون في الاسفل واخر في اليمين يكون لون واحد في اسفل اليمين

اتمنى وصلت🌹🖤

0
waelaljamal أضف ردا

حاول إضافة الظل في زاوية معينة جرب المثال التالي حيث نستخدم خاصية shadow spread

HTML:
<div class="my_Div"></div>

CSS:
.my_Div
{
  border: 1px solid #333;
  width: 50px;
  height: 50px;
  box-shadow: 10px 0 5px -2px #888;
}
0
Salah_Beriani أضف ردا

تستطيع الوصول للنتيجة المرغوبة بانشاء عدة ضلال وتحدد تموضعها في المثال في الأسفل أنشأت ضل أحمر على اليمين وضل أزرق على اليسار

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        justify-content: center;
      }


      div {
        margin-top: 300px;
        width: 100px;
        height: 100px;
      
        box-shadow: 16px 0px 0px 1px rgba(255, 0, 0, 0.75), -17px 0px 0px 1px rgba(54, 0, 255, 0.75);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
  <script></script>
</html>

هذه الاداة بامكانها مساعدتك في انشاء الضلال