خانه آموزش CSS آموزش CSS پیشرفته آموزش کار با توابع یا Functions در CSS3

آموزش کار با توابع یا Functions در CSS3

توسط

۱۳۹۸-۰۹-۲۳

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با توابع یا Functions در CSS3 با من همراه باشید.

آموزش کار با توابع یا Functions در CSS3

Free-Learn

آنچه در این جلسه میخوانید :

1 توابع یا Functions در CSS3
2 کار با توابع یا Functions در CSS3
3 کار با تابع ()Attr در CSS3
4 کار با تابع ()Calc در CSS3
5 کار با تابع ()Var در CSS3
6 کار با تابع ()Rgba در CSS3
7 کار با تابع ()Hsla در CSS3
8 کار با تابع ()Cubic-Bezier در CSS3
9 کار با تابع ()Linear-Gradient در CSS3
10 کار با تابع ()Radial-Gradient در CSS3

توابع یا Functions در CSS3

یسری تابع یا Function در CSS وجود دارد که ما با استفاده از آنها میتوانیم کارهای عملیاتی را روی یک عنصر در یک صفحه وب پیاده نماییم.

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

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

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

Free-Learn

کار با توابع یا Functions در CSS3

در این جلسه و در ادامه میخواهیم با توابع زیر در CSS3 آشنا شویم : لطفا تا پایان این جلسه با من همراه باشید.

Attr() : کار روی صفت های یک عنصر
Calc() : انجام محاسبات جهت تنظیم اندازه ها
Var() : برای تعریف متغیرها در یک صفحه وب
Rgba() : برای تعریف رنگ یک عنصر با قابلیت تنظیم شفافیت
Hsla() : روش دیگری برای تعریف رنگ یک عنصر با قابلیت تنظیم شفافیت
Cubic-Bezier() : استفاده از مکعب بزیر
Linear-Gradient() : برای تعریف رنگ گریدینت بصورت خطی
Radial-Gradient() : برای تعریف رنگ گریدینت بصورت دایره ای

Free-Learn

کار با تابع ()Attr در CSS3

با استفاده از این تابع در CSS3 ما میتوانیم صفت یک عنصر را در یک صفحه ی وب بدست آوریم یا ( میتونیم همانند انتخابگرها آن را انتخاب کنیم ) سپس عملیات مورد نظرمون رو روش پیاده کنیم.

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

attr(attribute_name)

1	attr(attribute_name)

attribute_name : نام اون صفتی که میخوایم انتخاب کنیم

مثال شماره ۱ : استفاده در CSS جهت بدست آوردن آدرس URL یک لینک

<style>

a:after {
 content: " (" attr(href) ") ";
 display:none;
}

span#test:hover a:after{
 display:inline-block;
}

</style>

<style>

a:after {

content: " (" attr(href) ") ";

display:none;

}

span#test:hover a:after{

display:inline-block;

}

</style>

امتحان کنید

مثال شماره ۲ : بدست آوردن Class و Id تگ Div

<style>

div:before{
 content:" (" attr(class) ") ";
 color:red;
}

div:after{
 content:" (" attr(id) ") ";
 color:blue;
}

</style>

<style>

div:before{

content:" (" attr(class) ") ";

color:red;

}

div:after{

content:" (" attr(id) ") ";

color:blue;

}

</style>

امتحان کنید

مثال شماره ۳ : استفاده از صفت مَن درآوردی (یعنی صفتی که جز صفت های HTML نیست و همینجوری خودمون درستش میکنیم)

<style>

div:after{
 content:" (" attr(freelearn) ") ";
 color:blue;
}

</style>

<style>

div:after{

content:" (" attr(freelearn) ") ";

color:blue;

}

</style>

امتحان کنید

Free-Learn

کار با تابع ()Calc در CSS3

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

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

calc(expression)

1	calc(expression)

expression : استفاده از عبارات ریاضی برای محاسبات

برخی از عبارات ریاضی ( عملگرهایی ) که میتوانیم در این تابع استفاده نماییم :

+ جمع
– تفریق
* ضرب
/ تقسیم

مثال شماره ۱ : محاسبه اندازه عرض یک عنصر با استفاده از تابع calc

<style>

div{
 background-color:#5db616;
 color:#fff;
 width:calc(30% + 20%);
}

</style>

<style>

div{

background-color:#5db616;

color:#fff;

width:calc(30% + 20%);

}

</style>

امتحان کنید

مثال شماره ۲ : انجام عمل تقسیم برای محاسبه اندازه Padding یک عنصر

<style>

div{
 background-color:#5db616;
 color:#fff;
 padding:calc(20px / 2);
}

</style>

<style>

div{

background-color:#5db616;

color:#fff;

padding:calc(20px / 2);

}

</style>

امتحان کنید

Free-Learn

کار با تابع ()Var در CSS3

در ادامه آموزش کار با توابع یا Functions در CSS3 میخواهیم با تابع Var آشنا شویم ، با استفاده از این تابع میتوان ویژگی های سفارشی ( که توسط خودمون ایجاد میشن ) بهمراه مقادیر سفارشی ایجاد نماییم و از آنها در صفحه وبمان به راحتی استفاده نماییم.

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

var(custom_property_name, value)

1	var(custom_property_name, value)

custom_property_name : نام ویژگی دلخواه ما – ضروری
value : مقدار جایگزین : درصورتی که ویژگی دلخواه ما عمل نکرد – اختیاری

مثال شماره ۱ : تعریف ویژگی های دلخواه مان در قسمت ریشه یا root یک صفحه وب

<style>

:root{
 --mybgcolor:#5db616;
 --mytextcolor:#fff;
 --mypadding:15px;
 --mytextcenter:center;
}

div{
 background-color:var(--mybgcolor);
 color:var(--mytextcolor);
 padding:var(--mypadding);
 text-align:var(--mytextcenter);
}

</style>

<style>

:root{

--mybgcolor:#5db616;

--mytextcolor:#fff;

--mypadding:15px;

--mytextcenter:center;

}

div{

background-color:var(--mybgcolor);

color:var(--mytextcolor);

padding:var(--mypadding);

text-align:var(--mytextcenter);

}

</style>

امتحان کنید

مثال شماره ۲ : استفاده از مقدار جایگزین (در این مثال ویژگی mytextcenter اصلا وجود ندارد پس در اینصورت از مقدار جایگزین استفاده خواهد کرد )

div{
 text-align:var(--mytextcenter,center);
}

div{

text-align:var(--mytextcenter,center);

}

امتحان کنید

Free-Learn

کار با تابع ()Rgba در CSS3

اگر بخش آموزش رنگ ها را در فری لرن مشاهده و مطالعه کرده باشید میدانید که ما چندین روش برای استفاده از رنگ ها در یک صفحه وب داریم.

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

پشنهاد میکنم آموزش کار با کد RGBA رنگ ها در طراحی وب را مشاهده نمایید.

شکل کلی کدرنگ RGBA بصورت زیر می باشد :

rgba(red, green, blue, alpha)

1	rgba(red, green, blue, alpha)

red : رنگ قرمز مقداری از ۰ تا ۲۵۵
green : رنگ سبز مقداری از ۰ تا ۲۵۵
blue : رنگ آبی مقداری از ۰ تا ۲۵۵
alpha : مقدار آلفا مقداری از ۰٫۰ تا ۱٫۰

مثال :

<style>

div.t1{ background-color:rgba(0,204,0,0.2); }
div.t2{ background-color:rgba(0,204,0,0.4); }
div.t3{ background-color:rgba(0,204,0,0.6); }
div.t4{ background-color:rgba(0,204,0,0.8); }
div.t5{ background-color:rgba(0,204,0,1); }

</style>

<style>

div.t1{ background-color:rgba(0,204,0,0.2); }

div.t2{ background-color:rgba(0,204,0,0.4); }

div.t3{ background-color:rgba(0,204,0,0.6); }

div.t4{ background-color:rgba(0,204,0,0.8); }

div.t5{ background-color:rgba(0,204,0,1); }

</style>

امتحان کنید

Free-Learn

کار با تابع ()Hsla در CSS3

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

پشنهاد میکنم آموزش کار با کد HSLA رنگ ها در طراحی وب را مشاهده نمایید.

شکل کلی کدرنگ HSLA بصورت زیر می باشد :

hsla(hue, saturation, lightness, alpha)

1	hsla(hue, saturation, lightness, alpha)

hue : از ۰ تا ۳۶۰ مقدار میپذیرد – ۰ یعنی قرمز – ۱۲۰ یعنی سبز – ۲۴۰ یعنی آبی
saturation : میزان اشباع رنگ را بصورت درصدی (%) مشخص میکند
lightness : میزان روشنایی رنگ را بصورت درصدی (%) مشخص میکند
alpha : میزان شفافیت رنگ از ۰٫۰ تا ۱٫۰

مثال :

<style>

div.t1{ background-color:hsla(290,100%,50%,0.2); }
div.t2{ background-color:hsla(290,100%,50%,0.4); }
div.t3{ background-color:hsla(290,100%,50%,0.6); }
div.t4{ background-color:hsla(290,100%,50%,0.8); }
div.t5{ background-color:hsla(290,100%,50%,1); }

</style>

<style>

div.t1{ background-color:hsla(290,100%,50%,0.2); }

div.t2{ background-color:hsla(290,100%,50%,0.4); }

div.t3{ background-color:hsla(290,100%,50%,0.6); }

div.t4{ background-color:hsla(290,100%,50%,0.8); }

div.t5{ background-color:hsla(290,100%,50%,1); }

</style>

امتحان کنید

Free-Learn

کار با تابع ()Cubic-Bezier در CSS3

اگر آموزش کار با ترنزیشن ها یا Transitions را در CSS3 دنبال کرده باشید میدانید که ما اونجا با تابع Cubic-Bezier کار کردیم و باهاش آشنا هستیم.

بطور کلی تر با استفاده از این تابع میتوان مشخص کرد که مثلا یک انیمیشن در طول زمان اجرا ، به چه شکل اجرا شود، ( مثلا اولش آروم شروع بشه و وسطاش تند شه و در پایان دوباره آروم و… )

P0 نقطه شروع و P3 نقطه پایان می باشد که این نقاط همیشه ثابت می باشند و دارای مقادیری به ترتیب (۰,۰) و (۱,۱) می باشند و همچنین این مقادیر قابل تغییر نمی باشند.

و فقط نقاط P1 و P2 ( که میشه منحنی اجرا ) رو میتونیم با استفاده از مقادیری بین ۰ تا ۱ ( یا ۰٫۰ تا ۱٫۰ ) به دلخواه خودمون مشخص کنیم.

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

cubic-bezier(x1,y1,x2,y2)

1	cubic-bezier(x1,y1,x2,y2)

x1 , y1, x2 , y2 : هر یک مقداری از ۰ تا ۱ میپذیرن

مثال : استفاده در ویژگی Transition-Timing-Function

div.t1{
 transition-timing-function:cubic-bezier(1,0.2,1,1);
}

div.t1{

transition-timing-function:cubic-bezier(1,0.2,1,1);

}

امتحان کنید

Free-Learn

کار با تابع ()Linear-Gradient در CSS3

در ادامه این جلسه با آموزش کار با توابع یا Functions در CSS3 میخواهیم با رنگ گریدینت یا به انگلیسی Gradient آشنا شویم.

گریدینت رنگی است که از ترکیب چندین رنگ دیگر بدست می آید، پیشنهاد میکنم حتما آموزش کار با رنگ Gradient در طراحی وب را مشاهده نمایید.

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

background-image: linear-gradient(direction, color1, color2, ...);

1	background-image: linear-gradient(direction, color1, color2, ...);

direction : جهت پاشیدن رنگ را مشخص میکند
color1 : رنگ اول
color2 : رنگ دوم

مثال : پاشیدن رنگ از سمت راست به چپ با ۴ رنگ

div{
 background-image:linear-gradient(to right,red,blue,yellow,green);
}

div{

background-image:linear-gradient(to right,red,blue,yellow,green);

}

امتحان کنید

Free-Learn

کار با تابع ()Radial-Gradient در CSS3

Radial–Gradient شکل دیگری از رنگ های ترکیبی می باشد که با استفاده از آن میتوان رنگ را بصورت دایره های ( با شعاع مشخص ) پاشید.

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

background-image: radial-gradient(shape size at position, start-color, color1,color2,... , last-color);

1	background-image: radial-gradient(shape size at position, start-color, color1,color2,... , last-color);

shape size at position : نوع و اندازه شکل را مشخص میکند
strat-color : رنگ شروع
last-color : رنگ پایانی

مثال شماره ۱ : پاشیدن رنگ از وسط

div{
 background-image: radial-gradient(circle, black, blue, red,yellow);
}

div{

background-image: radial-gradient(circle, black, blue, red,yellow);

}

امتحان کنید

مثال شماره ۲ : پاشیدن رنگ از سمت بالا راست

div{
 background-image: radial-gradient(circle at top right, yellow, #f06d06);
}

div{

background-image: radial-gradient(circle at top right, yellow, #f06d06);

}

امتحان کنید

خب دوستان خسته نباشید میگم بهتون ، به پایان این جلسه ( آموزش کار با توابع یا Functions در CSS3 ) رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید.

Free-Learn

دریافت PDF یا پرینت این مطلب