آموزش رایگان و کامل کار با توابع یا Functions در CSS3
توابع یا Functions در CSS3
فهرست عناوین
یسری تابع یا Function در CSS وجود دارد که ما با استفاده از آنها میتوانیم کارهای عملیاتی را روی یک عنصر در یک صفحه وب پیاده نماییم.
بفرض مثال من میخوام در یک صفحه وب قبل از تمامی لینک های موجود در اون صفحه ، متن قرار بگیره ، یا مثلا میتونم صفت های یک عنصر را با استفاده از توابع فراخوانی و سپس هرکاری دوس داشتم روشون انجام بدم.
پس بطور کلی با استفاده از توابع یا Functions در CSS3 ما میتوانیم کارهای خاص تر و پیشرفته تری را روی عناصر در یک صفحه وب انجام دهیم.
بیش از ده ها تابع در CSS وجود دارد ولی خب من همه ی این توابع رو در این جلسه آموزش نمیدم و فقط چندین تابع مهم و کاربردی رو آموزش میدم ، تا ان شاالله که کمی بعدتر تک تک این توابع را بصورت جداگانه آموزش دهم.
کار با توابع یا Functions در CSS3
در این جلسه و در ادامه میخواهیم با توابع زیر در CSS3 آشنا شویم : لطفا تا پایان این جلسه با من همراه باشید.
- Attr() : کار روی صفت های یک عنصر
- Calc() : انجام محاسبات جهت تنظیم اندازه ها
- Var() : برای تعریف متغیرها در یک صفحه وب
- Rgba() : برای تعریف رنگ یک عنصر با قابلیت تنظیم شفافیت
- Hsla() : روش دیگری برای تعریف رنگ یک عنصر با قابلیت تنظیم شفافیت
- Cubic-Bezier() : استفاده از مکعب بزیر
- Linear-Gradient() : برای تعریف رنگ گریدینت بصورت خطی
- Radial-Gradient() : برای تعریف رنگ گریدینت بصورت دایره ای
کار با تابع ()Attr در CSS3
با استفاده از این تابع در CSS3 ما میتوانیم صفت یک عنصر را در یک صفحه ی وب بدست آوریم یا ( میتونیم همانند انتخابگرها آن را انتخاب کنیم ) سپس عملیات مورد نظرمون رو روش پیاده کنیم.
شکل کلی برای استفاده از این تابع بصورت زیر می باشد :
- attribute_name : نام اون صفتی که میخوایم انتخاب کنیم
مثال شماره ۱ : استفاده در CSS جهت بدست آوردن آدرس URL یک لینک
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> a:after { content: " (" attr(href) ") "; display:none; } span#test:hover a:after{ display:inline-block; } </style> |
مثال شماره ۲ : بدست آوردن Class و Id تگ Div
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> div:before{ content:" (" attr(class) ") "; color:red; } div:after{ content:" (" attr(id) ") "; color:blue; } </style> |
مثال شماره ۳ : استفاده از صفت مَن درآوردی (یعنی صفتی که جز صفت های HTML نیست و همینجوری خودمون درستش میکنیم)
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div:after{ content:" (" attr(freelearn) ") "; color:blue; } </style> |
بیشتر بخوانیم:
کار با تابع ()Calc در CSS3
با استفاده از این تابع میتوان عملیات محاسبات رو روی مقدار یک ویژگی انجام داد، مثلا میتونیم با استفاده از این تابع اندازه عرض یک عنصر رو مشخص نماییم.
شکل کلی برای استفاده از این تابع بصورت زیر می باشد :
- expression : استفاده از عبارات ریاضی برای محاسبات
برخی از عبارات ریاضی ( عملگرهایی ) که میتوانیم در این تابع استفاده نماییم :
- + جمع
- – تفریق
- * ضرب
- / تقسیم
مثال شماره ۱ : محاسبه اندازه عرض یک عنصر با استفاده از تابع calc
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> div{ background-color:#5db616; color:#fff; width:calc(30% + 20%); } </style> |
مثال شماره ۲ : انجام عمل تقسیم برای محاسبه اندازه Padding یک عنصر
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> div{ background-color:#5db616; color:#fff; padding:calc(20px / 2); } </style> |
کار با تابع ()Var در CSS3
در ادامه آموزش کار با توابع یا Functions در CSS3 میخواهیم با تابع Var آشنا شویم ، با استفاده از این تابع میتوان ویژگی های سفارشی ( که توسط خودمون ایجاد میشن ) بهمراه مقادیر سفارشی ایجاد نماییم و از آنها در صفحه وبمان به راحتی استفاده نماییم.
شکل کلی برای استفاده از این تابع بصورت زیر می باشد :
|
1 |
var(custom_property_name, value) |
- custom_property_name : نام ویژگی دلخواه ما – ضروری
- value : مقدار جایگزین : درصورتی که ویژگی دلخواه ما عمل نکرد – اختیاری
مثال شماره ۱ : تعریف ویژگی های دلخواه مان در قسمت ریشه یا root یک صفحه وب
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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> |
کار با تابع ()Rgba در CSS3
یکی از این روش ها استفاده از مقدار Rgba می باشد، این روش در واقع همان Rgb می باشد ولی در Rgba با اضافه شدن مقدار یا کانال آلفا میتوانیم میزان شفافیت رنگ را مشخص نماییم.
شکل کلی کدرنگ RGBA بصورت زیر می باشد :
|
1 |
rgba(red, green, blue, alpha) |
- red : رنگ قرمز مقداری از ۰ تا ۲۵۵
- green : رنگ سبز مقداری از ۰ تا ۲۵۵
- blue : رنگ آبی مقداری از ۰ تا ۲۵۵
- alpha : مقدار آلفا مقداری از ۰٫۰ تا ۱٫۰
مثال :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
کار با تابع ()Cubic-Bezier در CSS3
اگر آموزش کار با ترنزیشن ها یا Transitions را در CSS3 دنبال کرده باشید میدانید که ما اونجا با تابع Cubic-Bezier کار کردیم و باهاش آشنا هستیم.
بطور کلی تر با استفاده از این تابع میتوان مشخص کرد که مثلا یک انیمیشن در طول زمان اجرا ، به چه شکل اجرا شود، ( مثلا اولش آروم شروع بشه و وسطاش تند شه و در پایان دوباره آروم و… )
P0 نقطه شروع و P3 نقطه پایان می باشد که این نقاط همیشه ثابت می باشند و دارای مقادیری به ترتیب (۰,۰) و (۱,۱) می باشند و همچنین این مقادیر قابل تغییر نمی باشند.
و فقط نقاط P1 و P2 ( که میشه منحنی اجرا ) رو میتونیم با استفاده از مقادیری بین ۰ تا ۱ ( یا ۰٫۰ تا ۱٫۰ ) به دلخواه خودمون مشخص کنیم.
شکل کلی برای استفاده از این تابع بصورت زیر می باشد :
|
1 |
cubic-bezier(x1,y1,x2,y2) |
- x1 , y1, x2 , y2 : هر یک مقداری از ۰ تا ۱ میپذیرن
کار با تابع ()Linear-Gradient در CSS3
در ادامه این جلسه با آموزش کار با توابع یا Functions در CSS3 میخواهیم با رنگ گریدینت یا به انگلیسی Gradient آشنا شویم.
گریدینت رنگی است که از ترکیب چندین رنگ دیگر بدست می آید، پیشنهاد میکنم حتما آموزش کار با رنگ Gradient در طراحی وب را مشاهده نمایید.
شکل کلی برای استفاده از این تابع بصورت زیر می باشد :
|
1 |
background-image: linear-gradient(direction, color1, color2, ...); |
- direction : جهت پاشیدن رنگ را مشخص میکند
- color1 : رنگ اول
- color2 : رنگ دوم
مطالب زیر را حتما مطالعه کنید
آموزش انیمیشن‌سازی با CSS
نحوه اضافه کردن کد PHP در وردپرس
دوره رایگان طراحی فروشگاه اینترنتی!
آموزش ایجاد لیست کشویی وابسته به هم در HTML
ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید
دیدگاهتان را بنویسید