• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید تا کنون 6335 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

1 4893 ۹ فروردین ۹۳

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

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

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

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

transparentbordersf7 inet-plus-projacts-ui-kit

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

CSS:

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

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

example1

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

CSS:

نتیجه:

box-shadow

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

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

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

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

box-shadow:

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

مثال:

HTML:

CSS:

نتیجه:

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:

CSS:

نتیجه:

example1

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

HTML:

CSS:

نتیجه:

box-shadow

 

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها یک نظر ارسال شده است.

  • ‏‏

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram