وثائق CSS قابلة للتشغيل: التمويه blur

Q: كيف أموّه عنصرًا في CSS؟

استخدم filter: blur(5px);. الطول هو نصف قطر التمويه: 0 حاد، والقيم الأكبر أكثر تمويهًا. يموّه العنصر وكل ما بداخله، بما في ذلك نصه وصوره.

Q: كيف أموّه الخلفية التي خلف عنصر؟

استخدم backdrop-filter: blur(10px); على العنصر، مع خلفية شفافة جزئيًا مثل rgb(255 255 255 / 0.5). يبقى محتوى العنصر نفسه حادًا ويُموَّه ما خلفه، وهذا هو تأثير الزجاج المصنفر.

Q: ما الفرق بين drop-shadow() وbox-shadow؟

تتبع box-shadow دائمًا صندوق العنصر المستطيل. أما filter: drop-shadow() فتتبع الشكل المرئي، بما في ذلك المناطق الشفافة في صورة PNG أو SVG، فيكون ظل الأيقونة بحدود الأيقونة.

Q: كيف أجعل صورة بالأبيض والأسود في CSS؟

استخدم filter: grayscale(100%); (أو grayscale(1)). أضف انتقالًا وfilter: grayscale(0) عند التمرير لإعادة الألوان.

Q: هل يمكن استخدام عدة مرشحات معًا؟

نعم، اذكرها مفصولة بمسافات: filter: grayscale(1) brightness(1.2) blur(1px);. تُطبَّق بالترتيب، فقد يغيّر الترتيب النتيجة. وتصريح filter الثاني يستبدل الأول.

تمويه عنصر

تأخذ filter: blur() طولًا هو نصف قطر التمويه. كلما كبر زاد تمويه العنصر:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS blur</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; }
    img { display: block; width: 160px; height: 100px; }
    .b2 { filter: blur(2px); }
    .b6 { filter: blur(6px); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun"><figcaption>no filter</figcaption></figure>
    <figure><img class="b2" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, slightly blurred"><figcaption>blur(2px)</figcaption></figure>
    <figure><img class="b6" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, very blurred"><figcaption>blur(6px)</figcaption></figure>
  </div>
</body>
</html>

تعمل filter على أي عنصر، لا على الصور فقط: الـ div المموه يموّه نصه وحده وأبناءه أيضًا. لاحظ الحواف الناعمة في الصور المموهة: ينشر التمويه الصورة إلى الخارج ويمزج معها المنطقة الشفافة المحيطة. الحل في الأسفل، تحت «مشكلة الحواف المموهة».

تمويه الخلفية: backdrop-filter

لتمويه ما خلف العنصر (لوحة زجاج مصنفر فوق صورة أو صفحة)، استخدم backdrop-filter. يبقى محتوى العنصر نفسه حادًا. ويحتاج إلى خلفية شفافة كي يظهر التمويه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>backdrop-filter</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .scene {
      position: relative;
      height: 200px;
      background:
        radial-gradient(circle at 25% 40%, #f59e0b 0 40px, transparent 41px),
        radial-gradient(circle at 70% 60%, #16a34a 0 55px, transparent 56px),
        repeating-linear-gradient(90deg, #2563eb 0 16px, #93c5fd 16px 32px);
    }
    .glass {
      position: absolute;
      inset: 40px 60px;
      display: grid;
      place-items: center;
      background: rgb(255 255 255 / 0.35);
      -webkit-backdrop-filter: blur(12px); /* older Safari */
      backdrop-filter: blur(12px);
      border: 1px solid rgb(255 255 255 / 0.6);
      border-radius: 12px;
      color: #111827;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="scene"><div class="glass">Sharp text on frosted glass</div></div>
</body>
</html>

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

كل دوال المرشحات مباشرة

حرّك أي منزلق. السطر تحت الصورة هو قيمة filter بالضبط، جاهزة للنسخ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 18px; }
    .controls input { vertical-align: middle; }
    #img { display: block; width: 220px; height: 138px; margin: 12px 0 8px; }
    code { display: block; background: #f3f4f6; padding: 6px; }
  </style>
</head>
<body>
  <div class="controls" id="controls"></div>
  <img id="img" alt="Hills and a sun" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E">
  <code id="out"></code>
  <script>
    // name, min, max, step, default (the value that changes nothing), unit
    const fns = [
      ['blur', 0, 10, 0.5, 0, 'px'], ['brightness', 0, 2, 0.05, 1, ''],
      ['contrast', 0, 2, 0.05, 1, ''], ['grayscale', 0, 1, 0.05, 0, ''],
      ['sepia', 0, 1, 0.05, 0, ''], ['saturate', 0, 3, 0.1, 1, ''],
      ['hue-rotate', 0, 360, 5, 0, 'deg'], ['invert', 0, 1, 0.05, 0, '']
    ];
    const controls = document.getElementById('controls');
    fns.forEach(([name, min, max, step, def]) => {
      controls.insertAdjacentHTML('beforeend', '<label>' + name + ' <input type="range" data-name="' + name + '" min="' + min + '" max="' + max + '" step="' + step + '" value="' + def + '"></label>');
    });
    const update = () => {
      const parts = fns.filter(([name, , , , def]) => Number(controls.querySelector('[data-name="' + name + '"]').value) !== def)
        .map(([name, , , , , unit]) => name + '(' + controls.querySelector('[data-name="' + name + '"]').value + unit + ')');
      const value = parts.join(' ') || 'none';
      document.getElementById('img').style.filter = value;
      document.getElementById('out').textContent = 'filter: ' + value + ';';
    };
    controls.addEventListener('input', update);
    update();
  </script>
</body>
</html>

الدوال التي حرّكتها بعيدًا عن قيمتها المحايدة هي وحدها التي تُكتب، وهذا يبقي القيمة قصيرة. لا تغيّر brightness(1) أو blur(0px) شيئًا، فلا داعي لذكرهما.

دوال المرشحات

الدالة	القيمة المحايدة	ماذا تفعل	مثال
`blur(r)`	`0`	تمويه غاوسي بنصف قطر r	`blur(4px)`
`brightness(n)`	`1`	أغمق تحت 1، وأسطع فوقه	`brightness(0.7)`
`contrast(n)`	`1`	أبهت تحت 1، وأقوى فوقه	`contrast(1.3)`
`grayscale(n)`	`0`	القيمة 1 (أو 100%) رمادية تمامًا	`grayscale(100%)`
`sepia(n)`	`0`	درجة بنية دافئة	`sepia(0.6)`
`saturate(n)`	`1`	0 رمادي، وفوق 1 أكثر حيوية	`saturate(1.5)`
`hue-rotate(a)`	`0deg`	تزيح كل درجة لونية حول عجلة الألوان	`hue-rotate(90deg)`
`invert(n)`	`0`	القيمة 1 صورة سالبة كاملة	`invert(1)`
`opacity(n)`	`1`	مثل الخاصية `opacity`	`opacity(0.5)`
`drop-shadow(x y blur color)`		ظل يتبع الشكل	`drop-shadow(2px 4px 6px rgb(0 0 0 / 0.3))`

يمكن أن تكون الأرقام نسبًا مئوية أيضًا (grayscale(100%) تساوي grayscale(1)). توضع عدة دوال في قيمة واحدة، مفصولة بمسافات، وتُطبَّق بالترتيب: تعطي filter: grayscale(1) sepia(1) لونًا بنيًا، بينما تنتهي sepia(1) grayscale(1) إلى رمادي عادي.

drop-shadow تتبع الشكل

box-shadow دائمًا مستطيل (بزوايا مستديرة على الأكثر). أما drop-shadow() فتُرسم من البكسلات المرئية، فتحصل الأيقونة الشفافة على ظل بحدود الأيقونة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>drop-shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 10px 20px; }
    img { width: 90px; height: 90px; display: block; }
    .box-shadow { box-shadow: 6px 6px 8px rgb(0 0 0 / 0.4); }
    .drop-shadow { filter: drop-shadow(6px 6px 4px rgb(0 0 0 / 0.4)); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img class="box-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>box-shadow</figcaption></figure>
    <figure><img class="drop-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>drop-shadow()</figcaption></figure>
  </div>
</body>
</html>

النجمة الأولى تلقي ظلًا مربعًا من صندوقها المحيط غير المرئي. والثانية تلقي ظلًا بشكل نجمة. وعلى عكس box-shadow، لا يوجد في drop-shadow() انتشار ولا inset؛ وتشرحهما صفحة box-shadow.

مشكلة الحواف المموهة

تتلاشى الصورة المموهة عند حوافها، لأن التمويه يسحب إليها البكسلات الشفافة المحيطة. للاحتفاظ بحافة حادة (لخلفية رئيسية مموهة مثلًا)، ضع الصورة في حاوية عليها overflow: hidden وكبّر الصورة قليلًا كي تُقص الحافة الناعمة:

.hero { overflow: hidden; }
.hero img { filter: blur(8px); transform: scale(1.1); }

تأثيرات التمرير مع filter

يمكن تحريك filter بانتقال، فجدار شعارات يتحول من الرمادي إلى الألوان، أو بطاقة معتمة حتى يمر فوقها المؤشر، لا يحتاج إلا إلى قاعدتين:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter on hover</title>
  <style>
    .logo {
      width: 120px;
      height: 70px;
      display: inline-block;
      background: linear-gradient(135deg, #2563eb, #16a34a);
      border-radius: 8px;
      filter: grayscale(1) opacity(0.6);
      transition: filter 0.3s ease;
    }
    .logo:hover, .logo:focus-visible { filter: none; }
  </style>
</head>
<body>
  <a class="logo" href="#" aria-label="Partner one"></a>
  <a class="logo" href="#" aria-label="Partner two"></a>
</body>
</html>

مرّر المؤشر فوق مربع (أو انتقل إليه بـ Tab) فتظهر ألوانه تدريجيًا.

من المفيد معرفته

الأداء. أنصاف أقطار التمويه الكبيرة على مساحات كبيرة هي الأعلى كلفة، خاصةً backdrop-filter على عناصر تتحرك أو تتمرر. اختبر على هاتف.
سهولة القراءة. لا تموّه أبدًا نصًا يحتاج الناس إلى قراءته، وافحص التباين للنص فوق لوحة مصنفرة.
التراكب. أي filter غير none تنشئ سياق تراكب جديدًا وتصبح الكتلة الحاوية لأحفاد position: fixed، مثل transform.

أخطاء شائعة

filter: blur(5). يحتاج نصف القطر إلى وحدة: blur(5px).
استخدام filter: blur() للوحة مصنفرة. يموّه نص اللوحة نفسه. استخدم backdrop-filter مع خلفية شفافة.
backdrop-filter لا تُظهر شيئًا. يجب أن تكون خلفية العنصر شفافة جزئيًا على الأقل، وأن يوجد شيء خلفه.
تصريحا filter. الثاني يستبدل الأول. ضع كل الدوال في قيمة واحدة.
ظلال بشكل صندوق على أيقونات شفافة. استخدم filter: drop-shadow() بدل box-shadow.

الأسئلة الشائعة

كيف أموّه عنصرًا في CSS؟

استخدم filter: blur(5px);. الطول هو نصف قطر التمويه: 0 حاد، والقيم الأكبر أكثر تمويهًا. يموّه العنصر وكل ما بداخله، بما في ذلك نصه وصوره.

كيف أموّه الخلفية التي خلف عنصر؟

استخدم backdrop-filter: blur(10px); على العنصر، مع خلفية شفافة جزئيًا مثل rgb(255 255 255 / 0.5). يبقى محتوى العنصر نفسه حادًا ويُموَّه ما خلفه، وهذا هو تأثير الزجاج المصنفر.

ما الفرق بين drop-shadow() وbox-shadow؟

تتبع box-shadow دائمًا صندوق العنصر المستطيل. أما filter: drop-shadow() فتتبع الشكل المرئي، بما في ذلك المناطق الشفافة في صورة PNG أو SVG، فيكون ظل الأيقونة بحدود الأيقونة.

كيف أجعل صورة بالأبيض والأسود في CSS؟

استخدم filter: grayscale(100%); (أو grayscale(1)). أضف انتقالًا وfilter: grayscale(0) عند التمرير لإعادة الألوان.

هل يمكن استخدام عدة مرشحات معًا؟

نعم، اذكرها مفصولة بمسافات: filter: grayscale(1) brightness(1.2) blur(1px);. تُطبَّق بالترتيب، فقد يغيّر الترتيب النتيجة. وتصريح filter الثاني يستبدل الأول.

مفاهيم ذات صلة