مرشحات CSS

كيفية العمل مع CSSfilterمنشأه

تسمح لنا المرشحات بإجراء عمليات على العناصر.

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

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

img {
  filter: <something>;
}

يمكنك استخدام قيم مختلفة هنا:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()
  • url()

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

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

img {
  filter: opacity(0.5);
}

يعني أن الصورة ستكون شفافة بنسبة 50٪ ، لأنopacity()تأخذ قيمة واحدة من 0 إلى 1 ، أو نسبة مئوية.

يمكنك أيضًا تطبيق عدة عوامل تصفية في وقت واحد:

img {
  filter: opacity(0.5) blur(2px);
}

دعنا نتحدث الآن عن كل مرشح بالتفصيل.

blur()

يطمس محتوى عنصر. تقوم بتمريرها قيمة ، معبرًا عنها بـpxأوemأوremالتي سيتم استخدامها لتحديد نصف قطر التمويه.

مثال:

img {
  filter: blur(4px);
}

opacity()

opacity()تأخذ قيمة واحدة من 0 إلى 1 ، أو نسبة مئوية ، وتحدد شفافية الصورة بناءً عليها.

0، أو0%تعني الشفافية التامة.1، أو100%، أو أعلى ، يعني مرئيًا تمامًا.

مثال:

img {
  filter: opacity(0.5);
}

يحتوي CSS أيضًا على امتدادopacityمنشأه.filterومع ذلك ، يمكن تسريع الأجهزة ، اعتمادًا على التنفيذ ، لذلك يجب أن تكون هذه هي الطريقة المفضلة.

drop-shadow()

drop-shadow()يظهر ظلًا خلف العنصر ، والذي يتبع قناة ألفا. هذا يعني أنه إذا كانت لديك صورة شفافة ، فسيتم تطبيق ظل على شكل الصورة ، وليس على مربع الصورة. إذا لم يكن للصورة قناة ألفا ، فسيتم تطبيق الظل على مربع الصورة بأكمله.

يقبل ما لا يقل عن معلمتين ، حتى 5:

  • تعويض xيضبط الإزاحة الأفقية. يمكن أن تكون سلبية.
  • تعويض ذيضبط الإزاحة الرأسية. يمكن أن تكون سلبية.
  • طمس نصف القطر، اختياري ، يحدد نصف قطر التمويه للظل. القيمة الافتراضية هي 0 ، بدون طمس
  • انتشار الشعاع، اختياري ، يحدد نصف قطر الانتشار. أعرب عنpxوremأوem
  • اللوناختياري يحدد لون الظل.

يمكنك ضبط اللون بدون ضبط نصف قطر الانتشار أو نصف قطر التمويه. تفهم CSS أن القيمة هي لون وليست قيمة طول.

مثال:

img {
  filter: drop-shadow(10px 10px 5px orange);
}
img {
  filter: drop-shadow(10px 10px orange);
}
img {
  filter: drop-shadow(10px 10px 5px 5px #333);
}

grayscale()

اجعل العنصر له لون رمادي.

تقوم بتمرير قيمة واحدة من 0 إلى 1 ، أو من 0٪ إلى 100٪ ، حيث 1 و 100٪ تعني اللون الرمادي بالكامل ، وتعني 0 أو 0٪ أن الصورة لم يتم لمسها ، وأن الألوان الأصلية ستبقى.

مثال:

img {
  filter: grayscale(50%);
}

sepia()

اجعل العنصر له لون بني داكن.

يمكنك تمرير قيمة واحدة من 0 إلى 1 ، أو من 0٪ إلى 100٪ ، حيث تعني 1 و 100٪ بني داكن تمامًا ، وتعني 0 أو 0٪ أن الصورة لم يتم لمسها ، وأن الألوان الأصلية ستبقى.

مثال:

img {
  filter: sepia(50%);
}

invert()

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

يمكنك تمرير رقم ، من 0 إلى 1 أو من 0٪ إلى 100٪ ، يحدد مقدار الانعكاس. 1 أو 100٪ تعني انعكاس كامل ، 0 أو 0٪ تعني عدم وجود انعكاس.

0.5 أو 50٪ سيظهر دائمًا لونًا رماديًا بنسبة 50٪ ، لأنك دائمًا ما ينتهي بك الأمر في منتصف العجلة.

مثال:

img {
  filter: invert(50%);
}

hue-rotate()

يتم تمثيل عجلة الألوان HSL بالدرجات. استخدامhue-rotate()يمكنك تدوير اللون باستخدام دوران موجب أو سلبي.

الوظيفة تقبل أdegالقيمة.

مثال:

img {
  filter: hue-rotate(90deg);
}

brightness()

يغير سطوع عنصر.

0 أو 0٪ يعطي عنصر أسود كلي. 1 أو 100٪ يعطي صورة غير متغيرة

القيم الأعلى من 1 أو 100٪ تجعل الصورة أكثر سطوعًا لتصل إلى إجمالي العنصر الأبيض.

مثال:

img {
  filter: brightness(50%);
}

contrast()

يغير تباين عنصر.

0 أو 0٪ يعطي إجمالي عنصر رمادي. 1 أو 100٪ يعطي صورة غير متغيرة

تعطي القيم الأعلى من 1 أو 100٪ تباينًا أكبر.

مثال:

img {
  filter: contrast(150%);
}

saturate()

يغير تشبع عنصر.

0 أو 0٪ يعطي إجمالي عنصر تدرج الرمادي (مع تشبع أقل). 1 أو 100٪ يعطي صورة غير متغيرة

القيم الأعلى من 1 أو 100٪ تعطي المزيد من التشبع

مثال:

img {
  filter: saturate();
}

url()

يسمح هذا المرشح بتطبيق مرشح محدد في ملف SVG. أنت تشير إلى موقع ملف SVG.

مثال:

img {
  filter: url(filter.svg);
}

مرشحات SVG خارج نطاق هذا الكتاب ، ولكن يمكنك قراءة المزيد في منشور مجلة Smashing هذا:https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

تحميل مجانيكتيب CSS


المزيد من دروس css: