ساخت حاشیه نیمه شفاف

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

اگر نگران مرورگر ie8 هستید همیشه می توانید بصورت زیر عمل کنید:

.element {
  background-color: #000; /* IE8 Fallback */
  background-color: hsla(0,0,0,0.5);
}

اینطوری با اطمینان می توانید از رنگ های نیمه شفاف استفاده کنید.(هیچوفت فقط برای یک مرورگر زیبایی را فدا نکنیم :) )

صورت مسئله

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

 

 

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

.element {
  border: 30px solid hsla(0,0%,100%,.5);
  background: white;
}

اگر درک عمیقی در مورد نحوه رفتار پس زمینه و حاشیه نداشته باشید نتیجه زیر برای شما غافل گیر کننده خواهد بود:

 

 

پس حاشیه کجا رفت؟ اگر با شفاف کردن حاشیه نمی توانیم به نتیجه برسیم پس راه حل چه خواهد بود؟

 

راه حل

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

برای تست این موضوع بهتر است به یک عنصر که پس زمینه دارد حاشیه ای از نوع dashed بدهید تا کاملا موضوع شفاف شود:

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

حال کافی است که از ویژگی background-clip برای حل این مسئله استفاده کنیم.
با استفاده از این ویژگی می توانیم رفتار ترسیم پس زمینه را تغییر دهیم تا فقط پس زمینه در ناحیه محتوا و فاصله داخلی (padding) ترسیم شود.

 

.element {
  border: 30px solid hsla(0,0%,100%,.5);
  background: white;
  background-clip: padding-box;
}

 

در دموی زیر با تغییر مقادیر به درک بهتر موضوع کمک کنید:

 

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

 

منبع

• CSS Secrets By Lea Verou