تعديل الصورة مع تأثيرات مرشح CSS

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

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

لذلك ، دعونا نجربها ، وسوف نستخدم هذه الصورة من مهدي كي لإظهار الآثار.

الآثار

تطبيق الآثار سهل جدا. ألقِ نظرة على المقتطف أدناه ، لتحويل الصور إلى الرمادي.

 img -webkit-filter: grayscale (100٪)؛  

... وهذا هو ل بني داكن علاء Instagram.

 img -webkit-filter: sepia (100٪)؛  

كلا ال بني داكن و ال الرمادي القيم مذكورة في النسبة المئوية 100٪ هو الحد الأقصى وتطبيق 0٪ سوف تبقي الصورة دون تغيير ، ولكن عندما لا يتم تحديد القيمة صراحة 100٪ سوف تؤخذ على النحو الافتراضي.

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

 img -webkit-filter: brightness (50٪)؛  

يعمل تأثير السطوع مثل التباين وتأثير البني الداكن أعلاه حيث قيمة 0٪ سوف تبقي الصورة كما هي وتطبيق 100٪ سوف تضيء الصورة بالكامل ، والتي من شأنها أن تظهر فقط صفحة بيضاء فارغة بدلا من صورة.

تأثير السطوع أيضا يسمح للقيم السلبية, التي سوف تغميق الصورة.

 img -webkit-filter: brightness (-50٪)؛  

... ويمكننا ضبط تباين الصورة بهذه الطريقة.

 img -webkit-filter: تباين (200٪) ؛  

هناك اختلاف بسيط حول كيفية عمل القيمة أيضًا ، كما ترون في ما سبق ، لقد قمنا بتعيين تناقض() بواسطة 200٪, هذا لأن قيمة 100٪ هي نقطة البداية حيث ستبقى الصورة دون تغيير. عندما تكون القيمة أدناه 100٪, دعنا نقول 50 ٪ ، وسوف تصبح الصورة أقل تباينا.

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

 img -webkit-filter: grayscale (100٪) النقيض (150٪) ؛  

من خلال دمج الفلتر مع انتقال CSS3 ، يمكننا أن نوفر رشيقة يحوم تأثير.

 img: hover -webkit-filter: grayscale (0٪)؛  img: hover -webkit-filter: sepia (0٪)؛  img: hover -webkit-filter: brightness (0٪)؛  img: hover -webkit-filter: تباين (100٪)؛  

أخيرًا ، هناك تأثير آخر يمكننا تجربته ؛ ال التمويه الضبابي, والتي سوف طمس العنصر المستهدف.

 img: hover -webkit-filter: blur (5px)؛  

كما هو الحال في Photoshop ، يتم توضيح قيمة التمويه بنصف قطر البكسل وإذا لم يتم تحديد القيمة صراحة ، فسيتم اعتبار القيمة 0 هي القيمة الافتراضية وترك الصورة كما هي.

الفكر النهائي

هناك بالفعل الكثير من الآثار في المواصفات. مثل هوى تناوب, عكس و ارتوى, لكنني أعتقد أنها أقل تطبيقًا في حالات الويب الحقيقية. وبالتالي ، اقتصر النقاش على أربعة آثار فقط.

وعلى الرغم من المناقشة التي يتم تطبيقها على الصور في هذا البرنامج التعليمي ، يمكن بالفعل تطبيق الخاصية على أي عنصر في DOM.

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

• عرض
• تحميل المصدر