في هذا الثريد سوف نتعرف على
ال Css Drop shadow
و الفرق بينها و بين box-shadow
قراءة ممتعة 😇
🧵👇🏻
ال Css Drop shadow
و الفرق بينها و بين box-shadow
قراءة ممتعة 😇
🧵👇🏻
✳ الفرق بين box-shadow و drop-shadow.
ال box-shadow تقوم بعمل ظل من حول الصورة أو العنصر
لكن drop-shadow تقوم بعمل ظل بنفس شكل العنصر او الصورة
المثال في الصورة تحت 👇🏻
عند التعامل مع الصور و تريد تطبيق drop-shadow
يجب أن تكون الصورة بصيغه png و لا تحتوي على خلفية
👇🏻
ال box-shadow تقوم بعمل ظل من حول الصورة أو العنصر
لكن drop-shadow تقوم بعمل ظل بنفس شكل العنصر او الصورة
المثال في الصورة تحت 👇🏻
عند التعامل مع الصور و تريد تطبيق drop-shadow
يجب أن تكون الصورة بصيغه png و لا تحتوي على خلفية
👇🏻
✳ شرح اهم قيم ال drop-shadow.
يمكنك تحريك موقع الظل عمودي و افقي
تحديد ضبابية الظل Blur
تحديد اللون
الصورة تحت توضح أكثر.
👇🏻
يمكنك تحريك موقع الظل عمودي و افقي
تحديد ضبابية الظل Blur
تحديد اللون
الصورة تحت توضح أكثر.
👇🏻
✳ عمل أكثر من drop-shadow.
يمكن إستخدام أكثر من ظل بقيم مختلفه
الصورة تحت توضح
👇🏻
يمكن إستخدام أكثر من ظل بقيم مختلفه
الصورة تحت توضح
👇🏻
يتميز ال drop-shadow
بتطبيق الظل على عناصر الصورة
يجب أن تكون الصورة
بصيغه png
و بدون خلفية (خلفيه شفافه)
الشكل الأصلي قبل و بعد تطبيق الخاصية
في الصورة تحت
👇🏻
بتطبيق الظل على عناصر الصورة
يجب أن تكون الصورة
بصيغه png
و بدون خلفية (خلفيه شفافه)
الشكل الأصلي قبل و بعد تطبيق الخاصية
في الصورة تحت
👇🏻
نلتقي في ثريد أخر 😇
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة
جاري تحميل الاقتراحات...