آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 53) : کار با ویژگی Shape-outside - قسمت 1

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۱۸ مهر ۱۳۹۶

همونطور که اطلاع دارید در جلسه قبل در مورد ویژگی‌های با قابلیت انیمیشنی شدن و ویژگی table-layout توضیحاتی رو قرار دادیم و شما رو با اونا آشنا کردیم. در این جلسه میخوایم در مورد ویژگی Shape-outside توضیحات و مثالهایی رو قرار بدیم.

css3 attributes

همونطور که میدونین CSS از Box Model پیروی میکنه و به همین دلیل هست که همه المنتها بصورت مستطیلی نمایش داده میشن. حتی اگر از ویژگی‌های CSS مخصوص تغییر شکل مثل border-radius نیز استفاده کنیم، باز هم المنتها بصورت مستطیلی باقی میمونن. مثلا کدهای HTML زیر رو در نظر بگیرید:

<img class="my-circle" src="sunset.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

همونطور که میبینید چون پاراگرافها المنتهای بلاک هستن، به خط بعدی منتقل میشن و در کنار تصویر قرار نمیگیرن. اگر بخواین کاری کنید که متن در کنار تصویر قرار بگیره، میتونین برای تصویر مورد نظر ویژگی float: left رو قرار بدین. با اینکار تصویر به سمت چپ شناور میشه و متن در کنار اون قرار میگیره. بصورت زیر:میبینید که تا اینجای کار همه المنتها و ظاهر اونا بصورت مستطیلی شکل هستند. شما میتونین با استفاده از border-radius: 50% ظاهر تصویر مورد نظر رو بصورت دایره ای در بیارید.

.my-circle {
	border-radius: 50%;
	width: 200px;
	height: 200px;
	float: left;
	padding: 0 10px 5px 0;
}

خروجی بصورت زیر خواهد شد:

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

استفاده از ویژگی shape-outside

اینجا هست که ویژگی Shape-outside خودش رو نشون میده. با استفاده از این ویژگی میتونین نحوه قرار گیری متن خارج از المنت فعلی رو مشخص کنید و مرزی که متن باید در کنار اون قرار بگیره رو مشخص کنید. برای این ویژگی میتونین یکی از توابع circle یا ellipse یا polygon رو مورد استفاده قرار بدین و شکل مورد نظرتون رو مشخص کنید. در این جلسه برای مثال از circle استفاده میکنیم تا با قابلیت این ویژگی آشنا بشید. مثلا اگر بخوایم در مثال قبل کاری کنیم که متن بصورت دایره ای و زیبا در کنار عکس قرار بگیره، میتونین بصورت زیر عمل کنید:

.my-circle {
	border-radius: 50%;
	shape-outside: circle();
	width: 200px;
	height: 200px;
	float: left;
	padding: 0 10px 5px 0;
}

خروجی بصورت زیر خواهد شد:

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

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

پشتیبانی مرورگرها از ویژگی Shape-outside متوسط به بالا هست و میتونین از اون در سایتتون استفاده کنید. هر جا که از این ویژگی پشتیبانی نشه، متن بصورت پیش فرض و مستطیلی قرار میگیره و خیلی ضرر خاصی به ظاهر سایت نمیزنه.

مواردی که بنفش هستند از این ویژگی پشتیبانی نمیکنن. برای مرورگرهایی که از این ویژگی پشتیبانی نمیکنن، میتونین از css-shapes-polyfill استفاده کنید و برای مرورگرهای قدیمی Fallback یا پشتیبان قرار بدین.

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

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.