التعتيم عند الحواف هو تأثير يضيف نمطا وعمقا للصورة أو الخلفية. يتيح لك هذا التأثير ، الذي يستخدم غالبا في التصميم ، إبراز جزء مهم من الصورة أو خلق جو غامر. في هذا الدليل ، ونحن سوف اقول لكم كيفية إنشاء هذا التأثير باستخدام هتمل و كس دون استخدام الأدوات والأطر المعقدة.
بادئ ذي بدء ، سوف نحتاج إلى كتلة حيث سيتم وضع صورتنا أو خلفيتنا. يمكننا استخدام العلامة
لإنشاء هذه الكتلة. داخل هذه العلامة ، سنضع صورتنا أو تعيين لون الخلفية باستخدام كس.
بعد ذلك ، يمكننا البدء في إنشاء تأثير سواد عند الحواف. للقيام بذلك ، سوف نستخدم العناصر الزائفة:: قبل و:: بعد في كس. تتمثل الخطوة الأولى في تعيين حجم وموضع هذه العناصر الزائفة بحيث تغطي صورتنا أو خلفيتنا بالكامل. ثم اضبط لون خلفية العناصر الزائفة على اللون الأسود مع بعض الشفافية لإنشاء تعتيم.
أعلى: 0;
}
بعد تطبيق هذا كس ، كتلة لدينا سيكون لها تأثير سواد على الحواف. يمكنك ضبط الشفافية واللون يعتم عن طريق تغيير القيمة في وظيفة رغبا (). يمكنك أيضا تعيين لون مختلف باستخدام كلمة رئيسية مثل الأسود أو الرمادي.
- الآن لديك دليل بسيط لإنشاء تأثير سواد عند الحواف. يمكن أن يكون هذا التأثير مفيدا في المواقف المختلفة عندما تحتاج إلى تمييز جزء من الصورة أو إنشاء جو على موقعك.
- كيفية تنفيذ تأثير سواد على الحواف
- طريقة سهلة لإنشاء تأثير سواد على حواف صفحة الويب
- الأدوات اللازمة لإنشاء تأثير سواد على الحواف
- خطوات وإرشادات لإنشاء تأثير سواد على الحواف
- سؤال وجواب
- كيف يمكنني إنشاء تأثير سواد على الحواف في فوتوشوب?
- ما هي الطرق الأخرى التي يمكنني استخدامها لإنشاء تأثير سواد حول الحواف في فوتوشوب?
- كيف يمكنني إنشاء تأثير سواد على الحواف في برنامج الأعرج??
في أي المواقف يكون من المفيد استخدام تأثير التعتيم على الحواف في الصورة?
كيفية تنفيذ تأثير سواد على الحواف
يعد تأثير تعتيم الحواف ، المعروف أيضا باسم تأثير المقالة القصيرة ، طريقة شائعة لإنشاء صور أو عناصر رسومية أكثر جاذبية على موقع الويب.
يعطي الصورة تأثير عمق ويركز على الجزء المركزي من الصورة.
هناك عدة طرق لتنفيذ تأثير سواد على الحواف ، ولكن واحدة من أبسط هو استخدام كس.
- وإليك كيفية تنفيذ ذلك:
- إنشاء حاوية للصورة: قم بإنشاء حاوية تحتوي على الصورة أو العنصر الرسومي الذي تريد تطبيق تأثير التعتيم عليه. دعنا نسميها ، على سبيل المثال ، "حاوية الصور".
- إنشاء فئة للحاوية: في كس ، حدد فئة للحاوية التي تم إنشاؤها "صورة حاوية". سمها ، على سبيل المثال ، "المقالة القصيرة". قم بتطبيق الأنماط التي تحدد عرض الحاوية وارتفاعها ، بالإضافة إلى لون الخلفية (عادة ما يكون أسود) والتعتيم (عادة 0.5).
إضافة صورة: داخل الحاوية ، أضف علامة أو عناصر أخرى لوضع صورتك أو عنصر رسومي.
كائن صالح: غطاء;
}
- أتش تي أم أل:
سيقوم الرمز أعلاه بإنشاء حاوية ذات تأثير سواد على الحواف بعرض 400 بكسل وارتفاع 300 بكسل. سيتم قياس الصورة تلقائيا داخل الحاوية حتى يتم ملؤها بالكامل.
يمكنك ضبط قيم العرض والارتفاع ولون الخلفية والتعتيم في كس لتناسب احتياجاتك.
بهذه الطريقة ، يمكنك بسهولة تنفيذ تأثير سواد على حواف صورك أو عناصر رسومية ، مما يضيف جاذبية وعمقا لتصميماتك على موقع الويب.
طريقة سهلة لإنشاء تأثير سواد على حواف صفحة الويب
هل تريد أن تعطي صفحة الويب الخاصة بك تأثير سواد على حواف? في هذه المقالة ، سوف نخبرك عن طريقة بسيطة لتحقيق هذا التأثير.
- لإنشاء تأثير سواد على الحواف ، ستحتاج إلى استخدام كس. إليك كيفية القيام بذلك:
إنشاء ملف نمط كس جديد أو فتح واحد موجود. يمكنك استخدام نمط مضمن أو ملف نمط خارجي.
أضف الكود التالي إلى ملف النمط الخاص بك:
- الجسم {
لون الخلفية: #000;
}
.حاوية {
موضع: نسبي;
}
.تراكب {
موضع: مطلق;
أعلى: 0;
- اليسار: 0;
- العرض: 100%;
- الارتفاع: 100%;
لون الخلفية: رغبا (0 ، 0 ، 0 ، 0.5);
| مؤشر الأحداث: لا شيء; | } |
|---|---|
| لف محتويات صفحة الويب الخاصة بك في حاوية مع فئة "الحاوية". على سبيل المثال: | |
| إضافة عنصر مع فئة" تراكب " داخل الحاوية. على سبيل المثال: | |
الآن ، عند تحميل صفحة الويب الخاصة بك ، يجب أن ترى تأثير التعتيم عند الحواف. سيتم تعتيم خلفية الصفحة بنسبة 50 ٪ من الشفافية بسبب خاصية "لون الخلفية" للعنصر مع فئة "التراكب".
يمكنك ضبط لون التعتيم عن طريق تغيير قيمة وسيطات "رغبا()" في خاصية "لون الخلفية". على سبيل المثال ، " رغبا(0 ، 0 ، 0 ، 0.5) " يعني سواد لون الأسود بنسبة 50 ٪ الشفافية.
- الآن لديك طريقة سهلة لإنشاء تأثير سواد على حواف صفحة ويب باستخدام كس. حاول إضافة هذا التأثير إلى مشاريعك وتزيين صفحات الويب الخاصة بك!
- الأدوات اللازمة لإنشاء تأثير سواد على الحواف
- لإنشاء تأثير سواد على الحواف ، ستحتاج إلى الأدوات التالية:
- رمز هتمل للصفحة: لوضع المحتوى وتحديد بنية الصفحة التي سيتم تطبيق تأثير سواد.
- أنماط كس: لوصف مظهر عناصر الصفحة ، بما في ذلك إنشاء تأثير سواد على الحواف.
- تعبئة متدرجة: لإنشاء انتقال سلس من الشفافية إلى التعتيم الكامل على حواف الصفحة.
وفيما يلي مثال على رمز كس التي يمكن استخدامها لإنشاء تأثير سواد:
الممتلكات
المعنى
صورة الخلفية
التدرج الخطي
حجم الخلفية
100% 100%
الخلفية-كرر
لا تكرار
الخلفية-الموقف