چینش متن در کنار عکس های غیرمستطیلی با shape در CSS

استفاده از شکل های سطح 1 به روش CSS یکی از قابلیت هایی است که در مرورگر Chrome و Safari سال ها وجود داشته اما هفته ی اخیر با معرفی Firefox 62 در این مرورگر نیز اضافه شده است. به علاوه ابزار طراحی وب فایرفاکس نیز برای کار با Shapes یا شکل ها، تغییراتی کرده است.

در این مقاله به روش استفاده از خواص shape-outside و shape-image-threshold و shape-margin در CSS و HTML می پردازیم که کاربردهای متنوع و بسیار جالبی دارد. با ما باشید.

شکل های CSS  یا CSS Shapes چیست؟

در تعریف شکل های CSS سطح 1، سه مشخصه ی جدید وجود دارد:

• shape-outside
• shape-image-threshold
• shape-margin

هدف از معرفی این سه ویژگی جدید این است که محتوا را دور یک شکل دلخواه که مستطیلی و ساده نیست، بچینیم. راه های مختلفی برای تعریف کردن شکل است و با استفاده از این خواص جدید، می توانید متن را در کنار شکل به صورت نامنظم و غیرمستطیلی درج کنید.

در نسخه ی فعلی مشخصه های شکل های CSS، شکل ها را می توانید روی عناصری از نوع Float استفاده کنید. به عنوان مثل یک عکس شفاف با فرمت PNG که شکل نامنظمی دارد و به صورت فلوت در سمت چپ صفحه قرار گرفته و قرار است متنی در کنار آن به صورت نامنظم نمایش داده شود.

به یک مثال ساده توجه کنید: متن و عکس که با تگ img تعریف می شود را در یک div  قرار می دهیم و نام کلاس عکس را shape می گذاریم. در تعریف کلاس shape، آن را به صورت شناور یا Float در سمت چپ قرار می دهیم. از طرفی در مشخصه ی shape-outside، لینک یا URL فایل PNG که به شکل یک قطره ی آب با زمینه ی شفاف یا Transparent است را قرار می دهیم. خروجی کار به این صورت است:

توجه کنید که تصویر شما می بایست با CORS  سازگاری داشته باشد و لذا می بایست روی همان سروری قرار گرفته باشد که سایر محتوای شما قرار گرفته است. البته در مورد CDN یا شبکه ی توزیع محتوا، اگر هدرهای فایل ها صحیح و مناسب باشد هم مشکلی وجود نخواهد داشت. در غیر این صورت در ابزار طراحی وب فایرفاکس یا کروم، ارورهایی مبنی بر مسدود شدن فایل موردبحث دریافت می کنید.

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

تنظیم فاصله ی متن از عکس با shape-margin

در مثال قبلی، کلاس shape که به img حاوی متن و عکس داده شده، دارای مشخصه ای به اسم shape-margin نیست و لذا فاصله ی متن از بخش غیرشفاف عکس که به صورت قطره ی آب است، صفر پیکسل است. برای افزایش این فاصله ی صفر پیکسلی که طراحی را بدریخت می کند، می توانید از shape-margin استفاده کنید.

به عنوان مثال اگر بخواهید 20 پیکسل بین بخش کدر عکس و متن فاصله بیافتد، می توانید در تعریف CSS مربوطه از shape-margin: 20px استفاده کنید:

body {
font: 1.2em/1.3 Helvetica, arial, sans-serif;
}

.content {
max-width: 700px;
margin: 20px auto;
}

.shape {
float: left;
shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/tear.png);
}

و نتیجه را بررسی کنید:

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

استفاده از Before و After و المان ساخته شده به عنوان shape

در مثال های قبلی در تعریف div  حاوی متن، از شکل استفاده شد اما می توانید بدون استفاده از تگ img هم عکس را به صورت نیمه المان ها تعریف کنید و به عبارت دیگر از before یا after استفاده کنید. به عنوان مثال اگر کلاس div حاوی متن، content  باشد، می توانید نیمه المانی به اسم content::before را به این صورت تعریف کنید:

.content::before {
content: “”;
float: left;
width: 300px;
height: 300px;
shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/tear.png);
shape-margin: 20px;
}

در تعریف فوق، محتویات المان خالی است اما عرض و طول آن مشخص شده و همین طور shape-outside و shape-margin آن مشخص شده است.

نتیجه ی استفاده از این روش را بررسی کنید:

همان طور که مشاهده می کنید نیمه المانی که با before ساخته شده هم می تواند متن را به شکلی نامنظم به سمت چپ صفحه متمایل یا float کند.

استفاده از گرادیان رنگ ها به عنوان شکل در CSS

برای استفاده از shape و طراحی متنی که نامنظم چیده شده، لزوماً به فایل PNG با کانال شفافیت نیاز ندارید بلکه می توانید از گرادیان رنگ ها که به شکل زاویه دار یا مورب تعریف شده و حتی اشکال ساده ی دیگری که توابع خاصی دارند هم استفاده کنید.

در مورد گرادیان رنگ ها با یک مثال ساده روش کار را توضیح می دهیم:

یک گرادیان ساده از رنگ آبی به حالت بدون رنگ یا شفاف را در نظر بگیرید که به صورت مورب تعریف شده است. این گرادیان را به عنوان shape-outside استفاده می کنیم:

.content::before {
content: “”;
display: block;
width: 80%;
float: left;
height: 300px;
shape-outside: linear-gradient(150deg, rgba(0,212,255,1) 30%, rgba(9,9,121,0) 50%);}

می توانید بخش آبی رنگ و شفاف گرادیان را نیز در نیمه المانی که با before  ساخته می شود هم استفاده کنید تا کنار متنی که به شکل مورب نوشته شده، خالی و سفید نماند.

.content::before {
content: “”;
display: block;
width: 80%;
float: left;
height: 300px;
background: rgb(0,212,255);
background: linear-gradient(150deg, rgba(0,212,255,1) 30%, rgba(9,9,121,0) 50%);
shape-outside: linear-gradient(150deg, rgba(0,212,255,1) 30%, rgba(9,9,121,0) 50%);}

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

استفاده از shape-image-threshold برای تنظیم موقعیت متن روی شکل

تاکنون از عکس ها و گرادیان رنگ به عنوان شکل استفاده کردیم و همواره از بخش شفاف برای قرارگیری متن استفاده کردیم. می توانید به جای استفاده از بخش کاملاً شفاف و بی رنگ، از بخش هایی که تا حدی شفافیت دارند هم استفاده کنید. برای اینکه متن روی بخش نیمه شفاف یک عکس قرار بگیرد، می بایست از مشخصه ی سوم یعنی shape-image-threshold استفاده کرد. مقدار پیش فرض این مشخصه، عدد 1 است که به معنی کاملاً شفاف است اما می توانید از عدد دیگری استفاده کنید تا بخش هایی که 100 درصد شفاف نیستند هم حاوی متن شوند.

برای توضیح بهتر، به مثال استفاده از گرادیان رنگ ها به عنوان شکل برمی گردیم. گرادیان رنگ را می توانید به صورتی تعریف کنید که شفافیت از حالت کدر به شفاف 100 درصدی تغییر کند و سپس برای مشخصه ی shape-image-threshold از عدد 0.7 استفاده کنید تا نواحی که 0.7 واحد کدر هستند و در واقع 30 درصد شفافیت دارند هم حاوی متن شوند.

.content::before {
content: “”;
display: block;
width: 80%;
float: left;
height: 300px;
background: rgb(0,212,255);
background: linear-gradient(150deg, rgba(0,212,255,1) 30%, rgba(9,9,121,0) 50%);
shape-outside: linear-gradient(150deg, rgba(0,212,255,1) 30%, rgba(9,9,121,0) 50%);
shape-image-threshold: .7;
}

نتیجه را بررسی کنید:

همان طور که مشاهده می کنید، متن به داخل گرادیان نفوذ کرده و در حقیقت بخش هایی با شفافیت 30 درصدی را پوشانده است.

در مجالی دیگر با استفاده از اشکال ساده که به عنوان شکل های پایه ای در CSS تعریف می شود به عنوان shape می پردازیم. سیاره ی آی تی را دنبال کنید.

smashingmagazineسیاره ی  آی تی