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



visibility  
mode_comment   ۲

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

css3 attributes

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

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

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

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

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

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

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

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

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

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

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

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

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

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

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

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

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

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

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

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

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

موفق باشید

یا علی

Source

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

مثل همیشه عالی مهندس

محمد اسفندیاری

ممنون
موفق باشید دوست عزیز

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.