كيفية إنشاء Drop Shadow باستخدام CSS

على الرغم من اختلاف اتجاهات التصميم كل عام ، يمكنك الاعتماد على استخدام تأثيرات الظل الأساسية مثل مربع الظل و شبح الهبوط للمساهمة بشكل إيجابي في جماليات موقع الويب. يمكنك استخدام إسقاط الظلال لإنشاء تأثيرات ممتعة وجميلة دون أن تبدو وكأنها جبنة.

دعونا نلقي نظرة فاحصة على CSS شبح الهبوط خاصية.

ما هو الظل المسقط لـ CSS؟

شبح الهبوط( ) هو تأثير CSS يعرض ظلًا حول شكل كائن محدد. إليك صيغة تطبيق CSS شبح الهبوط.

بناء الجملة:
عامل التصفية: الظل المسقط (إزاحة- x تعويض- y لون طمس نصف القطر) ؛

هناك مجموعة واسعة من ملفات وظائف التصفية بما فيها طمس (), سطوع( )، و شبح الهبوط( ).

تعويض x يحدد المسافة الأفقية و تعويض ذ يحدد المسافة العمودية. لاحظ أن القيم السالبة تضع الظل على اليسار (تعويض x) و ما فوق (تعويض ذ) الكائن.

المعلمتان الأخيرتان اختيارية. يمكنك تحديد نصف قطر تمويه الظل كطول. بشكل افتراضي ، يتم تعيينه على 0. لا يمكن أن يكون لديك نصف قطر ضبابي سلبي.

تم تحديد لون الظل كـ. إذا لم تحدد لونًا ، فإنه يتبع قيمة اللون خاصية.

متى يكون الظل المسقط لـ CSS مفيدًا؟

قد تعرف ذلك بالفعل مربع الظل يقوم بالعمل بشكل جيد. لذا ، قد تعتقد ، لماذا نحتاج

شبح الهبوط على الاطلاق؟ هناك العديد من الحالات التي يكون فيها ملف شبح الهبوط( ) الوظيفة هي المنقذ. دعونا نلقي نظرة على بعضها:

الأشكال غير المستطيلة

على عكس أ مربع الظل، يمكنك إضافة ملف شبح الهبوط لأشكال غير مستطيلة. على سبيل المثال ، لدينا SVG أو PNG شفافة ذات شكل غير مستطيل — نجمة على سبيل المثال. هنا ، يمكن إكمال إضافة الظل الذي يتوافق مع الكائن نفسه بأي منهما مربع الظل أو شبح الهبوط. ضع في اعتبارك كلا السيناريوهين:

لغة البرمجة

CSS

.star-img img {
عرض: مضمنة كتلة ؛
الارتفاع: 15 م ؛
العرض: 25 م ؛
}
.box-shadow {
لون احمر؛
مربع الظل: 0.60em 0.60em 0.2em ؛
}
.شبح الهبوط {
عامل التصفية: الظل المسقط (0.60em 0.60em 0.2em) ؛
}

انتاج |:

عند مقارنة كلا التأثيرين ، من الواضح أن أ مربع الظل يعطي ظل مستطيل لا يهم أيضًا ما إذا كانت الصورة شفافة أو تمتلك خلفية بالفعل. من ناحية أخرى، شبح الهبوط يسمح لك بإنشاء ظل يتوافق مع شكل الصورة نفسها.

العوامل المحددة هي أن شبح الهبوط( ) الدالة تقبل جميع معلمات النوع فيما عدا أقحم الكلمات الرئيسية و الانتشار معامل.

العناصر المجمعة

هناك العديد من الحالات التي قد تحتاج فيها إلى بناء مكونات عن طريق تداخل عناصر معينة. إذا كنت تستخدم ملفات مربع الظل، ستواجه مشكلة محاولة إلقاء الظل بالطريقة الصحيحة. إليك كيفية عملها عند تجميع صورة ومكون نصي:

لغة البرمجة

عش اللحظة

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit، non debitis، facilis eligendi ea labore obcaecati ut quia asperiores. Modi، Corrupti Goodsi quisquam ex numquam incidunt.

CSS الأساسية

هيئة {
الحشو: 5em 1em ؛
عائلة الخطوط: "Lucida Sans" ، "Lucida Sans Regular" ، "Lucida Grande" ،
"Lucida Sans Unicode"، جنيف، Verdana، sans-serif ؛
}
h2 {
حجم الخط: 2rem ؛
}
ص {
حجم الخط: 0.8rem ؛
}
.parent-container {
عرض: فليكس ؛
الاتجاه المرن: العمود.
الارتفاع: 17rem ؛
العرض: 50em ؛
}
.image-container img {
العرض: 15em ؛
الموقف: مطلق.
مؤشر z: 1 ؛
أعلى: 2em ؛
اليسار: 1.5em ؛
}
.text-container {
اللون: rgb (255 ، 236 ، 236) ؛
لون الخلفية: rgb (141 0 35) ؛
العرض: 30 ريم ؛
الحشو: 3rem.
محاذاة الذات: نهاية مرنة ؛
الموقف: نسبي ؛
}

الآن ، قم بتطبيق مربع الظل و شبح الهبوط لنرى الفرق.

.شبح الهبوط {
عامل التصفية: الظل المسقط (0.4rem 0.4rem 0.45rem rgba (0 ، 0 ، 30 ، 0.5)) ؛
}
.علبة،
.box img {
مربع الظل: 0.4rem 0.4rem 0.45rem rgba (0 ، 0 ، 30 ، 0.3) ؛
}

انتاج:

كما ترى ، فإن مربع الظل يتم تطبيقه على كل عنصر على حدة بينما شبح الهبوط يجمع كل منهما ويطبق الظل.

العناصر المقصوصة

يمكنك استعمال ال مقطع مسار خاصية قص منطقة معينة تحدد أجزاء الصورة أو العنصر التي يجب عرضها. ال مرشح الظل المسقط يسمح لنا بإنشاء ملف شبح الهبوط على العنصر المقتطع من خلال تطبيقه على أصل هذا العنصر:

لغة البرمجة

CSS

.parent-container {
المرشح: الظل المسقط (0rem 0rem 1.5rem المارون) ؛
}
.clipped-element {
العرض: 50em ؛
الارتفاع: 50 م ؛
الهامش: 0 تلقائي ؛
صورة الخلفية: url (smiling-girl.jpg) ؛
مسار القصاصة: دائرة (50٪) ؛
حجم الخلفية: غطاء ؛
تكرار الخلفية: لا تكرار ؛
}

انتاج:

لقد قمنا بقص 50٪ من الصورة بمسار دائري. لذلك ، فإن مرشح الظل المسقط يتم تطبيقه على الجزء المرئي من الصورة فقط. أليس هذا رائعًا؟

القيود والاختلافات

كما ناقشنا أعلاه ، شبح الهبوط لا يدعم الانتشار معامل. هذا يعني أن إنشاء تأثير مخطط تفصيلي لن يكون ممكنًا باستخدام امتداد شبح الهبوط( ) تعمل لأنها تقتل في كل مكان. أيضًا ، فإنه يعرض تأثيرات ظل مختلفة من مربع الظل و ظل النص (مع نفس المعلمات). قد تشعر أن الاختلافات بين مربع الظل و شبح الهبوط تغلي حتى نموذج مربع CSS. أحدهما يتبعه بينما الآخر لا يتبعه. هذا مثال:

لغة البرمجة

كل مقالة MUO ستقربك خطوة واحدة.


كل مقالة MUO ستقربك خطوة واحدة.



كل مقالة MUO ستقربك خطوة واحدة.

CSS الأساسية

هيئة {
الحشو: 5em 1em ؛
عائلة الخطوط: "Lucida Sans" ، "Lucida Sans Regular" ، "Lucida Grande" ،
"Lucida Sans Unicode"، جنيف، Verdana، sans-serif ؛
}
.parent-container {
العرض: 72 ريم ؛
}
ص {
حجم الخط: 3em ؛
نمط الخط: جريء ؛
}

تطبيق تأثيرات الظل

.شبح الهبوط {
عامل التصفية: الظل المسقط (0.5em 0.5em 0.1em # 555) ؛
}
.box-shadow {
مربع الظل: 0.5em 0.5em 0.1em # 555 ؛
}
.ظل النص {
ظل النص: 0.5em 0.5em 0.1em # 555 ؛
}

انتاج:

يمكنك أن ترى أن ملف مربع الظل يعطي ظلًا أثقل وأكثر قتامة من ظل النص و شبح الهبوط. أيضًا ، هناك اختلاف طفيف في موضع الظل بين ظل النص و شبح الهبوط. ومع ذلك ، قد تفضل تأثيرات ظل مختلفة وفقًا لمتطلباتك.

دعم المتصفح

ال شبح الهبوط( ) الوظيفة مدعومة في جميع المتصفحات الحديثة باستثناء المتصفحات القديمة مثل Internet Explorer. على الرغم من أنه ليس شيئًا من شأنه أن يعيق تجربة المستخدم بشكل خطير ، إلا أنه يمكنك إضافة استعلام عن الميزة بامتداد مربع الظل تراجع.

جرب تأثيرات الظل المختلفة

شعبية مربع الظل واضح تمامًا بسبب كثرة حالات الاستخدام. ومع ذلك ، فإن شبح الهبوط( ) وظيفة غير مستغلة بشكل كبير. نأمل أن تجرب تأثيرات ظل مختلفة وتحاول تنفيذها شبح الهبوط في مشاريعك المستقبلية.

تضيف الفئات الزائفة نطاقًا جديدًا تمامًا من الوظائف إلى CSS ومخزون تطوير الويب الشخصي الخاص بك. تعرف على المزيد عنها لتصبح مطور ويب أكثر كفاءة وفعالية.

كيفية استخدام CSS box-shadow: 13 حيلة وأمثلة

الصناديق اللطيفة تبدو مملة. قم بتجميلها باستخدام تأثير ظل مربع CSS!

اقرأ التالي

نبذة عن الكاتب