جهت ورود به تالار گفتمان سایت کلیک کنید


آموزش تابع Calc ( محاسبات ریاضی ) در Css3

از سری آموزش های کدنویسی Css3 برای این پست از سایت اسکریپت دات کام به آموزش یک تابع به نام calc میپردازم …

این تابع تقریبا جدید , میتواند جهت طراحی سایت های ریسپانسیو کمک بسیاری به توسعه دهندگان وب کند .

کاربرد تابع calc() در مواقعی است که نیاز به تلفیق واحدهای اندازه گیری نسبی و مطلق به منظور ایجاد یک طرح انعطاف پذیر می باشد.

در این تابع میتوان 4 عمل اصلی ریاضی را اعمال و از آنها استفاده نمود .

آموزش تابع Calc ( محاسبات ریاضی ) در Css3

برای استفاده از این تابع کافیست در مقابل خاصیت هایی مانند width , height , margin , padding و font-size از این تابع استفاده نمود .

در داخل پرانتز این تابع میتوانید از 4 عمل اصلی + , – , / و * استفاده نمایید .

برای یک مثال ساده : فرض کنید میخواهید پهنای یک div با کلاس vms که %100 والد خود است را در css کدنویسی کنید :

div.vms{
	width:100%;	
}

حال شاید میخواهید از %100 , مقدار 50px کمتر باشد . طبیعتا چون دو واحد اندازه گیری مجزا هستند , بدون دانستن این تابع نمیتوان کاری کرد .

اما از هم اکنون شما میتوانید با استفاده از این تابع , این کار را به صورت زیر انجام دهید :

div.vms{
	width:calc(100% - 30px);
}

 و یا به عنوان مثالی دیگر : 

سه div که دارای کلاس های یکسان vms هستند ومیخواهیم همیشه دارای طولی به اندازه یک سوم والد خود داشته باشند .

در html :

<div class="vms">A</div>
<div class="vms">B</div>
<div class="vms">C</div>

در css :

div.vms{
	width:calc(100% / 3);
}

برای پیش نمایش کلیک کنید

پخش اختصاصی

گرداوری : وحید مجیدی

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

5 پاسخ به “آموزش تابع Calc ( محاسبات ریاضی ) در Css3”

  1. تقی غفاری گفت:

    ممنونم تشکر از اینکه راهنمایی کردید.

  2. دانیال رحیمی گفت:

    عالی بود!!!
    خیلی ممنون از اینکه به اشتراک گذاشتینش!

  3. اخبار گفت:

    سلام
    ممنون جالب بود.

  4. هاشم علیان گفت:

    تابع فوق کاربردی بود

    مرسی از اسکریپت دات کام , مرسی از استاد مجیدی

دیدگاهتان را بنویسید

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