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

- visibility ٠ mode_comment

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

css3 attributes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

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