تخفیف ویژه

ترفند ایجاد حاشیه های شفاف با استفاده از CSS

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۰۹ فروردین ۱۳۹۳

بنام خداوند بخشنده و مهربان

با سلام خدمت همگی دوستان سون لرنی.امیدوارم امسال یکی از بهترین سال‌های عمرمون باشه و در این سال، یعنی سال 1393 ،به موفقیت‌های بسیاری برسیم.امروز با آموزش یک ترفند در خدمت شما هستم.

حاشیه‌های شفاف

خب اول باید بدونید که منظورم از حاشیه‌های شفاف چی هست و معمولا کجا ازشون استفاده میکنند.خب اول نمونه هایی رو ببینید.

transparentbordersf7 inet-plus-projacts-ui-kit

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

CSS:

border: 7px solid rgba(0,0,0,0.5);

اگه به باکس، خاصیت هایی چون background-color و یا background-img داده باشید، یک مشکلی هست؛ و اون این هست که:

چون خاصیت border داخل باکس اعمال میشه، نتیجه به صورت زیر خواهد بود.

example1

خیلی‌ها هستند که برای حل این مشکل یه راه طولانی رو میرن.خب راهشون اینه که : باکس مورد نظر رو داخل یک div دیگه قرار میدن و به اون div، بوردر با رنگ شفاف ( با تابع ()rgba ) میدن.یعنی کدی شبیه کدهای زیر:

<!-- HTML code -->
<div class="wrap">
    <div class="inner"></div>
</div>

CSS:

div.wrap {
    height: 400px;
    width: 400px;
    border: 5px solid rgba(0,0,0, 0.5);
    border-radius: 5px;
}

div.inner {
    background: #FFF;
    height: 100%;
    width: 100%; 

}

نتیجه:

box-shadow

خب راه حل کوتاه و کاربردی چیه؟! در جواب باید بگم که دوتا راه حل وجود داره که راه نخست خیلی ساده هست:

روش اول : استفاده از خاصیت box-shadow به جای border

معمولا بین کدنویس‌ها دو باور غلط درباره ی خاصیت box-shadow وجود داره که عبارتند از:

  1. از خاصیت box-shadow تنها برای ایجاد سایه استفاده میشه(یعنی باید همیشه مقدار blur عددی بزرگتر از 0 باشه)
  2. خاصیت box-shadow  تنها چهار مقدارمیگیره ؛ یعنی مقادیر داخلی(inset) ، افقی ، عمودی و خیرگی (blur) ( که مقدار spread یا گسترش از جا می‌افته).

box-shadow:

box-shadow: inset horizontal vertical blur spread colour;

معمولا مقدار spread یا همون گسترش کمی نا آشناست.خب روش کار ما این است که در این موارد، مقدار blur رو برابر 0 قرار میدیم و از سه مقدار دیگه یعنی گسرش ، افقی و عمودی استفاده میکنیم.چیزی مثل کد زیر:

box-shadow: 0px 0px 0px 7px rgba(0,0,0,0.5);

مثال:

HTML:

<div>Hello World!</div>

CSS:

div {
  background: #fff;
  margin: 0 auto;
  width: 200px;
  padding: 100px;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box shadow */
  -webkit-box-shadow: 0 0 0 7px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 0 0 7px rgba(0,0,0,0.5);
  box-shadow: 0 0 0 7px rgba(0,0,0,0.5);
}

نتیجه:

box-shadow

 

 

روش دوم: استفاده از خاصیت border همراه با خاصیت background-clip

ابتدا باید بدونیم خاصیت background-clip چی هست و باید کجا ازش استفاده کنیم.به تصویر زیر توجه کنید.

background-clip

میشه گفت که خاصیت background-clip ، به خاصیت box-sizing بسیار شباهت داره. خاصیت background-clip تعیین میکنه که بکگراند تا چه قسمتی از باکس محدود بشه.مثلا تا border یا padding و یا content.یعنی اگه این خاصیت رو برابر padding-box قرار بدیم ، border در بیرون باکس اعمال میشه.

خب حالا چه طوری با استفاده از border ، حاشیه‌های شفاف درست کنیم؟ابتدا مقدار خاصیت background-clip را برابر padding-box قرار میدیم و بعد هم از خاصیت border استفاده میکنیم.

مثلال اول (بدون خاصیت background-clip ):

HTML:

<div>Hello World!</div>

CSS:

div {
  background: #fff;
  margin: 0 auto;
  width: 200px;
  padding: 100px;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* border */
	border: 7px solid  rgba(0,0,0,0.5);
}

نتیجه:

example1

مثال دوم ( همراه با خاصیت background-clip ) :

HTML:

<div>Hello World!</div>

CSS:

div {
  background: #fff;
  margin: 0 auto;
  width: 200px;
  padding: 100px;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* border */
  border: 7px solid  rgba(0,0,0,0.5);
  /* background clip */
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}

نتیجه:

box-shadow

 

امیدوارم این ترفند برای شما مفید واقع بوده باشه.

موفق و پیروز باشید

چه امتیازی به این مقاله می دید؟
نویسنده علی امینی
یک وب دیزاینر هستم که میشه گفت بر زبان های HTML, CSS, JavaScript مسلطم و همیشه با کتابخانه jQuery کار میکنم. از میان زبان های سمت سرور PHP رو میپسندم و CMS مورد علاقه من WordPress هست. هیچ IDE نمیتونه جای SublimeText رو برام بگیره و همیشه خودمو به روز نگه میدارم و به کدنویسی عشق می ورزم.

نظرات کاربران

علی

عالی و کاربردی بود!

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :