حاشیه های تصویری پیوسته

صورت مسئله

همانطور که گاهی طرح هایی برای پس زمینه ها در نظر می گیریم. برخی موارد نیاز است تا چنین طرح هایی را در قسمت حاشیه داشته باشیم. شاید جواب بدهید, کار ساده ای است می توانیم از border-image استفاده کنیم.

قبل از اینکه به جواب خود پافشاری کنید اجازه بدهید تا طرز کار این ویژگی را خیلی کوتاه یادآوری کنیم. (برای اطلاعات بیشتر در مورد ویژگی های مختلف حاشیه تصویری به قسمت مرجع سر بزنید)

border-image تصویر مورد نظر را به نه قسمت تقسیم می کند, گوشه ها را در گوشه های عنصر, و لبه های کناری را در لبه های کناری عنصر قرار می دهد. برای طرح های ساده استفاده از این ویژگی بسیار هم مفید است اما فرض کنید می خواهیم طرحی شبیه به تصویر زیر را به عنوان حاشیه تصویری داشته باشیم و نمی خواهیم در قسمت اتصال گوشه ها و قسمت های بین آنها خطایی وجود داشته باشد و در اصطلاح می خواهیم حاشیه تصویری پیوسته داشته باشیم:
 

 

هدف نهایی ما پیاده سازی طرح زیر می باشد:

 

 

راحت ترین راه حل این است که از دو عنصر استفاده کنیم. یکی برای پس زمینه ای با طرح سنگی و دیگری برای پس زمینه ای با رنگ سفید. فقط کافی است تا بصورت زیر عمل کنیم:

 

something-meaningful {
  background: url(stone-art.jpg);
  background-size: cover;
  padding: 1em;
}
.something-meaningful > div {
  background: white;
  padding: 1em;
}

 

اما استفاده از دو عنصر, دو مشکل دارد. اول اینکه با این کار لایه ارائه و استایل را مخلوط کردیم. و دوم اینکه گاهی امکان تغییر دادن HTML و اضافه کردن عنصری دیگر وجود ندارد.

آیا می شود تنها با یک عنصر HTML این کار را انجام دهیم؟

پیشنیازها

1. آشنایی با انواع گرادینت ها
2. آشنایی با حاشیه تصویری
3. آشنایی با روش ساخت پس زمینه های راه راه
4. آشنایی با انیمیشن ها

 

راه حل

برای پیاده سازی چنین طرحی فقط با یک عنصر, کافی است تا از دو پس زمینه استفاده کنیم. پس زمینه اول سفید باشد و پس زمینه دوم طرح و تصویر مورد نظر. چون در اینجا نمی توانیم از رنگ به عنوان پس زمینه استفاده کنیم و حتما باید پس زمینه از نوع تصویر باشد, کافی است از گرادینت برای ایجاد پس زمینه سفید استفاده کنیم.

همچنین برای اینکه یک پس زمینه در قسمت border نمایش داده شود و پس زمینه دیگر فقط تا قسمت padding, کافی است تا از ویژگی background-clip بهره لازم را ببریم.

اولین تلاشمان بصورت زیر خواهد بود:

 

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
            url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;

 

واضح است که این نتیجه مطلوب ما نیست. کافی است تا background-origin را طوری مقدار دهی کنیم تا پس زمینه از زیر قسمت حاشیه ترسیم شود. (برای آشنایی با ویژگی های مختلف در مورد پس زمینه ها به قسمت مرجع مراجعه کنید)

 

background-origin: border-box;

 

و در نهایت می توانیم از طریق ویژگی background کد خلاصه تری داشته باشیم:

 

padding: 1em;
border: 1em solid transparent;
background:
  linear-gradient(white, white) padding-box,
  url(stone-art.jpg) border-box 0 / cover;

 

دموی زیر برای بررسی بیشتر آماده شده است:

 

See the Pen Continuous image borders by Mojtaba Seyedi (@seyedi) on CodePen.

 

با تلفیق این تکنیک و پس زمینه های راه راه می توانیم به طرح هایی مثل طرح حاشیه پاکت نامه هم برسیم:

 

 

 

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%)
            0 / 5em 5em;

 

برخلاف طرح قبلی, این طرح با استفاده از border-image هم قابل اجرا است:

 

padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);

 

در این طرح استفاده از border-image مشکلات زیر را خواهد داشت:

• هر بار که نیاز باشد border-image-slice را تغییر دهیم باید border-width را نیز بروز کنیم.
• در ویژگی border-image-slice امکان استفاده از em نیست و برای تعیین عرض حاشیه, محدود به پیکسل خواهیم بود.
• color-stop ها نیز باید در زمان تغییر ضخامت بروزرسانی شوند. که این موجب می شود نیاز به چهار تغییر داشته باشیم.

 

See the Pen Vintage envelope themed border by Mojtaba Seyedi (@seyedi) on CodePen.

 

طرح دیگری که با استفاده از این تکنیک می توان ساخت, حاشیه ای است که شبیه به رژه مورچه ها می باشد. از این نوع طرح ها در نرم افزارهای گرافیکی برای اینکه نشان دهند که یک ناحیه انتخاب شده است, استفاده می شود.

 

 

به همان روش که طرح نامه را ساختیم عمل می کنیم. با این تفاوت که رنگ ها را تبدیل به سفید و سیاه می کنیم و عرض حاشیه را به 1 پیسکل کاهش می دهیم تا شبیه به خط چین شود و یک مقدار مناسب برای background-size تعیین می کنیم و در نهایت background-position را به مقدار 100% انیمیشن می دهیم.

 
 

@keyframes ants { to { background-position: 100% 100% } }

div {
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box,
              repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;
  animation: ants 12s linear infinite;
}

 

 

See the Pen Marching ants border by Mojtaba Seyedi (@seyedi) on CodePen.

 

ساخت این طرح با border-image نیز قابل پیاده سازی است. فقط کافی است فایلی از نوع GIF به ویژگی border-image-source بدهیم و بقیه مقادیر را بصورت مناسب تعیین کنیم:

 

See the Pen marching ants with border-image by Mojtaba Seyedi (@seyedi) on CodePen.

 

همچنین جا دارد که با نحوه ساخت پانویس ها با استفاده از border-image نیز آشنا شویم. برای ساخت چنین طرحی کافی است تا از گرادینت ها به عنوان تصویری برای ویژگی border-image استفاده کنیم تا بتوانیم حاشیه ای با حالت نیمه رنگ شده بسازیم:

 

border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(to left, currentColor 4em, transparent 0);
padding-top: 1em;

 

چون داریم از واحد em استفاده می کنیم, با تغییر اندازه متن پانویس, بصورت خودکار ضخامت حاشیه بالای آن بروز می شود. همچنین چون از currentColor استفاده می کنیم, با تغییر رنگ متن پانویس, رنگ حاشیه بالای آن نیز تغییر خواهد کرد.

 

See the Pen footnote area by Mojtaba Seyedi (@seyedi) on CodePen.

 

منبع

• CSS Secrets By Lea Verou