حاشیه های چندگانه در css

حاشیه های چندتايي

صورت مسئله

هنوز هم گاهی این سوال مطرح می شود که آیا نیاز است که همانطور که می توانیم چند پس زمینه برای یک عنصر تعیین کنیم, بتوانیم چند حاشیه (border) نیز برای یک عنصر خاص تعیین کنیم؟

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

 

راه حل اول: استفاده از box-shadow

اگر اندازه box-shadow را یک عدد مثبت تعیین کنیم و همینطور مقدار مات شدن آن را برابر با صفر قرار دهیم به نتیجه زیر خواهیم رسید که کاملا شبیه به حاشیه است:

 


  background: yellowgreen;
  box-shadow: 0 0 0 10px #655;

 

ساخت حاشیه با سایه در css

 
شاید بگویید این کار را که با ویژگی border هم می توانستیم انجام بدهیم. در جواب باید گفت موضوع جالب در مورد box-shadowها این است که می توانیم برای یک عنصر هر چندتا سایه که می خواهیم تعیین کنیم:
 


  background: yellowgreen;
  box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

 
سایه چندتایی در css
 

نکته ای که باید در ذهن داشته باشید این است که سایه ها بر روی هم چیده می شوند به این صورت که اولین سایه بالاترین لایه هست. همچنین محاسبه اندازه سایه باید با توجه سایه های قبلی محاسبه شود. در مثال بالا می خواستیم که یک حاشیه صورتی رنگ به اندازه 5px داشته باشیم. از آنجایی که سایه قبل از آن 10px بود در نتیجه اندازه آن را (10+5) برابر با 15px در نظر گرفتیم.

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

 


  background: yellowgreen;
  box-shadow: 0 0 0 10px #655,
              0 0 0 15px deeppink,
              0 2px 5px 15px rgba(0,0,0,.6);

 

multiple shadows in css

 

راه حل box-shadow به خوبی جواب می دهد اما نکات مهم زیر را حتما باید در نظر بگیرید:

box-shadowها کاملا شبیه به borderها عمل نمی کنند. زمانی که یک عنصر border دارد آن حاشیه بر عناصر مجاور تاثیر می گذارد یا به اصطلاح بر روی layout تاثیر دارد اما سایه ها این چنین نیستند و بودن آنها تاثیری بر مکان عنصر و جابجایی عناصر مجاور ندارد. اگرچه شما همیشه می توانید با اضافه کردن marginی به اندازه سایه های تعیین شده این رفتار را برای عنصر شبیه سازی کنید.

نکته دیگر اینکه وقتی از سایه ها استفاده می کنید با توجه داشته باشید که آنها قابل کلیک کردن و یا hover و غیره نیستند. اما این هم راه حل دارد همیشه می توانید با استفاده از کلمه کلیدی inset سایه ها را در داخل عنصر بوجود آورید و به اندازه قطر سایه ها به عنصر padding بدهید تا نتیجه یکسان داشته باشید. اما با این تفاوت که این بار حاشیه های شبیه سازی شده قابل کلیک و غیره هستند.

در دموی زیر با تغییر مقادیر به درک بهتر موضوع کمک کنید مثلا حاشیه های بیشتری شبیه سازی کنید. همچنین توجه کنید که حاشیه های مربع دومی با استفاده از inset ساخته شده است پس در نتیجه حاشیه ها قابل کلیک و hover هستند:

 

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

 

راه حل دوم: استفاده از outline

در برخی موارد که فقط نیاز به دو حاشیه داریم می توانیم از یک border معمولی و یک outline استفاده کنیم. در روش box-shadow ما نمی توانستیم حاشیه های بعدی را بصورت خط چین (dashed) و غیره داشته باشیم اما در این روش می توانیم.

اولین مثال بالا را با روش outline می توان به این صورت بوجود آورد:

 


    background: yellowgreen;
    border: 10px solid #655;
    outline: 15px solid deeppink;

 

سایه چندتایی در css
 

خوبیه دیگری که outline دارد این است که می توان فاصله آن را از مرزهای عنصر با استفاده از ویژگی outline-offset کنترل کرد و این ویژگی مقدار منفی نیز می پذیرد. مثلا نمونه زیر را می توان اینگونه ساخت:

outline منفی

 


    padding: 1em;
    border-radius: .4em;
    outline: 1px dashed #fff;
    outline-offset: -1em;
    background: #655;

 

اگرچه این روش محدودیت های زیر را دارد:

همانطور که گفته شد فقط می توان دو حاشیه بوجود آورد.

محدودیت دیگر اینکه اگر عنصر دارای border-radius باشد متاسفانه outline این حالت را پیدا نمی کند که البته این مورد از طرف CSS WG یک باگ شناخته شده است و در آینده حل خواهد شد.

 
outline-bug
 

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

منبع