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

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

استخدام مرشحات CSS

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

هناك 10 وظائف لفلتر CSS متاحة لتصميم عنصر HTML الخاص بك:

  • طمس ()
  • سطوع()
  • مقابلة()
  • شبح الهبوط()
  • تدرج الرمادي ()
  • هوى تدوير ()
  • عكس()
  • عتامة ()
  • مشبع ()
  • بني داكن()

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

تعمل بعض هذه المرشحات بشكل أفضل مع الآخرين عند استخدامها بالطريقة الصحيحة.

فيما يلي أمثلة لدمج مرشحات CSS لتحقيق تأثيرات بصرية مختلفة على عنصر صورة.

instagram viewer

1. تدرج الرمادي والبني الداكن

ال تدرج الرمادي () يزيل عامل التصفية جميع معلومات الألوان من صورة أو عنصر نص. يأخذ المرشح قيمة بين 0 و 1 ، مع 0 يعني اللون الأصلي و 1 هو تأثير التدرج الرمادي الكامل.

ال بني داكن() يقوم المرشح بتطبيق تأثير لون بني داكن على صورة أو عنصر نص. يأخذ المرشح أيضًا قيمة بين 0 و 1.

على سبيل المثال:

IMG {
منقي: تدرج الرمادي(14%) بني داكن(30%);
}

الجمع تدرج الرمادي () بنسبة 14٪ و بني داكن() عند 30٪ يمكن أن تخلق تأثيرًا قديمًا أو رجعيًا على صورتك.

2. عكس وتشبع

ال مشبع () يزيد المرشح أو يقلل من تشبع صورة أو عنصر نص. يأخذ المرشح قيمة بين 0 وما لا نهاية ، مع كون 1 هو اللون الأصلي والقيم الأعلى تزيد من التشبع.

ال عكس() سيعكس المرشح ألوان صورة أو عنصر نص عن طريق قلب تدرج لون كل لون موجود بمقدار 180 درجة على عجلة الألوان. هذا يعني أن المرشح يغير مستويات السطوع والتشبع للعنصر مع الحفاظ على تدرج اللون.

على سبيل المثال:

IMG {
منقي: عكس(30%) مشبع(75%);
}

يقوم هذا الكود بعكس ألوان الصورة ويزيد التشبع بنسبة 75٪.

3. التدوير والتباين

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

الجمع بين هوى تدوير () و مقابلة() يمكن أن تخلق الفلاتر تأثيرًا حيويًا وملونًا على صورك.

على سبيل المثال:

IMG {
منقي: هوى تدوير(10درجة) مقابلة(150%);
}

يمكن أن يقبل Hue-rotate قيمة درجة, خريج, راد، أو دور. يقوم الكود أعلاه بتدوير لون الصورة بمقدار 10 درجات ويزيد التباين.

4. السطوع والتشويش

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

الجمع بين سطوع() و طمس () يمكن أن تخلق المرشحات تأثيرًا حالمًا وناعمًا على صورك.

على سبيل المثال:

IMG {
منقي: سطوع(0.8) طمس(5مقصف);
}

الكود أعلاه يقلل من السطوع بواسطة 0.8 (80%) ويطبق أ 5 بكسل تأثير طمس على الصورة.

5. إسقاط الظل والتعتيم

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

وفي الوقت نفسه ، يتحكم مرشح العتامة في شفافية العنصر.

الجمع بين شبح الهبوط() و عتامة () يمكن أن تخلق الفلاتر تأثيرًا دقيقًا على عناصر النص الخاصة بك.

على سبيل المثال:

.text-effect {
تحول: يترجم(-50%, -50%);
لون: أسود;
شبح الهبوط: 10مقصف 9مقصف 9مقصفاللون البيج;
العتامة: 70%;
}

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

استخدام أوضاع المزج CSS

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

تتضمن بعض حالات الاستخدام الأكثر شيوعًا لأوضاع مزيج CSS ما يلي:

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

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

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

يمكنك أيضًا استخدام ملف وضع المزج لمزج محتوى عنصر معين مع محتوى الأصل المباشر له. ال وضع المزج عادةً ما يتم استخدامه لدمج المحتوى الأمامي مثل النص أو الأشكال أو الصور.

إليك مثال على استخدام ملفات وضع المزج لدمج النص والصورة.

لغة البرمجة:

<شعبةفصل="حاوية">
<IMG
 src = " https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? تلقائي = ضغط & cs = tinysrgb & w = 1260 & h = 750 & dpr = 2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto = compress & cs = tinysrgb & w = 1260 & h = 750 & dpr = 2 "
 class = "background-image"
 />
<شعبةفصل="محتوى">
<h1>مرحباًh1>
<ص>مرحبًا يا مستخدم!ص>
شعبة>
شعبة>

CSS:

.حاوية {
موضع: مطلق;
عرض: 100%;
ارتفاع: 100%;
}
.الصورة الخلفية {
عرض: 100%;
ارتفاع: 100%;
الكائن المناسب: غطاء;
}


.محتوى {
موضع: مطلق;
قمة: 50%;
غادر: 50%;
تحول: يترجم(-50%, -50%);
محاذاة النص: مركز;
وضع المزج: اختلاف;
}


h1 {
حجم الخط: 60مقصف;
لون: أبيض;
}
ص {
حجم الخط: 40مقصف;
لون: أبيض;
}

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

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

الجمع بين المرشحات وأوضاع الدمج

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

فيما يلي مثال يجمع بين وضع الفلتر والمزج لإنشاء تأثير أكثر تعقيدًا:

.my-element {
منقي: سطوع(150%) هوى تدوير(180درجة) شبح الهبوط(0مقصف 0مقصف 10مقصفrgba(0, 0, 0, 0.5));
وضع المزج: شاشة;
}

يجمع هذا الرمز بين المرشحات ؛ سطوع, هوى تدوير, شبح الهبوط، وأ وضع المزج ذات قيمة شاشة على الصورة. يزيد السطوع بنسبة 150٪ بينما hue- تدوير سيعكس ألوان الصورة بمقدار 180 درجة.

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

إتقان المرشحات وأنماط المزج

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

إذا جربت المزيد من هذه الأساليب ، يمكنك إضافة مستوى إضافي من الاهتمام البصري إلى تصميماتك.