قناع صورة شخصية بكتلة

اقتطاع صورة فوتوغرافية على هيئة كتلة بدل دائرة. وهنا يستحق clip-path مكانه — تحتفظ الصورة بمحتواها وتنال ظلًّا خارجيًا جديدًا، بدل أن تجلس خلف شكل.

الوصفة

خطوة بخطوة

• اختر كتلة عضوية واخلط حتى يلائم الظلّ الخارجي الصورة.
• صدّر بصيغة clip-path في CSS — ستحصل على كتلة SVG مضمَّنة وقاعدة CSS.
• الصق كتلة SVG في أي مكان من المستند؛ فهي مخفية ولا يُشار إليها إلا بالمعرّف.
• طبّق الصنف على صورتك وامنحها المقاس الذي يحدّده الناتج.

<svg width="0" height="0" style="position:absolute">
  <defs>
    <clipPath id="shape-clip" clipPathUnits="userSpaceOnUse">
      <path d="M100 54.85C116.91 53.97,145.16 39.06,153.41 46.59C161.66 54.11,150.46 83.17,149.49 100C148.51 116.83,155.8 138.58,147.55 147.55C139.3 156.52,117.11 152.56,100 153.82C82.89 155.08,56.37 164.08,44.89 155.11C33.41 146.14,29.94 117.2,31.11 100C32.28 82.8,40.44 59.45,51.92 51.92C63.4 4…

بمزيد من التفصيل

امنح الصورة `object-fit: cover` أيضًا، وإلا شُوّهت صورة ذات نسبة أبعاد مختلفة قبل أن تُقتطع. وإن استخدمت أكثر من قناع كتلة في صفحة واحدة، فغيّر المعرّف في كتلة SVG وفي قاعدة CSS معًا — فالمعرّفات المكرّرة تجعل كل عنصر مقتطع يأخذ الشكل الذي صادفه المتصفح أولًا.

أسئلة

كل رقم وكل شكل في هذه الصفحة أُنتج بتشغيل المولّد وقت البناء، فهو يصف الأداة التي أنت على وشك استخدامها لا نسخة كانت موجودة يومًا.