شروع به کار با CSS Shapes

پیچیدن محتوا در اطراف مسیرهای سفارشی

Razvan Caliman

مدت‌ها است که طراحان وب مجبور بوده‌اند در چارچوب محدودیت‌های مستطیل طراحی کنند. بیشتر محتوای وب هنوز در جعبه‌های ساده گیر افتاده است زیرا بیشتر تلاش‌های خلاقانه برای چیدمان غیرمستطیلی به ناامیدی ختم می‌شود. این موضوع با معرفی CSS Shapes که از Chrome 37 دردسترس است، درحال تغییر است. «شکل‌های CSS» به طراحان وب اجازه می‌دهد محتوا را در اطراف مسیرهای سفارشی، مانند دایره، بیضی، و چندضلعی، بپیچند و درنتیجه از محدودیت‌های مستطیل رها شوند.

شکل‌ها را می‌توان به‌صورت دستی تعریف کرد یا می‌توان آن‌ها را از تصاویر استنباط کرد.

بیایید به یک مثال بسیار ساده نگاه کنیم.

شاید شما هم مثل من ساده‌لوح بوده‌اید که برای اولین‌بار تصویری با بخش‌های شفاف را شناور کردید و انتظار داشتید محتوا دور آن بپیچد و فضاهای خالی را پر کند، اما با دیدن شکل مستطیلی پیچش که همچنان دور عنصر باقی مانده بود، ناامید شدید. برای حل این مشکل می‌توان از CSS Shapes استفاده کرد.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

اعلامیه shape-outside: url(image.png) CSS به مرورگر می‌گوید که شکلی را از تصویر استخراج کند.

ویژگی shape-image-threshold حداقل سطح ماتی پیکسل‌هایی را که برای ایجاد شکل استفاده می‌شود تعریف می‌کند. مقدار آن باید در محدوده بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً مات) باشد. بنابراین، shape-image-threshold: 0.5 یعنی فقط پیکسل‌هایی با کدری ۵۰٪ و بالاتر برای ایجاد شکل استفاده خواهند شد.

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

عناصر دارای ناحیه شناور در سمت مخالف مقدار float خود هستند. برای مثال، اگر عنصری با تصویر فنجان قهوه در سمت چپ شناور باشد، ناحیه شناور در سمت راست فنجان ایجاد خواهد شد. اگرچه می‌توانید تصویری با فاصله در هر دو طرف طراحی کنید، اما محتوا فقط در اطراف شکلی که در سمت مقابل با ویژگی شناور (چپ یا راست) تعیین شده است می‌پیچد، نه هر دو طرف.

در آینده، با معرفی CSS Exclusions، امکان استفاده از shape-outside در عناصری که شناور نیستند وجود خواهد داشت.

ایجاد کردن دستی شکل‌ها

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

تابع()circle

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

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

در مثال بالا، محتوا در اطراف یک مسیر دایره‌ای قرار می‌گیرد. آرگومان تکی 50% شعاع دایره را مشخص می‌کند که در این مورد خاص، برابر با نصف عرض یا ارتفاع عنصر است. تغییر ابعاد عنصر بر شعاع شکل دایره تأثیر می‌گذارد. این نمونه‌ای ساده از نحوه واکنش‌گرا بودن CSS Shapes است.

قبل‌از ادامه، یک نکته کوتاه: مهم است به‌خاطر داشته باشید که CSS Shapes فقط بر شکل ناحیه شناور اطراف یک عنصر تأثیر می‌گذارد. اگر عنصر پس‌زمینه داشته باشد، آن پس‌زمینه با شکل برش داده نمی‌شود. برای دستیابی به این جلوه، باید از ویژگی‌های CSS Masking - یا clip-path یا mask-image استفاده کنید. ویژگی clip-path بسیار مفید است زیرا از همان نمادگذاری CSS Shapes پیروی می‌کند، بنابراین می‌توانید از مقادیر مجدداً استفاده کنید.

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

برگشتن به شکل دایره.

هنگام استفاده از درصد برای شعاع دایره، مقدار درواقع با فرمول کمی پیچیده‌تر محاسبه می‌شود: sqrt(width^2 + height^2) / sqrt(2). درک این موضوع مفید است زیرا به شما کمک می‌کند تصور کنید اگر ابعاد عنصر برابر نباشد، شکل دایره حاصل چگونه خواهد بود.

همه انواع واحد CSS را می‌توان در مختصات تابع شکل استفاده کرد - px،‏ em،‏ rem،‏ vw،‏ vh، و غیره. می‌توانید موردی را انتخاب کنید که به‌اندازه کافی برای نیازهایتان انعطاف‌پذیر یا محکم باشد.

می‌توانید موقعیت دایره را با تنظیم مقادیر صریح برای مختصات مرکز آن تنظیم کنید.

.element{
  shape-outside: circle(50% at 0 0);
}

این کار مرکز دایره را در مبدأ دستگاه مختصات قرار می‌دهد. دستگاه مختصات چیست؟ اینجا جایی است که جعبه‌های مرجع را معرفی می‌کنیم.

جعبه‌های مرجع برای شکل‌های CSS

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

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

دو تعریف CSS زیر نتایج یکسانی دارند:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

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

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

مبدأ سیستم مختصات اکنون خارج از ناحیه محتوای عنصر (۱۰۰ پیکسل بالا و ۱۰۰ پیکسل چپ) قرار دارد، همان‌طور که مرکز دایره نیز همین‌طور است. مقدار محاسبه‌شده شعاع دایره نیز افزایش می‌یابد تا سطح افزایش‌یافته سیستم مختصات ایجادشده توسط جعبه مرجع margin-box را دربرگیرد.

There are a few reference box options to choose from: `margin-box`, `border-box`, `padding-box` and `content-box`. Their names imply their boundaries. قبلاً درباره `margin-box` توضیح دادیم. `border-box` با لبه‌های خارجی حاشیه‌های عنصر محدود می‌شود، `padding-box` با فاصله‌گذاری عنصر محدود می‌شود، درحالی‌که `content-box` با مساحت واقعی سطح مورداستفاده محتوا در عنصر یکسان است.

در هر زمان فقط از یک کادر مرجع می‌توان با اظهارنامه shape-outside استفاده کرد. هر جعبه مرجع به روشی متفاوت و گاهی ظریف بر شکل تأثیر می‌گذارد. مقاله دیگری وجود دارد که عمیق‌تر به موضوع می‌پردازد و به شما کمک می‌کند جعبه‌های مرجع را برای «شکل‌های CSS» درک کنید.

تابع()ellipse

بیضی‌ها شبیه دایره‌های فشرده‌شده هستند. این ویژگی‌ها به‌صورت ellipse(rx ry at cx cy) تعریف می‌شوند که در آن rx و ry شعاع‌های بیضی در محور X و محور Y هستند، درحالی‌که cx و cy مختصات مرکز بیضی هستند.

.element{
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

مقادیر درصد از ابعاد سیستم مختصات محاسبه خواهد شد. اینجا به ریاضیات عجیب‌وغریب نیازی نیست. می‌توانید مختصات مرکز بیضی را حذف کنید و این مختصات از مرکز سیستم مختصات استنباط خواهد شد.

شعاع‌های محورهای X و Y را می‌توان با کلیدواژه‌ها نیز تعریف کرد: farthest-side شعاعی برابر با فاصله بین مرکز بیضی و دورترین طرف جعبه مرجع از آن را تولید می‌کند، درحالی‌که closest-side دقیقاً برعکس آن است - از کوتاه‌ترین فاصله بین مرکز و یک طرف استفاده می‌کند.

.element{
  shape-outside: ellipse(closest-side farthest-side at 50% 50%);
  /* identical to: */
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

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

از همان کلیدواژه‌های farthest-side و closest-side می‌توان برای شعاع در تابع شکل circle() نیز استفاده کرد.

تابع()polygon

اگر دایره و بیضی خیلی محدودکننده هستند، تابع شکل چندضلعی دنیایی از گزینه‌ها را باز می‌کند. قالب polygon(x1 y1, x2 y2, ...) است که در آن جفت‌های مختصات x y را برای هر رأس (نقطه) چندضلعی مشخص می‌کنید. حداقل تعداد جفت‌ها برای مشخص کردن چندضلعی سه جفت است که یک مثلث را تشکیل می‌دهد.

.element{
  shape-outside: polygon(0 0, 0 300px, 300px 600px);
  width: 300px;
  height: 600px;
}

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

.element{
  /* polygon responsive to font-size*/
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  width: 20em;
  height: 40em;
}

یک پارامتر اختیاری fill-rule، واردشده از SVG، وجود دارد که به مرورگر دستور می‌دهد چگونه «درون‌بودن» یک چندضلعی را درصورت وجود مسیرهای خودمتداخل یا شکل‌های محصور درنظر بگیرد. جونی تریتال به‌خوبی توضیح می‌دهد که ویژگی fill-rule چگونه کار می‌کند در SVG. اگر تعریف نشده باشد، fill-rule به‌طور پیش‌فرض به nonzero تبدیل می‌شود.

.element{
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  /* identical to: */
  shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}

تابع inset()‎

تابع شکل inset() به شما امکان می‌دهد شکل‌های مستطیلی ایجاد کنید که محتوا را دربربگیرد. با درنظر گرفتن این فرض اولیه که «شکل‌های CSS» محتوای وب را از جعبه‌های ساده رها می‌کند، این ممکن است غیرمنطقی به‌نظر برسد. ممکن است همین‌طور باشد. هنوز مورداستفاده‌ای برای inset() پیدا نکرده‌ام که ازقبل با شناورها و حاشیه‌ها یا با polygon() قابل‌دستیابی نباشد. هرچند inset() عبارت خواناتری نسبت‌به polygon() برای شکل‌های مستطیلی ارائه می‌دهد.

نماد کامل برای تابع شکل درج‌شده inset(top right bottom left border-radius) است. چهار آرگومان موقعیت اول، انحراف‌های داخلی از لبه‌های عنصر هستند. آرگومان آخر شعاع حاشیه برای شکل مستطیلی است. این مورد اختیاری است، بنابراین می‌توانید آن را خالی بگذارید. این ویژگی از نماد اختصاری border-radius که قبلاً در CSS استفاده می‌کردید پیروی می‌کند.

.element{
  shape-outside: inset(100px 100px 100px 100px);
  /* yields a rectangular shape which is 100px inset on all sides */
  float: left;
}

درحال ایجاد شکل از چارگوش‌های مرجع

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

اگر از آن برای گرد کردن گوشه‌های عنصر شناور استفاده کنید، جلوه برش را دریافت می‌کنید، اما ناحیه شناور مستطیلی باقی می‌ماند. shape-outside: border-box را اضافه کنید تا دور خط تراز ایجادشده توسط border-radius پیچیده شود.

.element{
  border-radius: 50%;
  shape-outside: border-box;
  float: left;
}

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

بااستفاده از ویژگی‌های float و margin می‌توان به جلوه نقل‌قول جابه‌جاشده دست یافت. اما این کار مستلزم آن است که عنصر نقل‌قول را در درخت اچ‌تی‌ام‌ال در نقطه‌ای که می‌خواهید ارائه شود قرار دهید.

در اینجا نحوه دستیابی به همان جلوه نقل‌قول بیرون‌کشیده با انعطاف‌پذیری بیشتر آورده شده است:

.pull-quote{
  shape-outside: content-box;
  margin-top: 200px;
  float: left;
}

ما به‌طور صریح جعبه مرجع content-box را برای سیستم مختصات شکل تنظیم می‌کنیم. در این حالت، مقدار محتوا در نقل‌قول برجسته، شکلی را که محتوای بیرونی در اطراف آن قرار می‌گیرد تعریف می‌کند. در اینجا از ویژگی margin-top برای تعیین موقعیت (انحراف) نقل‌قول استفاده می‌شود، صرف‌نظر از موقعیت آن در درخت HTML.

حاشیه شکل

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

.element{
  shape-outside: circle(40%);
  shape-margin: 1em;
  float: left;
}

این اثر مشابه چیزی است که از استفاده از ویژگی معمولی margin به آن عادت کرده‌اید، اما shape-margin فقط بر فضای اطراف مقدار shape-outside تأثیر می‌گذارد. فقط درصورتی‌که در سیستم مختصات فضایی برای آن وجود داشته باشد، فاصله‌گذاری در اطراف شکل اضافه خواهد شد. به‌همین دلیل است که در مثال بالا، شعاع دایره روی ۴۰٪ تنظیم شده است، نه ۵۰٪. اگر شعاع روی ۵۰٪ تنظیم شده بود، دایره کل فضای سیستم مختصات را اشغال می‌کرد و جایی برای تأثیر shape-margin باقی نمی‌ماند. به‌یاد داشته باشید که شکل درنهایت به margin-box عنصر (عنصر به‌علاوه margin اطراف آن) محدود می‌شود. اگر شکل بزرگ‌تر باشد و سرریز شود، به margin-box بریده می‌شود و درنهایت شکل مستطیلی خواهید داشت.

مهم است بدانید که shape-margin فقط یک مقدار مثبت را می‌پذیرد. این نمادگذاری شکل طولانی ندارد. به‌هرحال، shape-margin-top برای دایره چیست؟

پویانمایی شکل‌ها

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

می‌توانید شعاع‌ها و مراکز را برای شکل‌های circle() و ellipse() پویانمایی کنید، به‌شرطی که در مقادیری تعریف شده باشند که مرورگر بتواند آن‌ها را درون‌یابی کند. رفتن از circle(30%) به circle(50%) امکان‌پذیر است. اما پویانمایی بین circle(closest-side) تا circle(farthest-side) مرورگر را مسدود می‌کند.

.element{
  shape-outside: circle(30%);
  transition: shape-outside 1s;
  float: left;
}

.element:hover{
  shape-outside: circle(50%);
}

هنگام پویانمایی شکل‌های polygon() می‌توان به جلوه‌های جالب‌تری دست یافت، با این نکته مهم که چندضلعی باید تعداد رئوس یکسانی بین دو حالت پویانمایی داشته باشد. اگر رأس‌ها را اضافه یا حذف کنید، مرورگر نمی‌تواند درون‌یابی کند.

یک ترفند این است که حداکثر تعداد رأس‌های موردنیاز را اضافه کنید و آن‌ها را در حالت پویانمایی که می‌خواهید لبه‌های کمتری برای شکل درک شود، به‌صورت خوشه‌ای در کنار هم قرار دهید.

.element{
  /* four vertices (looks like rectangle) */
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: shape-outside 1s;
}

.element:hover{
  /* four vertices, but second and third overlap (looks like triangle) */
  shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

پیچیدن محتوا داخل شکل

پیش‌نویس اولیه مشخصات CSS Shapes شامل ویژگی shape-inside بود که به شما امکان می‌داد محتوا را در داخل یک شکل بپیچید. حتی برای مدتی پیاده‌سازی‌هایی در Chrome و Webkit وجود داشت. اما پیچیدن محتوای با موقعیت دلخواه در داخل یک مسیر سفارشی نیاز به تلاش و تحقیق بسیار بیشتری دارد تا همه سناریوهای ممکن را پوشش دهد و از اشکالات جلوگیری کند. به‌همین دلیل، ویژگی shape-inside به CSS Shapes Level 2 موکول شده است و پیاده‌سازی‌های آن لغو شده است.

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

<div>
  <div class='left-shape'></div>
  <div class='right-shape'></div>

  Lorem ipsum...
</div>

موقعیت عناصر تکیه‌گاه .left-shape و .right-shape در بالای ظرف مهم است زیرا آن‌ها به چپ و راست شناور خواهند شد تا محتوا را احاطه کنند.

.left-shape{
  shape-outside: polygon(0 0, ...);
  float: left;
  width: 50%;
  height: 100%;
}

.right-shape{
  shape-outside: polygon(50% 0, ...);
  float: right;
  width: 50%;
  height: 100%;
}

این سبک‌بندی باعث می‌شود دو پایه شناور کل فضای داخل عنصر را اشغال کنند، اما ویژگی‌های shape-outside فضایی را برای بقیه محتوا ایجاد می‌کنند.

اگر CSS Shapes توسط مرورگر پشتیبانی نشود، این امر با پایین بردن کل محتوا جلوه‌های زشتی ایجاد می‌کند. به‌همین دلیل است که استفاده از این ویژگی به‌صورت ارتقای پیش‌رو اهمیت دارد.

در مثال‌های قبلی پویانمایی شکل، متوجه خواهید شد که جابه‌جایی نوشتار می‌تواند آزاردهنده باشد. همه موارد استفاده به شکل پویانمایی‌شده نیاز ندارند. اما می‌توانید ویژگی‌های دیگری را که با «شکل‌های CSS» تعامل دارند پویانمایی کنید تا در جاهایی که منطقی است جلوه اضافه کنید.

در نمایش آلیس در سرزمین عجایب از «شکل‌های CSS»، از موقعیت پیمایش برای تغییر حاشیه بالای محتوا استفاده کردیم. نوشتار بین دو عنصر شناور فشرده شده است. As it moves down, it has to relayout according to the shape-outside of the two floated elements. این کار این حس را ایجاد می‌کند که نوشتار درحال رفتن به سوراخ خرگوش است و به تجربه داستان‌سرایی می‌افزاید. تقریباً بی‌دلیل؟ شاید. اما جالب به‌نظر می‌رسد.

چون چیدمان نوشتار به‌طور بومی توسط مرورگر انجام می‌شود، عملکرد آن بهتر از استفاده از راهکار جاوا اسکریپت است. اما تغییر margin-top در پیمایش باعث ایجاد تعداد زیادی رویداد بازچینی و رنگ‌آمیزی می‌شود و این ممکن است عملکرد را به‌طور قابل‌توجهی کاهش دهد. با احتیاط استفاده کنید! ولی استفاده از CSS Shapes بدون پویانمایی کردن آن‌ها تأثیر قابل‌توجهی بر عملکرد ندارد.

ارتقای پیش‌رو

ابتدا فرض کنید که مرورگر از CSS Shapes پشتیبانی نمی‌کند و وقتی این ویژگی را شناسایی کردید، آن را بسازید. Modernizr راه‌حل خوبی برای تشخیص ویژگی است و آزمایشی برای «شکل‌های CSS» در بخش «تشخیص‌های غیرهسته‌ای» وجود دارد.

برخی‌از مرورگرها تشخیص ویژگی را در CSS ازطریق قانون @supports بدون نیاز به کتابخانه‌های خارجی ارائه می‌دهند. ‫Google Chrome که از CSS Shapes نیز پشتیبانی می‌کند، قانون @supports را درک می‌کند. این نحوه استفاده از آن برای ارتقای پیش‌رو است:

.element{
  /* styles for all browsers */
}

@supports (shape-outside: circle(50%)){
  /* styles only for browsers which support CSS Shapes */
  .element{
    shape-outside: circle(50%);
  }
}

Lea Verou درباره نحوه استفاده از قانون CSS @supports بیشتر نوشته است.

ابهام‌زدایی از کنارگذاری‌های CSS

آنچه امروز به‌عنوان CSS Shapes می‌شناسیم، در روزهای اولیه مشخصات، CSS Exclusions and Shapes نامیده می‌شد. تغییر نام ممکن است به‌عنوان یک تفاوت جزئی به‌نظر برسد، اما درواقع بسیار مهم است. CSS Exclusions که اکنون مشخصه‌ای جداگانه است، امکان پیچیدن محتوا در اطراف عناصری را که به‌طور دلخواه قرار گرفته‌اند، بدون نیاز به ویژگی شناور فراهم می‌کند. تصور کنید محتوا را دور عنصری با موقعیت مطلق بپیچید؛ این یک مورد استفاده برای CSS Exclusions است. CSS Shapes فقط مسیری را تعریف می‌کند که محتوا در اطراف آن قرار می‌گیرد.

بنابراین، شکل‌ها و موارد استثنا یکسان نیستند، اما مکمل یکدیگرند. CSS Shapes امروزه در مرورگرها دردسترس است، درحالی‌که CSS Exclusions هنوز با تعامل اشکال پیاده‌سازی نشده است.

ابزارهای کار با CSS Shapes

می‌توانید در ابزارهای کلاسیک ایجاد تصویر مسیر ایجاد کنید، اما هیچ‌کدام از آن‌ها، در زمان نوشتن این مطلب، نحو لازم را برای مقادیر «شکل‌های CSS» صادر نمی‌کنند. حتی اگر این کار را می‌کردند، کار کردن به این شکل چندان کاربردی نبود.

«شکل‌های CSS» برای استفاده در مرورگر طراحی شده‌اند، جایی که به عناصر دیگر در صفحه واکنش نشان می‌دهند. تجسم کردن تأثیرات ویرایش شکل بر محتوای اطراف آن بسیار مفید است. چند ابزار برای کمک به شما در این گردش کار وجود دارد:

Brackets: افزونه CSS Shapes Editor برای Brackets از حالت پیش‌نمایش زنده ویرایشگر کد برای هم‌پوشانی ویرایشگر تعاملی برای ویرایش مقادیر شکل استفاده می‌کند.

Google Chrome: افزونه CSS Shapes Editor برای Google Chrome «ابزارهای توسعه‌دهنده» مرورگر را با کنترل‌هایی برای ایجاد و ویرایش شکل‌ها گسترش می‌دهد. این گزینه ویرایشگر تعاملی را در بالای عنصر انتخاب‌شده قرار می‌دهد.

بازرس در Google Chrome از پشتیبانی داخلی برای برجسته کردن شکل‌ها برخوردار است. نشانگر را روی عنصری با ویژگی shape-outside نگه دارید تا روشن شود و شکل را نشان دهد.

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

Polyfill: Google Chrome اولین مرورگر اصلی است که CSS Shapes را ارائه می‌دهد. به‌زودی از این ویژگی در iOS 8 و Safari 8 متعلق به Apple پشتیبانی خواهد شد. فروشندگان مرورگرهای دیگر ممکن است در آینده آن را درنظر بگیرند. تا آن زمان، شبیه‌ساز مرورگر CSS Shapes برای ارائه پشتیبانی اولیه وجود دارد.

نتیجه‌گیری

در وبی که محتوا عمدتاً در جعبه‌های ساده گیر افتاده است، CSS Shapes راهی برای ایجاد چیدمان رسا ارائه می‌دهد و شکاف وفاداری بین طراحی وب و چاپ را پر می‌کند. البته، ممکن است از شکل‌ها سوءاستفاده شود و باعث حواس‌پرتی شوند. اما وقتی با سلیقه و قضاوت خوب اعمال شوند، شکل‌ها می‌توانند ارائه محتوا را بهبود بخشند و توجه کاربر را به‌شیوه‌ای که برای آن‌ها منحصربه‌فرد است متمرکز کنند.

شما را با مجموعه‌ای از آثار دیگران، عمدتاً از آثار چاپی، تنها می‌گذارم که کاربردهای جالب چیدمان غیرمستطیلی را نشان می‌دهد. امیدوارم این مطلب الهام‌بخش شما باشد تا «شکل‌های CSS» را امتحان کنید و ایده‌های طراحی جدید را آزمایش کنید.

با تشکر فراوان از پرل چن، آلن استرنز و زولتان هوروات برای بررسی این مقاله و ارائه بینش ارزشمند.