ایجاد چیدمان‌های مجله‌ای در CSS با استفاده از shape-outside

مقدمه

ویژگی shape-outside که بخشی از ماژول CSS Shapes Level 1 محسوب می‌شود، راهی جذاب برای کنترل نحوه قرارگیری متن در اطراف عناصر شناور (Float) فراهم می‌کند.

به‌طور معمول زمانی که یک تصویر یا عنصر را Float می‌کنیم، متن در اطراف یک مستطیل فرضی قرار می‌گیرد. اما با shape-outside می‌توان مشخص کرد که متن دقیقاً از چه شکلی پیروی کند. این قابلیت زمانی بسیار مفید است که تصویر فضای خالی زیادی داشته باشد یا دارای گوشه‌های گرد و اشکال غیرمعمول باشد.

استفاده از shape-outside به شما اجازه می‌دهد چیدمان‌هایی مشابه مجلات و روزنامه‌های حرفه‌ای طراحی کنید. مرورگرهایی که از این ویژگی پشتیبانی نمی‌کنند، آن را نادیده می‌گیرند و نمایش صفحه همچنان بدون مشکل ادامه پیدا می‌کند.

مقدار shape-outside می‌تواند یکی از موارد زیر باشد:

• کلیدواژه‌های آماده (Keywords)
• توابع شکل (Shape Functions)
• آدرس یک تصویر (URL)

در ادامه هر کدام را بررسی می‌کنیم.

استفاده از کلیدواژه‌ها (Shape Keywords)

برای shape-outside می‌توان از مقادیر زیر استفاده کرد:

• margin-box
• padding-box
• border-box
• content-box

این مقادیر باعث می‌شوند متن از مرزهای مشخصی از عنصر تبعیت کند. برای مثال اگر تصویری دارای border-radius باشد، متن نیز می‌تواند مطابق همان انحنا در اطراف تصویر جریان پیدا کند.

img.shape1 {
  float: left;
  margin-right: 2rem;
  border-radius: 0% 90%;
  shape-outside: margin-box;
}

تفاوت این کلیدواژه‌ها در این است که مرورگر مرز شکل را از کدام بخش عنصر محاسبه می‌کند. مثلاً border-box باعث می‌شود متن دقیقاً از لبه بیرونی Border پیروی کند.

استفاده از توابع شکل (Shape Functions)

علاوه بر کلیدواژه‌ها، shape-outside از چهار تابع مختلف نیز پشتیبانی می‌کند:

• circle()
• ellipse()
• polygon()
• inset()

شکل دایره‌ای با circle()

اگر عنصر شما دایره‌ای باشد، می‌توانید از تابع circle() استفاده کنید:

img.shape2 {
  float: left;
  margin-right: 2rem;
  border-radius: 50%;
  shape-outside: circle();
}

همچنین می‌توان شعاع و موقعیت مرکز دایره را مشخص کرد:

shape-outside: circle(40% at 20% 60%);

در این مثال شعاع دایره ۴۰ درصد است و مرکز آن در مختصات ۲۰٪ و ۶۰٪ قرار گرفته است.

شکل بیضی با ellipse()

تابع ellipse() مشابه circle() عمل می‌کند اما برای آن باید شعاع افقی و عمودی را جداگانه تعیین کنید.

.shape3 {
  float: right;
  width: 230px;
  height: 140px;
  margin-left: 2rem;
  border-radius: 50%;
  shape-outside: ellipse(100px 55px at 38.7% 52.25%);
  object-fit: cover;
}

در این مثال از object-fit: cover نیز استفاده شده تا تصویر با وجود تغییر ابعاد، نسبت تصویر خود را حفظ کند.

ساخت اشکال سفارشی با polygon()

تابع polygon() قدرتمندترین گزینه برای ساخت اشکال دلخواه است. با تعیین نقاط مختلف می‌توانید تقریباً هر شکلی را ایجاد کنید.

img.shape4 {
  float: left;
  shape-outside: polygon(
    -5px 86px,
    243px 253px,
    300px 220px,
    296px 434px,
    -2px 434px
  );
  shape-margin: .7rem;
}

در این مثال از ویژگی shape-margin نیز استفاده شده تا کمی فاصله بین متن و شکل ایجاد شود.

طراحی دستی نقاط Polygon می‌تواند دشوار باشد، بنابراین برای ساخت اشکال پیچیده معمولاً از ابزارهای کمکی مانند CSS Shapes Editor استفاده می‌شود.

ایجاد فاصله داخلی با inset()

تابع inset() به شما امکان می‌دهد از چهار جهت بالا، راست، پایین و چپ فاصله تعیین کنید:

img.shape5 {
  float: right;
  shape-outside: inset(50px 0 50px 55px);
}

این روش برای ساخت نواحی متنی خاص و کنترل دقیق‌تر چیدمان کاربرد دارد.

استفاده از تصویر به عنوان شکل (URL)

یکی از جالب‌ترین قابلیت‌های shape-outside امکان استفاده از یک تصویر به‌عنوان شکل مرجع است.

img.shape6 {
  float: left;
  shape-outside: url("/shape.png");
}

در این حالت مرورگر بخش‌های شفاف و غیرشفاف تصویر را تحلیل می‌کند و متن را بر اساس قسمت‌های قابل مشاهده تصویر در اطراف آن قرار می‌دهد.

به همین دلیل معمولاً از تصاویر PNG با پس‌زمینه شفاف استفاده می‌شود.

پشتیبانی مرورگرها

بر اساس آمار سال ۲۰۲۰، بیش از ۹۴ درصد مرورگرهای جهان از ویژگی shape-outside پشتیبانی می‌کنند.

تنها مرورگری که به‌طور کامل فاقد پشتیبانی از این قابلیت است، Internet Explorer 11 می‌باشد.

جمع‌بندی

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

اگر به دنبال طراحی‌های خلاقانه و متفاوت در صفحات وب هستید، shape-outside یکی از ابزارهایی است که ارزش یادگیری و استفاده را دارد.

از همراهی شما با پارمین کلود سپاسگزاریم.