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

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

مقادیر مجاز برای Shape-outside

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

• تابع circle()
• تابع ellipse()
• تابع polygon()

استفاده از تابع circle

این تابع ساده ترین مقدار مربوط به ویژگی shape-outside هست و به سادگی میتونین مقدار circle() رو قرار بدین و با اینکار یک دایره متناسب قرار میگیره تا کل محدوده المنت رو پوشش بده. مثلا کد زیر رو در نظر بگیرید:

همونطور که میبینید مقدار circle() رو قرار دادیم. با اینکار یا دایره به شعاع 100 و در مرکز المنت قرار میگیره. چون عرض و ارتفاع برابر با 200 بود، زمانی که شعاع و موقعیت قرار گیری رو مشخص کنید، بصورت پیش فرض این مقادیر قرار میگیرن. شما میتونین بصورت زیر نیز عمل کنید:

میبینید که شعاع دایره رو 50% طول و ارتفاع قرار دادیم و موقعیت اون رو با استفاده از at در 100px و 100px قرار دادیم. با اینکار دایره در مرکز قرار میگیره و خروجی بصورت زیر میشه:

استفاده از تابع ellipse

استفاده از این تابع نیز همانند circle می باشد و با استفاده از این تابع میتونین یک بیضی رو تعریف کنید. همونطور که اطلاع دارید بیضی همون دایره هست با این تفاوت که شعاع افقی و عمودی اون با هم برابر نیست. شما میتونین شعاع افقی و عمودی رو برای این تابع مشخص کنید. کد زیر رو در نظر بگیرید:

میبینید که مقدار شعاع رو در جت افقی و عمودی به ترتیب 50 و 90 پیکسل قرار دادیم. همچنین در اینجا از ویژگی clip-path نیز استفاده کردیم و دقیقا همون مقدار رو براش قرار دادیم. با اینکار همون جایی که متن در کنارش قرار میگیره، از تصویر مورد نظر بریده میشه تا بهتر بتونین اون رو ببینید و حالت زیباتری به وجود بیاد. خروجی کد بالا بصورت زیر خواهد بود:

به همین راحتی.

استفاده از تابع polygon

استفاده از این تابع نسبت به دو مورد قبل کمی پیچیده تر است. با استفاده از این تابع میتونین زوج های x و y رو قرار بدین و نقاط رو پشت سر هم مشخص کنید تا یک چندضلعی به وجود بیاد. برای اینکار حداقل باید سه نقطه رو تعریف کنید. آخرین نقطه ای که تعریف میکنید بصورت اتوماتیک به نقطه اول وصل میشه. مبدا و نقطه 0 بالا و سمت چپ المنت می باشد و در جهت راست و پایین زیاد می شود. شما میتونین بصورت نسبی مقادیر مورد نظرتون رو وارد کنید. مثلا فرض کنید میخوایم یک مثلث رو به وجود بیاریم. برای اینکار بصورت زیر عمل میکنیم:

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

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

شما میتونین اشکال پیچیده تری رو نیز به وجود بیارید. کد زیر رو ببینید:

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

پس شما میتونین هر شکل و قالبی که بخواید برای قرارگیری متن در کنار تصاویر و المنتهای خودتون در نظر بگیرید. برای مطالعه بیشتر میتونین این لینک رو مطالعه کنید.

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

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

موفق باشید

یا علی

Source