حاشیه های نیمه شفاف

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

به احتمال زیاد با ساخت رنگ های نیمه شفاف در 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;
}

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

 
border-test
 

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

 

راه حل

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

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

dashed border

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

حال کافی است که از ویژگی 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.

 

منبع

2 دیدگاه برای “ساخت حاشیه نیمه شفاف

  1. سلام
    تازه با سایتتون آشنا شدم
    فوق العاده هستیییییییییییییییییییییییید :)
    واقعا آموزشهاتون شگفت زده کرده منو

    سایتتون رو به اشتراک میذارم حتما p:

    لطفا فوتری که همین سایت داره رو هم آموزش بدید

    باسپااااااااااااااس فراوان

    1. سلام. ممنونم

      مدل ساده این نوع فوتر رو اینجا ساختم می تونید چکش کنید:

      https://jsbin.com/rihosot/1/edit?html,css,output

      این مطلب رو هم ببنید برای اینکه روش بهتر چسبوندن فوتر به پایین صفحه رو بشناسید (ویدیو پایین صفحه)

      http://css-tricks.ir/?p=6102

      با آرزوی موفقیت برای شما.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *