shape-outside Property
ویژگی shape-outside
در CSS فرمی را مشخص می کند که متن در کنار عنصر مورد نظر، در فرم دلخواه قرار گیرد. این فرم می تواند چهار گوش نباشد و به اشکال دلخواهِ چند ضلعی و یا دایره یا بیضی نیز باشند.
نحوه نوشتار
shape-outside: none; shape-outside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box; shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(5em 10rem 8% 10px); shape-outside: polygon(2em 2em, 2em 2em, 3em 3em); shape-outside: url(shape.png); shape-outside: linear-gradient(55deg, rgba(255, 255, 255, 0) 150px, red 150px);
مقادیر
none
متن کنار عنصر بدون تغییر در حالت پیشفرض دیده می شود.
margin-box
شکل را چسبیده به لبه بیرونی margin
مشخص می کند.
border-box
شکل را چسبیده به لبه بیرونی border
مشخص می کند.
padding-box
شکل را چشبیده به لبه بیرونی padding
در اطراف عنصر مشخص می کند.
content-box
شکل را چسبیده به لبه بیرونی محتوا مشخص می کند.
اشکال هدنسی
شکل جایگیری محتوا منطبق بر یکی از توابع inset()
, circle()
, ellipse()
, polygon()
که برای رسم اشکال هندسی استفاده می شوند مشخص می شود.
در مثال زیر نحوه عملکرد این ویژگی را می بینیم:
html
<div class="wrapper"> <img src="http://my-project.ir/img/cup.png" alt="cup" /> <p> لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحهآرایی، نخست از متنهای آزمایشی و بیمعنی استفاده میکنند تا صرفا به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن قرار گیرد چگونه به نظر میرسد و قلمها و اندازهبندیها چگونه در نظر گرفته شدهاست. </p> </div>
css
body { background-color: rgb(199, 228, 240); } .wrapper { float: right; max-width: 620px; } img { float: right; shape-outside: circle(50%); margin: 15px; } p { direction: rtl; text-align: justify; font-family: "Segoe UI"; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی در CSS پشتیبانی می کنند.