آموزش border-radius برعکس در وب (Inverted Border Radius)

جذابیت در طراحی وب سایت تاثیر مثبتی بر روی تجربه کاربری دارد. یکی از این ترفند ها، استفاده از border-radius برعکس است.

به صورت کلی استفاده از عناصر جذاب در طراحی تجربه کاربر را بهتر می کند. از طرفی خروجی کلی وب سایت نباید سنگین باشد. به همین دلیل باید از حداقل تعداد تصاویر در طراحی خود استفاده کنیم. اینجاست که ترفند های CSS به کمک ما می آید. قبلا در مطلب «گوشه گرد در وب» درباره اهمیت گرد کردن گوشه ها در طراحی صحبت کردیم. اما یک ترفند جذاب برای استفاده در طراحی ها border-radius برعکس است. برای درک بهتر تصویر زیر را مشاهده کنید. در این آموزش تنها با استفاده از CSS این قسمت را طراحی و پیاده سازی می کنیم.

ایجاد border-radius برعکس

برای پیاده سازی inverted border radius از Pseudo-Elements ها در CSS استفاده می کنیم. Pseudo-Elements ها همان شبه عناصر ها در واقع عنصر هایی هستند که به نوعی به شکل مجازی در CSS ایجاد می کنیم. با استفاده از این before و after می توان ۲ عنصر به قبل و بعد المان مورد نظر خود اضافه کنیم. برای مثال:

.invertradius::before {
  content: "";
  width: 1em;
  height: 2em;
  border-radius: 1em 0 0 0;
  background-color: red;
  position: absolute;
  top: 0;
  right: -1em;
}
.invertradius::after {
  content: "";
  width: 1em;
  height: 2em;
  border-radius: 0 1em 0 0;
  background-color: red;
  position: absolute;
  top: 0;
  left: -1em;
}

در کد بالا ۲ مستطیل کنار عنصر اصلی ایجاد می کنیم. سپس گوشه متصل به عنصر اصلی را گرد می کنیم. حال نوبت به ترفند اصلی و جذاب پیاده سازی border-radius برعکس می رسد. در اینجا با استفاده از سایه ها به سادگی فضای خارجی را رنگ می کنیم:

.invertradius::before {
  box-shadow: 0 -1em 0 0 #fff;
}
.invertradius::after {
  box-shadow: 0 -1em 0 0 #fff;
}

با این کار فضای بالایی مستطیل ها را به رنگ عنصر اصلی خود در می آوریم. حال با شفاف کردن رنگ شبه عنصر ها، شکل مورد نظر خود را ایجاد می کنیم. خروجی کلی و خلاصه کد ها به شکل زیر خواهد بود.

.invertradius::before,
.invertradius::after {
  content: "";
  width: 1em;
  height: 2em;
  border-radius: 1em 0 0 0;
  background-color: transparent;
  position: absolute;
  top: 0;
  right: -1em;
  box-shadow: 0 -1em 0 0 #fff;
}
.invertradius::after {
  border-radius: 0 1em 0 0;
  right: auto;
  left: -1em;
}

به زبان ساده تر، برای پیاده سازی border-radius برعکس از همان Border Radius استفاده کردیم. فقط با ایجاد سایه برای عنصر کناری و استفاده از رنگ شفاف، این افکت زیبا را ایجاد کردیم. با استفاده از لینک زیر نیز میتوانید نمونه آماده را دانلود و استفاده کنید.