كيفية إنشاء ظل لصورة باستخدام كس

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

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

آي إم جي {

 مربع الظل: 10 بكسل 10 بكسل 5 بكسل رغبا (0 ، 0 ، 0 ، 0.5);

}

يتم استخدام وظيفة رغبا لتحديد لون الظل وشفافيتها. في المثال أعلاه ، يتم استخدام ظل أسود شفاف بشفافية 0.5.

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

في هذا المثال ، يتم إنشاء ظل بإزاحة رأسية بمقدار 5 بكسل وطمس 5 بكسل.

1. كيفية إضافة ظل إلى صورة: خطوات ونصائح مهمة لاستخدام كس
2. 1. باستخدام خاصية مربع الظل
3. 2. باستخدام العنصر الزائف:: بعد
4. 3. باستخدام مرشح الظل المسقط
5. نصائح لتطبيق الظلال على صورة:
6. باستخدام خاصية "مربع الظل" لإنشاء ظل
7. ضبط الظلال الأفقية والرأسية باستخدام معلمات" الإزاحة-س "و" الإزاحة-ص
8. إنشاء طمس للظل باستخدام معلمة " نصف قطر التمويه
9. لضبط لون وشفافية الظل
10. أمثلة عملية لاستخدام الظلال للصور
11. سؤال وجواب

كيفية إضافة ظل إلى صورة: خطوات ونصائح مهمة لاستخدام كس

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

1. باستخدام خاصية مربع الظل

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

آي إم جي {

مربع الظل: 2 بكسل 2 بكسل 4 بكسل 0 رغبا (0 ، 0 ، 0 ، 0.5);

}

2. باستخدام عنصر زائف:: بعد

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

آي إم جي {

موضع: نسبي;

}

إمغ:: بعد {

المحتوى: ";

موضع: مطلق;

أعلى: 6 بكسل;

اليسار: 6 بكسل;

العرض: 100%;

الارتفاع: 100%;

مربع الظل: 2 بكسل 2 بكسل 4 بكسل 0 رغبا (0 ، 0 ، 0 ، 0.5);

}

3. باستخدام مرشح الظل المسقط

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

آي إم جي {

تصفية: قطرة الظل(2 بكسل 2 بكسل 4 بكسل رغبا(0, 0, 0, 0.5));

}

نصائح لتطبيق الظلال على صورة:

1. اختر نمط الظل المناسب اعتمادا على تصميم موقعك. بعض الظلال تبدو أكثر طبيعية ، والبعض الآخر يمكن أن تعطي الصورة نظرة أكثر إشراقا وأكثر تعبيرا.
2. جرب قيم خصائص مختلفة لتحقيق النتيجة المرجوة. يمكن أن يؤثر تغيير لون الظل والإزاحة والتمويه بشكل كبير على مظهر الصورة.
3. استخدم الظلال بحكمة. إذا كان الظل ساطعا جدا أو شديدا ، فقد يصرف الانتباه عن الصورة نفسها. حاول إنشاء تصميم متوازن ومتناغم.
4. لا تنسى التوافق. قد لا تدعم بعض المتصفحات القديمة بعض الخصائص المتعلقة بالظل. تحقق من توافق التعليمات البرمجية الخاصة بك مع المتصفحات المختلفة قبل نشرها.

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

باستخدام خاصية "مربع الظل" لإنشاء ظل

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

بناء جملة خاصية "مربع الظل" كما يلي:

مربع الظل: أفقيا تعويض عموديا تعويض طمس اللون;

يشير الإزاحة الأفقية والإزاحة الرأسية إلى إزاحة الظل بالنسبة للعنصر. القيم الإيجابية تحول الظل إلى اليمين وإلى الأسفل ، والقيم السلبية تحوله إلى اليسار وإلى الأعلى.

يحدد التمويه درجة عدم وضوح الظل. كلما ارتفعت القيمة ، كلما كان الظل أكثر ضبابية.

يحدد اللون لون الظل. يمكنك استخدام أسماء الألوان أو الرموز السداسية.

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

مربع الظل: 0 0 10 بكسل رغبا(0, 0, 0, 0.5), 0 0 20 بكسل رغبا (0 ، 0 ، 0 ، 0.3);

سيؤدي ذلك إلى إنشاء ظلين: أحدهما بنصف قطر طمس 10 بكسل وشفافية 0.5 ، والآخر بنصف قطر طمس 20 بكسل وشفافية 0.3.

يمكنك تطبيق خاصية "مربع الظل" على أي عنصر في صفحة الويب الخاصة بك ، بما في ذلك الصور وصور الخلفية والنص.

على سبيل المثال ، لإنشاء ظل على صورة ، يمكنك استخدام الكود التالي:

آي إم جي {

مربع الظل: 0 0 10 بكسل رغبا (0 ، 0 ، 0 ، 0.5);

}

سيؤدي هذا إلى إنشاء ظل بنصف قطر ضبابي 10 بكسل وشفافية 0.5 لجميع الصور على الصفحة.

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

ضبط الظلال الأفقية والرأسية باستخدام معلمات" الإزاحة-س "و" الإزاحة-ص

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

تقوم معلمة " الإزاحة-س "بتعيين الإزاحة الأفقية للظل بالنسبة للعنصر ، وتقوم معلمة" الإزاحة-ص " بتعيين الإزاحة الرأسية.

مثال الاستخدام:

.الظل {

مربع الظل: 5 بكسل 5 بكسل;

}

في هذا المثال ، سيتم تحويل الظل 5 بكسل إلى اليمين و 5 بكسل لأسفل بالنسبة للعنصر مع فئة" الظل". إذا كانت قيمة المعلمة" أوفست-س "سلبية ، ثم سيتم تحويل الظل إلى اليسار ، وإذا كانت قيمة المعلمة" أوفست-ص " سلبية ، ثم سيتم تحويل الظل إلى أعلى.

يمكنك أيضا استخدام قيم مختلفة لمعلمات" أوفست-س "و" أوفست-ص " لإنشاء ظل قطري.:

.قطري-الظل {

مربع الظل: 5 بكسل 5 بكسل;

}

في هذه الحالة ، سيتم تحويل الظل 5 بكسل إلى اليمين و 5 بكسل لأسفل بالنسبة للعنصر مع فئة "الظل القطري". يمكن تغيير هذا التأثير عن طريق تغيير قيم معلمات "الإزاحة-س" و "الإزاحة-ص".

وهكذا ، وذلك باستخدام المعلمات" أوفست-س "و" أوفست-ص " ، يمكنك ضبط إزاحة الأفقي والرأسي من الظل ، والذي يسمح لك لخلق مجموعة متنوعة من الآثار على صفحة ويب.

إنشاء طمس للظل باستخدام معلمة " نصف قطر التمويه

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

لاستخدام معلمة "نصف قطر التمويه" ، يجب عليك تعيين قيمتها بالبكسل أو النسب المئوية بعد الكلمة الرئيسية"طمس". على سبيل المثال:

مربع الظل: 0 0 10 بكسل طمس (5 بكسل);

في هذا المثال ، سيكون للظل نصف قطر ضبابي يبلغ 5 بكسل.

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

مربع الظل: 0 0 10 بكسل رغبا(0 ، 0 ، 0 ، 0.5) طمس (2 بكسل);

في هذا المثال ، سيكون الظل غير واضح ويكون شفافيته 0.5. سيكون التمويه 2 بكسل.

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

ضبط لون وشفافية الظل

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

يتم استخدام خاصية مربع الظل لضبط لون الظل. يبدو رمز إضافة ظل بلون معين كما يلي:

مربع الظل: 0 0 10 بكسل #000000;

هو تمثيل سداسي عشري للون الظل (أسود في هذه الحالة). يمكنك تغيير هذا الرمز إلى قيمة اللون التي تحتاجها.

يمكنك أيضا استخدام وظيفة رغبا () لتعيين لون الظل مع الشفافية. نموذج التعليمات البرمجية:

مربع الظل: 0 0 10 بكسل رغبا (0 ، 0 ، 0 ، 0.5);

- هذا هو لون الظل بتنسيق رغبا ، حيث تمثل القيمة الأخيرة (0.5) الشفافية. يمكن تغيير قيمة الشفافية من 0 (ظل شفاف بالكامل) إلى 1 (ظل معتم).

يمكنك أيضا استخدام اسم اللون بدلا من رمز سداسي عشري أو رغبا. على سبيل المثال:

مربع الظل: 0 0 10 بكسل قرمزي;

- هذا هو اسم اللون الذي سيتم استخدامه للظل.

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

أمثلة عملية لاستخدام الظلال للصور

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

1. مربع الظل: 0 بكسل 0 بكسل 5 بكسل 2 بكسل رغبا (0 ، 0 ، 0 ، 0.5);
3. إذا كنت في حاجة الى الظل داخل الصورة ، يمكنك استخدام الخاصية مربع الظل المغلق مع الكلمة أقحم. على سبيل المثال:
4. سيخلق هذا الرمز ظلا "يتدفق" إلى الصورة.

آي إم جي {