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

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

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

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

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

• 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 استفاده کنید.

به عنوان مثال اگر بخواهید ۲۰ پیکسل بین بخش کدر عکس و متن فاصله بیافتد، می‌توانید در تعریف 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);
}

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

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

استفاده از 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 استفاده کرد. مقدار پیش‌فرض این مشخصه، عدد ۱ است که به معنی کاملاً شفاف است اما می‌توانید از عدد دیگری استفاده کنید تا بخش‌هایی که ۱۰۰ درصد شفاف نیستند هم حاوی متن شوند.

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

.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;
}

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

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

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

smashingmagazineسیاره‌ی ‌آی‌تی