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

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

همه ما می دانیم که همه گوشه ها زوایای قائمه نیستند. همه ما می دانیم که خطوط همیشه صاف نیستند. در واقع، برخی از جذاب‌ترین طراحی‌های قرن گذشته از شبکه خارج شده‌اند و در کمان‌ها و زوایه‌ها چرخیده‌اند و تنش، درام و هیجان ایجاد کرده‌اند. این یک پیشنهاد آسان در print طراحی: یک سند را در InDesign باز کنید، آن را انتخاب کنید ابزار بیضی و یک دایره بکشید روی مرحله، را انتخاب کنید ابزار تایپ و روی دایره کلیک کنید، حالا متن خود را بچسبانید. حالا همین کار را در CSS امتحان کنید، ادامه دهید، تا منتظرم یک قهوه درست کنم…

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

برای رفع این مشکل، W3C در حال توسعه CSS Shapes است. منتشر شد روی 20 ژوئن اولین پیش نویس کاری عمومی آنها، ماژول شکل‌های CSS سطح 1، جزئیات استفاده از اشکال غیر مستطیلی در رابطه با مدل جعبه و رفتار شناور. در حال حاضر یک کار در حال انجام است، اضافات پیشنهادی به CSS شامل اشکال مستطیل، مستطیل درونی، دایره، بیضی و چندضلعی است.

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

<div id='circle'></div>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<style type="text/css">
#circle {
 shape-outside: circle(-400px,-400px,400px); /* (x, y, radius) */
 float:left;
}

این کد یک دایره کامل 800×800 (دو برابر شعاع) با مرکز آن 0.0 ایجاد می کند. متن موجود در پاراگراف به شکل زیر در اطراف آن جریان دارد:

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

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

بسته بندی متن اصلی در اطراف یک شکل نامنظم چیزی شبیه به این خواهد بود:

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

این همان داستان قدیمی است که می ترسم: وجود ندارد. این ویژگی فقط یک پیشنهاد است و در حال حاضر به سادگی قابل اجرا نیست.

با این حال، احترام فزاینده به استانداردهای وب، در سال‌های اخیر باعث شده است که سازندگان مرورگر برای اولین بار در پیاده‌سازی مشخصات W3C (به‌جای فناوری‌های اختصاصی خود) رقابت کنند و بنابراین معرفی CSS Shapes احتمالاً به‌زودی انجام می‌شود.

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

آیا در مورد ماژول CSS Shapes پیشنهادی W3C هیجان زده هستید؟ دوست دارید چگونه در طول زمان شاهد پیشرفت آن باشید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر شکل از طریق Shutterstock.