ایجاد طرح‌بندی‌های غیر مستطیلی با اشکال CSS

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

با معرفی CSS Shapes در وب، بسته بندی محتوا در اشکال غیر مستطیلی سفارشی و بازسازی طرح ها و طرح های چاپی در وب آسان است!

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

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

بیشتر دموهای این مقاله استفاده می‌کنند shape-inside ویژگی که به طور موقت از Webkit و Blink حذف شده است. بنابراین در حال حاضر این مقاله فقط اسکرین شات هایی از نحوه عملکرد دموها در چه زمانی نشان می دهد shape-inside دوباره اعمال شد.

اعلام فرم ها

همه عناصر HTML دارای یک الگوی کادر مستطیلی هستند که جریان محتوا را در داخل و اطراف آن کنترل می کند. برای دادن یک عنصر به شکل غیر مستطیلی سفارشی، shape-inside و shape-outside خواص استفاده می شود. در زمان نگارش این مقاله، shape-outside این ویژگی را فقط می توان برای عناصر شناور و shape-inside ویژگی به طور کامل پیاده سازی نشده است، بنابراین ممکن است هنوز هنگام استفاده از آن خطاهایی پیدا کنید. ویژگی های Shape-* را فقط می توان برای عناصر سطح بلوک اعمال کرد. اگر می‌خواهید از یک ویژگی شکل روی آن‌ها استفاده کنید، عناصر غیر سطح بلوک باید مجبور به مسدود شدن شوند.

ویژگی های Shape-* یکی از سه مقدار را می گیرند: خودکار، شکل پایه یا URI تصویر. اگر مقدار روی خودکار تنظیم شود، منطقه شناور عنصر طبق معمول از فیلد حاشیه استفاده می کند. (اگر با الگوی جعبه CSS آشنایی ندارید، حتما آن را بخوانید زیرا باید بدانید که چگونه کار می کند).

اگر مقدار روی یک تابع شکل تنظیم شود، شکل بر اساس مقادیر یکی از ” محاسبه می شود.inset‘،’circle‘،’ellipse“یا”polygon‘. در این مقاله از تیم Adobe Platform می توانید در مورد هر یک از این ویژگی ها اطلاعات بیشتری کسب کنید.

در نهایت، اگر مقدار روی یک URI تصویر تنظیم شود، مرورگر از تصویر برای استخراج و محاسبه شکل بر اساس کانال آلفای تصویر استفاده می کند. شکل به عنوان مسیری محاسبه می شود که ناحیه ای را می پوشاند که در آن کدورت تصویر مشخص شده بیشتر از shape-image-threshold ارزش اگر shape-image-threshold مشخص نشده است، مقدار اولیه برای در نظر گرفتن 0.5 است. تصویر باید از همان منبع CORS باشد، در غیر این صورت پیش فرض نیز کار نخواهد کرد auto مقدار شکل محاسبه شده خواهد بود.

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

اشکال تعریف شده توسط ویژگی های shape-* را می توان با استفاده از آن تغییر داد shape-margin و shape-padding خواص خواص شکل میدان و پد واضح است.

ایجاد یک سیستم مختصات بر روی یک عنصر

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

یک سیستم مختصات لازم است زیرا اشکالی که شما اعلام می‌کنید با مجموعه‌ای از نقاط (و شعاع اگر دایره یا بیضی می‌کشید) تعریف می‌شوند و آن نقاط دارای مختصات x و y هستند که در آن سیستم مختصات قرار می‌گیرند.

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

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

بنابراین، برای اعلام یک شکل به عنوان یک عنصر، باید با موارد زیر شروع کنید:

1. تعیین ابعاد عنصر دریافت کننده شکل (به یاد داشته باشید: هنگام استفاده از عنصر باید شناور باشد. shape-outside روی آن).
2. شکل این عنصر را با استفاده از ویژگی shape-* اعلام کنید.

اعمال پس زمینه به یک شکل سفارشی

در حالی که مرزهای مورد استفاده برای قرار دادن محتویات جریان درون خطی در خارج از یک شناور را می توان با استفاده از اشکال تعریف کرد. مدل جعبه واقعی تغییر نمی کند. اگر عنصر دارای حاشیه‌ها، حاشیه‌ها یا پدهای تنظیم شده باشد، طبق ماژول CSS3BOX محاسبه و ارائه می‌شوند.
– ماژول W3C CSS برای فرم های سطح 1

به عبارت دیگر، شکلی که بر روی یک عنصر با استفاده از ویژگی های shape-* تعریف می کنید فقط بر ناحیه شناور عنصر تأثیر می‌گذارد، یعنی جریان محتوا به داخل/خارج از این عنصر، اما تمام ویژگی‌های دیگر عنصر تحت تأثیر قرار نمی‌گیرد.

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

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

بنابراین چگونه می‌توانیم رنگ را فقط به شکل و نه کل عنصر اعمال کنیم؟ اینجاست که clip-path ویژگی masking spec CSS می تواند کمک کند.

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

دقیقا چطور؟ ویژگی clip-path چه مقداری برای انجام این کار می گیرد؟

سیستم مختصات کاربر برای اشکال تعریف شده توسط clip-path ویژگی با استفاده از کادر محدود عنصری که مسیر برش به آن اعمال می‌شود، تنظیم می‌شود، بنابراین سیستم مختصات مانند ویژگی‌های shape-* است.

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

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

یادآوری سریع

در زمان نگارش این مقاله، shape-outside اموال فقط روی float کار می کند، هر دو shape-outside و shape-inside خواص فقط برای عناصر سطح بلوک یا عناصر درون خطی اعمال می شود مجبور به مسدود کردن. شکلی که روی یک شناور تعریف شده است باعث می شود که محتوای درون خطی به جای جعبه مرزی شناور، به دور شکل تعریف شده بپیچد. سطوح بعدی شکل‌های CSS به شکل‌ها اجازه می‌دهند تا روی عناصر غیر شناور استفاده شوند، و زمانی که این اتفاق بیفتد، می‌توانیم محتوا را در دو طرف یک شکل قرار دهیم (مانند تصویر زیر). بنابراین در حال حاضر فقط می‌توانیم یک عنصر را شناور کنیم و محتوای آن در دو طرف آن جریان داشته باشد.

همچنین می توانید با استفاده از افزونه Exclusion Punch از هر دو طرف محتویات بسته را جعل کنید تراویس خرس.

حالا بیایید با کشیدن چند شکل و ایجاد چیدمان های سرگرم کننده دست هایمان را کثیف کنیم!

هر یک از مثال‌های زیر یک نکته/ایده/تکنیک جدید را معرفی می‌کند که برای تعریف و استفاده از اشکال و استثناهای CSS استفاده می‌شود.

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

مثال شماره 1: متن شناور در اطراف یک فرم سفارشی با shape-outside

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

در دمو، یک ظرف داریم که شامل دو عنصر است: الف .content یک ظرف با متن در سمت چپ و یک عنصر دیگر با یک کلاس.shaped شناور به سمت راست، که شکل دلخواه را دریافت می کند و متن در سمت چپ آن جریان می یابد.

عنوان در .content منطقه نیز مشابه آنچه را که ما به دیوی شناور در سمت راست می‌دهیم، دریافت می‌کند، بنابراین من از توضیح آن صرف نظر می‌کنم و فقط در مورد آنچه انجام می‌دهیم صحبت می‌کنم. .shaped منطقه سمت راست

div class="container">
    div class="shaped">div>
    div class="content">
         h1>span>Laspan> Tour br/>Eiffelh1>
         p>Lorem Ipsum......p>
    div>
div>

ابتدا با دادن floating شروع می کنیم div در سمت راست ارتفاع و عرض مشخص شده برای ایجاد یک سیستم مختصات. ارتفاع آن را با کانتینر آن یکسان تنظیم می کنیم، که برای این نسخه نمایشی با استفاده از CSS، ارتفاع آن را به همان ارتفاع ویوپورت تنظیم کرده ام. vh واحد

.container{
    overflow:hidden;
    height: 100vh;
    width: 100vw;
}
.shaped{
    float:left;
    height:100vh;
    width:40vw;
    float:right;
    background: black url(../images/eiffel.jpg) center top no-repeat;
    background-size:cover;
}

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

استفاده polygon()

برای روش اول از تابع polygon() استفاده می کنیم. این تابع مجموعه ای از نقاط را می پذیرد که چند ضلعی را تشکیل می دهند و هر نقطه با مختصات x و y تعریف می شود. ما یک شکل چند ضلعی بسیار ساده با 4 رأس را همانطور که در تصویر زیر نشان داده شده است (دیسک آبی و نارنجی) تعریف می کنیم:

مختصات نقطه ای می تواند مقادیر خاصی (px یا em) یا مقادیر درصدی داشته باشد. در این مثال، مقادیر درصدی را برای رئوس قابل مشاهده در تصویر بالا ارائه خواهیم داد. اکنون تنها کاری که باید انجام دهیم این است که به سادگی این شکل را در بالای شناور اعلام کنیم تا متن به سمت پایین جریان یابد.

.shaped{
    
    shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
    shape-margin: 20px;
}

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

همچنین می توانید ببینید که من یک فیلد به شکل اضافه کردم تا محتوا کمی از شکل فاصله بگیرد و شکاف ایجاد کند.

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

بنابراین برای برش قسمت های اضافی که به آن نیاز نداریم، از آن استفاده می کنیم clip-path ویژگی و همان مقدار/شکلی که به آن دادیم به آن بدهید shape-outside دارایی بالا بنابراین این قانون را به مجموعه قوانین اضافه می کنیم:

.shaped{
    
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}

و ما تمام شدیم! ساده است، درست است؟

عنوان صفحه در سمت چپ به همان صورت در نظر گرفته می شود .floated div در سمت راست عنوان در داخل ظرف خود حرکت می کند .content، برای ایجاد یک سیستم مختصات به آن ارتفاع و عرض داده می شود و سپس با استفاده از آن یک شکل بر روی آن اعلام می شود shape-outside اموال درست مانند ما در .floated عنصر

استفاده از URI تصویر

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

برای مثال ما در اینجا، به جای استفاده از تابع polygon() برای تعریف شکل، به شما می دهیم shape-outside ویژگی URI یک تصویر و مرورگر فرمت را از تصویر استخراج کرده و از آن استفاده می کند.

تصویری که منطقه محرومیت را برای این مثال تعریف می کند در زیر نشان داده شده است. می بینید که تصویر همان شکلی را نشان می دهد که در روش قبلی توسط نقاط polygon() تعریف شده بود.

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

برای استفاده از این تصویر، موارد زیر را می نویسیم:

.shaped{
    
    shape-outside: url(../images/mm.png);
    shape-image-threshold: 0.5;
}

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

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

مثال شماره 2: بسته بندی / پل زدن متن در یک فرم سفارشی با shape-inside

برای مثال دوم، ما یک نسخه ی نمایشی ساده ایجاد می کنیم که در آن نتیجه نهایی به شکل زیر خواهد بود:

هدف از این مثال نشان دادن است shape-inside ویژگی مورد استفاده برای شناور کردن متن در یک شکل غیر مستطیلی.ما یک عنصر ظرف با متن در داخل ظرف داریم و عکس را به عنوان تصویر پس‌زمینه در آن ظرف اعمال کرده‌ایم.

div class="container">            
    div class="content">
        p>...p>
    div>
    h2>Corn Breadh2>
div>

همانطور که از اسکرین شات دمو بالا می بینید، متن به شکل دایره ای در بالا پیچیده شده است.بنابراین می دانیم که باید دایره ای را روی ظرف خود اعلام کنیم.اکنون، مانند مثال قبلی، دو راه برای انجام این کار وجود دارد.

استفاده circle()

با کمک circle() تابع ما یک دایره تعریف می کنیم و آن را روی عنصر خود قرار می دهیم.

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

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

مختصات مرکز دایره را مشخص می کنیم و مقدار شعاع آن را تعیین می کنیم و آنها را روی ظرف اعمال می کنیم:

.container{
    float:left;
    width:600px;
    height:900px;
    overflow:hidden;
    margin:0 50px;
    color:white;
    font-size:13px;
    padding:10px;
    background: url(../images/pan.jpg) top left no-repeat;
    background-size:100% 100%;
    
    shape-inside: circle(160px at 400px 60px);
}

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

استفاده از URI تصویر

همچنین می توانیم از URI یک تصویر با کانال آلفا برای استخراج شکل دایره از آن استفاده کنیم. تصویر به شکل زیر خواهد بود:

در اینجا ذکر این نکته مهم است که وقتی از یک تصویر با کانال آلفا برای تعریف یک شکل استفاده می کنید برای shape-inside دارایی، در ناحیه سیاه (یا مات) تصویر ناحیه ای را که متن در آن جریان دارد را مشخص می کند. در مثال قبلی، ناحیه مات تعریف می کند منطقه محرومیت از عنصری که شکل را به آن اعمال کرده ایم، یعنی ناحیه ای که در آن قرار دارد نه جریان های متنی

بنابراین شکل را با استفاده از یک URI تصویر به جای تابع شکل اعلام کنید circle()، باید مقدار را روی آن تنظیم کنید shape-inside ویژگی برای اشاره به URI تصویر:

.container{
    
     shape-inside: url(mask.png) top left;
}

مثال شماره 3: بسته بندی / پل زدن متن در یک فرم سفارشی با shape-inside

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

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

شکل اعلام شده در این ظرف بدیهی است که یک شکل چندضلعی “دلخواه” است، نه یک شکل هندسی که بتوانیم با استفاده از تابع شکلی مانند آن را اعلام کنیم. circle()، ellipse()، یا inset()، بنابراین ما استفاده خواهیم کرد polygon() تابعی برای اعلام آن است.

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

از آنجایی که تعداد بسیار زیادی از نقاط این شکل را تشکیل می دهند، محاسبه مختصات این نقاط دشوار است، بنابراین اگر وجود داشته باشد مفید خواهد بود. بصری ابزار موجود برای کمک به ما قطعه زمین آن تصویر اشاره می کند درست است؟ خوب، یک ابزار ایجاد شده توسط Adobe وجود دارد تراویس خرس، که در واقع مجموعه ای از ابزارهایی است که می تواند به شما در کار با اشکال CSS کمک کند. مطمئن شوید که ابزار Shape Tools را بررسی کرده اید زیرا آنها بسیار ارزشمند هستند.

یکی از ابزارهای شکل ذکر شده Poly Draw نام دارد و به شما این امکان را می دهد که به صورت دستی یک شکل، به طور خاص یک چند ضلعی را رسم کنید و سپس مختصات شکل را برای کپی و چسباندن در CSS خود ایجاد کنید تا شکل عنصر خود را اعلام کنید.

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

رضوان کلیمان این ایده را وقتی از او در مورد داشتن ابزاری پرسیدم که به ما امکان می دهد شکل ها را دقیقاً در مرورگر بر روی تصاویر تعریف کنیم، درست مانند چیزی که او در سخنرانی خود در CSS Conf EU امسال استفاده کرد. اگر هنوز سخنرانی او را ندیده اید، حتما این کار را انجام دهید. ابزاری که او استفاده می کند روزی، امیدوارم به زودی، توسط Adobe منبع باز شود و سپس ابزاری ضروری برای کار با اشکال CSS خواهد بود. اما تا آن زمان می توانید از ابزار Poly Draw استفاده کنید.

هنگامی که شکل را با ابزار Poly Draw رسم کردید، تنها کاری که باید انجام دهید این است که شکل به دست آمده را روی عنصر خود اعلام کنید و کارتان تمام است.

.container{
    width:445px;
    height:670px;
    overflow:hidden;
    margin:30px auto;
    
    shape-outside: polygon(170.67px 291.00px,126.23px 347.56px,139.79px 417.11px,208.92px 466.22px,302.50px 482.97px,343.67px 474.47px,446.33px 452.00px,443.63px 246.82px,389.92px 245.63px,336.50px 235.26px,299.67px 196.53px,259.33px 209.53px,217.00px 254.76px);
}

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

اگر می خواهید از URI تصویر به جای تابع shape استفاده کنید، باید مقدار شکل بیرونی بالا را با موارد زیر جایگزین کنید:

.container{
    
    shape-inside: url(mask.png) top left;
}

مثال شماره 4: چندین منطقه شناور با shape-inside

در این مثال، چندین ناحیه شناور در داخل یک عنصر ایجاد می‌کنیم تا محتوا را درون آن قرار دهیم. نتیجه این دمو در تصویر زیر نشان داده شده است:

ما یک div با یک تصویر پس زمینه، و ما متن را در داخل آن می خواهیم div برای جریان در داخل مناطق خاصی در داخل آن، که همه آنها دارای اشکال سفارشی هستند.

div class="container">
    div class="content">
        h2>Rosemary Sandwichh2>
        p>...p>
    div>
div>

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

برای تعریف اشکال از تصویر زیر استفاده می کنیم. نواحی سیاه در تصویر، ناحیه شناور را برای محتوای داخل مشخص می کند .container جایی که متن جاری خواهد شد.

ما از URI این تصویر به عنوان مقداری برای shape-inside اموالی که به آن اعلام خواهیم کرد .container، همیشه به یاد داشته باشید که مقادیر ارتفاع و عرض را برای آن تنظیم کنید div:

.container{
    width:556px;
    height:835px;
    overflow:hidden;
    margin:0 50px;
    color:white;
    position:relative;
    background: url(../images/bread.jpg) top left no-repeat;
    background-size: 100% 100%;
    shape-inside: url(mask.png) top left;
    font-size:13px;
}

و ما تمام شدیم. مرورگر با استخراج اشکال از تصویری که به آن داده ایم، بقیه کارها را برای ما انجام می دهد و متن ما به خوبی در آن قسمت ها جریان می یابد!

استفاده از یک تصویر برای تعریف اشکال روشی منطقی است که وقتی مناطق مجزایی دارید که به یکدیگر متصل نیستند، یعنی. که یک شکل چند ضلعی را تشکیل نمی دهند. برای این نمایش می توانیم استفاده کنیم polygon() تابعی برای تعریف شکل، با تعریف چند ضلعی که شبیه تصویر زیر است:

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

ترکیب اشکال CSS با مناطق و Flexbox برای ایجاد طرح‌بندی مجله

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

هنگامی که ویژگی‌های CSS Shapes در آینده پیاده‌سازی می‌شوند و بسته‌بندی محتوا در دو طرف یک شکل ممکن می‌شود، ایجاد طرح‌های چاپ مانند مجله دیجیتال با ترکیب Shapes و Exclusions با Regions و Flexbox بسیار امکان‌پذیر می‌شود.

Flexbox به ما ستون‌هایی با ارتفاع مساوی می‌دهد، Regions به ما اجازه می‌دهد متن را در قسمت‌های مختلف صفحه سرریز کنیم و محتوای صفحه را از طرح‌بندی آن جدا کنیم، و Shapes و Exceptions به ما این امکان را می‌دهند که آخرین لمس خلاقانه را اضافه کنیم که طرح‌بندی مجله ما را به سطح بعدی می‌برد.

کلمات پایانی

فکر نمی‌کنم تا به حال آنقدر که درباره اشکال و استثناهای CSS هیجان‌زده شده‌ام، درباره یک ویژگی جدید CSS هیجان زده شده باشم. قدرت، انعطاف‌پذیری و خلاقیتی که این ویژگی‌ها در ترکیب با مناطق و flexbox می‌توانند ارائه دهند، به سادگی فوق‌العاده است!

پشتیبانی گسترده از CSS Shapes باید به زودی ارائه شود، زیرا تیم Adobe Web Platform به طور مداوم بر روی بهبود و پیاده سازی این ویژگی ها و ارائه ابزارهایی برای آسان تر کردن کار با آنها کار می کند.

آینده طراحی وب هر روز روشن تر و هیجان انگیزتر به نظر می رسد. زمان بسیار خوبی برای یک توسعه دهنده وب است!

امیدوارم این مقاله به شما کمک کرده باشد تا با جنبه فنی شروع به کار با CSS Shapes آشنا شوید. این آخرین مقاله من در مورد این موضوع نخواهد بود. ترکیب CSS Shapes با دیگر فناوری‌های CSS پیشرفته مانند Regions، دری را به روی دنیای جدیدی از خلاقیت و آموزش‌های جدید باز می‌کند! 😉

شما باید در وبلاگ های من مشترک شوید فید RSS و من را در توییتر دنبال کنید برای به روز ماندن در مورد مقالات جدید آینده.

با تشکر از شما برای خواندن!

منابع و آموزش های تکمیلی

این مقاله بدون کمک عالی رضوان کلیمان امکان پذیر نبود، بنابراین از او تشکر فراوان داریم.