مسیرها، اشکال، برش، و پوشش

رندر HTML در بالای مدل جعبه ساخته شده است، اما زندگی (و طراحی وب) بیشتر از مستطیل ها وجود دارد. CSS از راه‌های متعددی برای تغییر قسمت‌هایی از یک عنصر پشتیبانی می‌کند و به توسعه‌دهندگان آزادی می‌دهد تا طرح‌هایی ایجاد کنند که از همه اشکال و اندازه‌ها پشتیبانی می‌کنند. برش دادن به اشکال هندسی اجازه می دهد، در حالی که پوشش روی دید در سطح پیکسل تأثیر می گذارد.

مسیرها و اشکال

CSS از توابع برای تعریف اشکال استفاده می کند. ما اطلاعات کلی در مورد توابع در ماژول توابع CSS را پوشش می دهیم. در این بخش، نحوه ایجاد اشکال در CSS را یاد خواهید گرفت. همه مثال‌های زیر از شکل‌هایی استفاده می‌کنند که با ویژگی clip-path ایجاد می‌کنید، که ناحیه قابل مشاهده را فقط به آنچه در داخل شکل است کاهش می‌دهد. این اجازه می دهد تا عناصر از نظر بصری با جعبه عنصر متفاوت باشند. در ادامه با جزئیات بیشتر بریده را پوشش می دهیم.

اشکال تعریف شده در CSS می توانند اشکال پایه (مانند دایره، مستطیل و چند ضلعی) یا مسیرها (که می توانند اشکال پیچیده و مرکب را تعریف کنند) باشند.

اشکال اساسی

circle() و ellipse()

توابع circle() و ellipse() اشکال گرد و بیضی را با شعاع نسبت به یک عنصر تعریف می کنند. تابع circle() یک اندازه یا درصد را به عنوان آرگومان می پذیرد. به طور پیش فرض، هر دو تابع شکل را نسبت به مرکز عنصر قرار می دهند. هر دو یک موقعیت اختیاری پس از کلمه کلیدی at را می پذیرند که می تواند به صورت طول، درصد یا کلمات کلیدی موقعیتی بیان شود.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: circle(50%);
}

مثال قبلی یک مسیر برش دایره ای را با استفاده از تابع circle() نشان می دهد. توجه داشته باشید که شعاع 50% دایره ای به عرض کامل عنصر ایجاد می کند. تابع ellipse() دو آرگومان را می پذیرد که شعاع افقی و عمودی شکل را نشان می دهد.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25%);
}

مثال قبلی یک مسیر برش بیضی را با استفاده از تابع ellipse() نشان می دهد. توجه داشته باشید که شعاع 50 درصد یک بیضی در عرض کامل عنصر ایجاد می کند. مثال زیر همان بیضی را با مرکز آن در بالای عنصر نمایش می دهد.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25% at center top);
}

rect() و inset()

توابع rect() و inset() راه های مختلفی را برای تعریف مستطیل با تنظیم موقعیت اضلاع آن نسبت به اضلاع یک عنصر ارائه می دهند. این به شما امکان می دهد مستطیل هایی ایجاد کنید که از نظر ظاهری با کادر پیش فرض عنصر متفاوت باشند. آنها به صورت اختیاری کلمه کلیدی round را برای ایجاد یک مستطیل با گوشه های گرد می پذیرند و از همان نحوی استفاده می کنند که ویژگی مختصر border-radius را به کار می برند.

تابع rect() موقعیت اضلاع بالا و پایین مستطیل را نسبت به لبه بالایی عنصر و سمت چپ و راست را نسبت به لبه چپ عنصر مشخص می کند. این تابع چهار واحد اندازه یا درصد را به عنوان آرگومان هایی می پذیرد که قسمت های بالا، راست، پایین و چپ را تعریف می کنند. وقتی می‌خواهید مستطیلی را انتخاب کنید که در هنگام تغییر اندازه عنصر یا همان نسبت‌های تغییر عنصر را حفظ کند، تابع rect() را انتخاب کنید.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: rect(15px 75px 45px 10px);
}

مثال قبلی یک مسیر برش مستطیلی را نشان می دهد که با استفاده از تابع rect() تعریف شده است. ابعاد نسبت به لبه های بالا و سمت چپ عنصر همانطور که در نمودار نشان داده شده است.

تابع inset() موقعیت اضلاع یک مستطیل را با فاصله به سمت داخل از هر یک از اضلاع یک عنصر مشخص می کند. این تابع یک تا چهار واحد اندازه یا درصد را به عنوان آرگومان می پذیرد و به شما امکان می دهد چندین ضلع را همزمان تعریف کنید. وقتی می خواهید مستطیلی با عنصر یا مستطیلی که فاصله ثابتی با لبه های عنصر داشته باشد، تابع inset() را انتخاب کنید.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px);
}

مثال قبلی یک مسیر برش مستطیلی را نشان می دهد که با استفاده از تابع inset() تعریف شده است. ابعاد نسبت به طرفین عنصر است.

توابع rect() و inset() به صورت اختیاری کلمه کلیدی round را برای ایجاد یک مستطیل با گوشه های گرد می پذیرند، با استفاده از نحوی که ویژگی مختصر border-radius است. مثال زیر نسخه های گرد شده مستطیل هایی را که قبلا نشان داده شده بود نشان می دهد.

.rounded-rect {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

.rounded-inset {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

polygon()

برای اشکال دیگر، مانند مثلث، پنج ضلعی، ستاره و غیره، تابع polygon() به شما امکان می دهد با اتصال چندین نقطه با خطوط مستقیم، اشکال ایجاد کنید. تابع polygon() لیستی از جفت ها را می پذیرد که از دو واحد طول یا درصد تشکیل شده است. هر جفت نقطه ای از چند ضلعی را توصیف می کند: مقدار اول فاصله از لبه سمت چپ عنصر است، دومین مقدار فاصله از لبه بالایی عنصر است. لازم نیست چند ضلعی را ببندید، زیرا با اتصال آخرین نقطه به نقطه اول تکمیل می شود.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: polygon(
    50% 0,
    0 100%,
    100% 100%
  );
}

مثال قبل با تعریف سه نقطه یک مسیر برش مثلثی ایجاد می کند.

به طور پیش فرض، تابع polygon() نواحی همپوشانی را به صورت پر شده ارائه می کند. شما می توانید این رفتار را با یک آرگومان اول اختیاری به نام قانون fill تغییر دهید. برای جابجایی بین نواحی پر و پر نشده، قانون پر را روی evenodd تنظیم کنید. برای استفاده از قانون پر کردن پیش‌فرض، آن را روی nonzero تنظیم کنید.

مثال قبلی تابع polygon() را با توابع مثلثاتی برای ایجاد چند ضلعی های منظم و اشکال ستاره نشان می دهد. این بزرگ‌ترین چند ضلعی منظم ممکن را ایجاد نمی‌کند که درون یک عنصر قرار گیرد یا در مرکز آن قرار گیرد – ما آن را به عنوان تمرینی برای شما می‌گذاریم تا امتحان کنید. شکل‌های ستاره در این مثال قوانین پر کردن nonzero و evenodd نیز نشان می‌دهند.

اشکال پیچیده

هنگامی که توابع شکل اصلی برای توصیف یک شکل پیچیده کافی نیستند، CSS توابعی را ارائه می دهد که از نحو پیچیده تری برای توصیف ویژگی هایی مانند منحنی ها و خطوط استفاده می کند. این توابع برای اشکال مرکب (شکل هایی که از چندین شکل تشکیل شده اند، مانند دایره ای که سوراخی در آن وجود دارد) نیز مفید است.

path()

تابع path() یک رشته از نحو مسیر SVG را برای توصیف یک شکل می پذیرد. این اجازه می دهد تا با استفاده از دستورالعمل هایی که خطوط و منحنی های تشکیل دهنده شکل را توصیف می کنند، اشکال پیچیده ایجاد شوند. ویرایش مستقیم نحو SVG می‌تواند پیچیده باشد، بنابراین توصیه می‌کنیم یک ویرایشگر بصری اختصاصی را در نظر بگیرید که می‌تواند هنگام ایجاد اشکال با تابع path() نحو را صادر کند.

تابع path() از واحدهای اندازه CSS استفاده نمی کند و همه مقادیر به صورت پیکسل تفسیر می شوند. این بدان معنی است که اشکال ایجاد شده با تابع path به اندازه عنصر یا ظرف پاسخگو نیستند. توصیه می کنیم از path() فقط برای اشکالی استفاده کنید که ابعاد ثابتی دارند.

shape()

تابع shape() از یک دستور دستوری برای توصیف یک شکل مشابه تابع path() استفاده می کند. با این حال، دستورات تابع shape() CSS بومی هستند و می توانند از واحدهای اندازه CSS استفاده کنند. این اجازه می دهد تا اشکال تعریف شده با استفاده از تابع shape() به صورت پاسخگو اندازه شوند.

مثال قبل از توابع path() و shape() برای تعریف شکل قلب و دایره ای با سوراخ در مرکز استفاده می کند. این مثال از مقدار یکسانی در پیکسل برای هر دو تابع استفاده می کند، اما تابع shape() می تواند از واحدهای اندازه CSS دیگر مانند درصد یا واحدهای نسبی ظرف نیز استفاده کند.

بریدن

Clipping مشخص می‌کند که کدام بخش از یک عنصر قابل مشاهده است، شبیه به بریدن یک تصویر از یک مجله. ویژگی clip-path مسیر مورد استفاده برای تعریف ناحیه کلیپ را تنظیم می کند.

همانطور که در مثال های بخش قبلی دیدید، هر یک از توابع شکل یا مسیر اصلی را می توان به عنوان clip-path استفاده کرد. ویژگی clip-path همچنین از مسیرهای تعریف شده در عنصر clipPath SVG پشتیبانی می‌کند که می‌تواند در یک فایل جداگانه یا جاسازی شده باشد.

نمودار قبلی نشان می دهد که چگونه افزودن یک clip-path به یک عنصر تصویر، ناحیه قابل مشاهده تصویر را تغییر می دهد. مسیر کلیپ بالایی از تابع circle() استفاده می کند، در حالی که مسیر پایینی از clipPath SVG استفاده می کند. توجه داشته باشید که دایره ایجاد شده با استفاده از circle() به طور پیش فرض در مرکز عنصر قرار می گیرد.

ویژگی clip-path فقط یک مسیر را می پذیرد. برای برش دادن یک عنصر با چندین شکل که همپوشانی ندارند، از توابع path() یا shape() برای تعریف یک مسیر ترکیبی استفاده کنید، یا از یک clipPath SVG استفاده کنید. گزینه دیگر برای سناریوهای پیچیده استفاده از ماسک به جای بریدن است که در بخش بعدی به آن خواهیم پرداخت.

بریدن با اشکال

برای برش دادن با استفاده از یک شکل یا تابع مسیر اصلی، ویژگی clip-path را مانند مثال‌های قبلی روی مقدار بازگردانده شده توسط تابع تنظیم کنید. هر تابع شکل برش را نسبت به عنصر متفاوت قرار می دهد، بنابراین به مرجع هر تابع مراجعه کنید.

در مثال قبل دو عنصر دارای یک clip-path دایره ای هستند که با استفاده از کلاس .clipped اعمال می شود. توجه داشته باشید که clip-path نسبت به هر عنصر قرار می گیرد و متن درون clip-path برای پیروی از شکل دوباره جریان نمی یابد.

جعبه مرجع یک مسیر برش

به‌طور پیش‌فرض، مسیر برش یک عنصر شامل حاشیه عنصر است. هنگام استفاده از یکی از توابع شکل اصلی، می‌توانید کادر مرجع مسیر کلیپ را طوری تنظیم کنید که فقط ناحیه عنصر را در حاشیه قرار دهد. مقادیر معتبر برای کادر مرجع عبارتند از stroke-box (پیش‌فرض) و fill-box (فقط شامل قسمت داخل حاشیه).

مثال قبلی عناصری را با یک حاشیه بزرگ ( 20px ) نشان می‌دهد که هر کدام از تابع inset() برای تنظیم clip-path استفاده می‌کنند. عنصری که نسبت به حاشیه عنصر قطع می‌شود، همچنان بخشی از حاشیه را نشان می‌دهد. عناصری که نسبت به ناحیه درون مرزی قطع می‌شوند، هیچ حاشیه‌ای را نشان نمی‌دهند و کوچک‌تر هستند، حتی با مقدار ورودی یکسان.

کلیپ با گرافیک

یک مسیر برش ممکن است در یک سند SVG تعریف شود، یا در سند HTML تعبیه شده باشد یا به صورت خارجی ارجاع داده شود. این می تواند برای تعریف مسیرهای برش پیچیده ایجاد شده در برنامه های گرافیکی یا مسیرهای برش که چندین اشکال را ترکیب می کنند مفید باشد.

<img id="kitten" src="kitten.png">

<svg>
  <defs>
    <clipPath id="kitten-clip-shape">
      <circle cx="130" cy="175" r="100" />
    </clipPath>
  </defs>
</svg>

<style>
  #kitten {
    clip-path: url(#kitten-clip-shape);
  }
</style>

در مثال قبل، clipPath با id kitten-clip-shape روی عنصر <img> اعمال می شود. در این مورد سند SVG در HTML جاسازی شده است. اگر سند SVG یک فایل خارجی به نام kitten-clipper.svg باشد، در عوض clipPath به عنوان url(kitten-clipper.svg#kitten-clip-shape) ارجاع خواهد شد.

نقاب زدن

پوشاندن روش دیگری برای تعیین اینکه کدام ناحیه از یک عنصر نشان داده یا پنهان می شود است. در جایی که برش از اشکال یا مسیرهای اساسی استفاده می‌کند، پوشش از پیکسل‌های یک تصویر یا یک گرادیان برای تعیین میزان دید استفاده می‌کند. بر خلاف برش، ماسک اجازه می دهد تا قسمت های یک عنصر تا حدی شفاف باشد. چندین تصویر ماسک ممکن است روی یک عنصر اعمال شود تا جلوه های مختلفی ایجاد شود.

برای اعمال یک ماسک، ویژگی mask-image را تنظیم کنید. این ویژگی یک یا چند تصویر، گرادیان یا ارجاع به عناصر <mask> در یک سند SVG را می پذیرد. چندین تصویر ماسک ممکن است با جدا کردن آنها با کاما اعمال شوند.

.my-element {
  mask-image: url(my-mask.png),
              linear-gradient(black 0%, transparent 100%);
}

در مثال قبل، .my-element با استفاده از یک تصویر PNG، و به دنبال آن یک گرادیان خطی پوشانده شده است. برای ایجاد ماسک نهایی، چندین ماسک به طور پیش فرض با هم اضافه می شوند.

مثال قبل تصویری را با یک یا چند ماسک نشان می دهد. هر ماسک را تغییر دهید تا ببینید چگونه ماسک ها با هم جمع می شوند تا اثر نهایی را ایجاد کنند.

پوشش آلفا در مقابل درخشندگی

می توانید با استفاده از alpha یا luminance تصویر، ماسک را اعمال کنید. هنگام پوشاندن بر اساس alpha ، شفافیت هر پیکسل در تصویر ماسک به عنصر اعمال می شود و اطلاعات رنگ آن پیکسل را نادیده می گیرد. هنگام پوشاندن بر اساس luminance ، هم شفافیت و هم مقدار هر پیکسل (چقدر روشن یا تاریک) به عنصر اعمال می شود. پوشاندن با درخشندگی، رنگ‌های روشن‌تر را به‌عنوان قابل مشاهده و رنگ‌های تیره‌تر را به‌عنوان نامرئی تلقی می‌کند.

برای تنظیم حالت masking، از ویژگی mask-mode استفاده کنید. به طور پیش‌فرض، ویژگی mask-mode روی match-source تنظیم شده است که یک حالت را بر اساس نوع تصویر ماسک تنظیم می‌کند. برای تصاویر و گرادیان ها، این به طور پیش فرض روی alpha خواهد بود. برای ماسک‌های SVG، اگر mask-type تعریف نشده باشد، این مقدار به‌طور پیش‌فرض به مقدار خاصیت mask-type عنصر <mask> یا luminance خواهد بود.

در مثال قبل از یک الگوی آزمایشی که مقادیر مختلف رنگ و آلفا را نشان می دهد به عنوان یک ماسک استفاده شده است. با تغییر mask-mode ، می توانید ببینید که چگونه حالت alpha بر اساس شفافیت است، در حالی که حالت luminance بر اساس روشنایی رنگ و شفافیت است.

خواص پوشش اضافی

CSS ویژگی های اضافی را برای تنظیم دقیق رفتار ماسک های شما فراهم می کند. هر یک از ویژگی ها لیستی از مقادیر جدا شده با کاما را می پذیرد که با لیست ماسک های تنظیم شده توسط ویژگی mask-image مطابقت داده می شود. اگر مقادیر کمتر از ماسک ها وجود داشته باشد، لیست تا زمانی که مقداری برای هر ماسک تنظیم شود تکرار می شود. اگر مقادیر بیشتری از ماسک‌ها وجود داشته باشد، مقادیر اضافی کنار گذاشته می‌شوند.

خلاصه ماسک

شما می توانید چندین ویژگی ماسک را به طور همزمان با مخفف ماسک تنظیم کنید. این می‌تواند با گروه‌بندی همه ویژگی‌های هر ماسک با هم، تنظیم چند ماسک را ساده کند. خلاصه ماسک معادل تنظیم این ویژگی ها به ترتیب است: mask-image ، mask-mode ، mask-position ، mask-size ، mask-repeat ، mask-origin ، mask-clip و mask-composite . لازم نیست همه دارایی ها گنجانده شوند و هر ویژگی که شامل نشده باشد به مقدار اولیه خود بازنشانی می شود. با پشتیبانی از حداکثر هشت ویژگی در هر ماسک، می‌تواند به داشتن یک مرجع کامل کمک کند.

.longhand {
  mask-image: linear-gradient(white, black),
              linear-gradient(90deg, black, transparent);
  mask-mode: luminance, alpha;
  mask-position: bottom left, top right;
  mask-size: 50% 50%, 30% 30%;
}

.shorthand {
  mask: linear-gradient(white, black) luminance bottom left / 50% 50%,
        linear-gradient(90deg, black, transparent) alpha top right / 30% 30%;
}

در مثال قبل، هر کلاس دارای دو ماسک است. اولی از ویژگی های فردی استفاده می کند در حالی که دومی از مختصر mask استفاده می کند. هر دو سبک معادل یکدیگر هستند.

جریان متن در اطراف عناصر شناور

وقتی یک عنصر را گیره یا ماسک می‌کنید، فقط ناحیه قابل مشاهده در کادر آن را تغییر می‌دهید، اما خود کادر بدون تغییر باقی می‌ماند. این بدان معنی است که یک عنصر شناور بر روی جریان سند بر اساس جعبه محدود کننده اصلی خود تأثیر می گذارد، نه بخش های قابل مشاهده عنصر. برای تعریف جریان در اطراف یک عنصر، از ویژگی shape-outside به همراه مسیر clip استفاده کنید.

ویژگی shape-outside شکلی را تعریف می کند که محتوا در اطراف یک عنصر جریان می یابد. این شکل ممکن است هر یک از توابع شکل اصلی باشد، اما نه اشکالی که با استفاده از توابع path() یا shape() یا یک clipPath تعریف شده در یک سند SVG تعریف شده باشد.

ویژگی shape-outside نیز یک تصویر یا گرادیان را می پذیرد. مانند پوشش، مرزهای شکل با شفافیت تصویر یا گرادیان تعیین می شود. ویژگی shape-image-threshold تعیین می کند که کدام سطح از شفافیت در داخل شکل در نظر گرفته شود.

اشکال در انیمیشن

متحرک سازی مسیر کلیپ

می توانید ویژگی clip-path را متحرک کنید و از شکلی به شکل دیگر ترکیب کنید. برای تولید انیمیشن های روان باید از همان تابع شکل برای هر فریم کلیدی استفاده کنید. هنگام استفاده از توابع polygon() یا shape() باید از تعداد نقاط یکسانی در هر فریم کلیدی استفاده شود.

در مثال قبل، clip-path یک عنصر بین شکل پنج ضلعی و ستاره ای که با استفاده از تابع polygon() تعریف شده است، تغییر می کند. این مثال از قانون پر کردن evenodd استفاده می کند تا نشان دهد که چگونه نقاط متحرک مناطق همپوشانی ایجاد می کنند.

متحرک سازی با مسیر افست

همچنین می توانید عناصر را در مسیرهای ایجاد شده با این توابع شکل متحرک کنید. ویژگی offset-path شکل را برای استفاده به عنوان مسیر تنظیم می کند و offset-distance موقعیت را در طول مسیر تعیین می کند. همچنین می توانید از تابع ray() با ویژگی offset-path برای متحرک سازی در امتداد یک خط مستقیم استفاده کنید.

مثال قبلی استفاده از یک چند ضلعی را برای هر دو clip-path و offset-path نشان می دهد. این انیمیشن از offset-distance برای حرکت ستاره های کوچکتر در امتداد همان چند ضلعی استفاده می کند که ستاره بزرگ به عنوان clip-path خود استفاده می کند.

درک خود را بررسی کنید