شروع کار با CSS Shapes

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

Razvan Caliman

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

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

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

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

<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>

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

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

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

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

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

ایجاد اشکال به صورت دستی

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

تابع حلقه()

نماد کامل برای مقدار شکل دایره 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 فقط بر شکل ناحیه شناور اطراف یک عنصر تأثیر می‌گذارد. اگر عنصر دارای پس‌زمینه باشد، با شکل بریده نمی‌شود. برای دستیابی به این اثر، باید از ویژگی‌های CSS Masking - یا clip-path یا mask-image استفاده کنید. ویژگی clip-path بسیار مفید است زیرا از همان نماد CSS Shape پیروی می کند، بنابراین می توانید از مقادیر مجدد استفاده کنید.

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

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

هنگام استفاده از درصد برای شعاع دایره، مقدار در واقع با یک فرمول کمی پیچیده تر محاسبه می شود: 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;
}

منشاء سیستم مختصات اکنون خارج از ناحیه محتوای عنصر است (100px بالا و 100px سمت چپ)، همانطور که مرکز دایره نیز چنین است. مقدار محاسبه شده شعاع دایره نیز برای محاسبه سطح افزایش یافته سیستم مختصات ایجاد شده توسط جعبه مرجع حاشیه margin-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, ...) که در آن جفت مختصات xy را برای هر رأس (نقطه) یک چند ضلعی مشخص می کنید. حداقل تعداد جفت برای تعیین یک چند ضلعی سه، یک مثلث است.

.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 وارد شده است ، که به مرورگر آموزش می‌دهد که چگونه «درون» یک چند ضلعی را در صورت وجود مسیرهای متقاطع یا اشکال محصور در نظر بگیرد. Joni Trythall به خوبی توضیح می دهد که چگونه ویژگی 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 Shapes محتوای وب را از جعبه‌های ساده آزاد می‌کند، ممکن است خلاف واقع به نظر برسد. ممکن است خیلی خوب باشد. من هنوز یک مورد استفاده برای inset() پیدا نکرده ام که از قبل با floats و margin یا با polygon() قابل دستیابی نباشد. اگرچه inset() بیان قابل خواندن تری برای اشکال مستطیلی نسبت به polygon() ارائه می دهد.

نماد کامل یک تابع شکل inset عبارت است از 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 را برای ویژگی shape-outside مشخص نکنید، می توانید به مرورگر اجازه دهید تا یک شکل را از کادر مرجع عنصر استخراج کند. جعبه مرجع پیش فرض margin-box است. هیچ چیز عجیب و غریبی تا کنون وجود ندارد، شناورها در حال حاضر اینگونه کار می کنند. اما با استفاده از این تکنیک، می توانید از هندسه یک عنصر مجددا استفاده کنید. بیایید به ویژگی border-radius نگاه کنیم.

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

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

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

تنها با استفاده از ویژگی‌های شناور و حاشیه می‌توان به اثر pull-quote offset دست یافت. اما این مستلزم آن است که عنصر نقل قول را در درخت HTML در نقطه ای که می خواهید رندر کنید قرار دهید.

در اینجا نحوه دستیابی به همان افکت pull-quote با انعطاف پذیری بیشتر آمده است:

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

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

حاشیه شکل

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

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

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

درک این نکته مهم است که shape-margin تنها یک مقدار مثبت را می پذیرد. علامت دست بلند ندارد. به هر حال یک شکل حاشیه برای یک دایره چیست؟

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

شما می توانید اشکال 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 Shapes در تعامل هستند تا در جایی که منطقی است، جلوه‌هایی را اضافه کنید.

در نمایش Alice in Wonderland Shapes CSS، از موقعیت اسکرول برای تغییر حاشیه بالای محتوا استفاده کردیم. متن بین دو عنصر شناور فشرده شده است. همانطور که به سمت پایین حرکت می کند، باید مطابق shape-outside دو عنصر شناور، تغییر شکل دهد. این تصور را ایجاد می کند که متن از سوراخ خرگوش پایین می رود و به تجربه داستان گویی می افزاید. مرزی بلاعوض؟ شاید. اما به نظر جالب می رسد.

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

افزایش پیشرونده

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

برخی از مرورگرها تشخیص ویژگی را در CSS از طریق قانون @supports بدون نیاز به کتابخانه های خارجی ارائه می کنند. گوگل کروم که از شکل های CSS نیز پشتیبانی می کند، قانون @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 Shape می شناسیم، در روزهای اولیه این مشخصات، Exclusions و Shapes CSS نامیده می شد. تغییر در نامگذاری ممکن است به عنوان یک تفاوت ظریف به نظر برسد، اما در واقع بسیار مهم است. Exclusions CSS ، که اکنون یک مشخصات جداگانه است، بسته بندی محتوا را در اطراف عناصری که به طور دلخواه در موقعیت قرار گرفته اند، بدون نیاز به ویژگی float امکان پذیر می کند. تصور کنید که محتوا را در اطراف یک عنصر کاملاً در موقعیت قرار داده شده است. این یک مورد استفاده برای Exclusions CSS است. CSS Shapes فقط مسیری را که محتوا در اطراف آن قرار می گیرد را مشخص می کند.

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

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

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

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

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

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

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

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

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

نتیجه

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

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

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