الفرق بين المراجعتين لصفحة: «Sass/opacify»
< Sass
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) ط مراجعة الصفحة وتدقيقها. |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: الدالة <code>()opacify</code> في Sass}}</noinclude> | <noinclude>{{DISPLAYTITLE: الدالة <code>()opacify</code> في Sass}}</noinclude> | ||
تجعل الدالة <code>()opacify</code> (تٌسمّى | تجعل الدالة <code>()opacify</code> (تٌسمّى أيضًا <code>fade_in</code>) اللون أكثر عتامةً. يمرَّر إليها لونًا وعددًا بين 0 و 1 ثمَّ تعيد ذلك اللون بعد زيادة عتامته بحسب القيمة الأخيرة. | ||
== البنية العامة == | == البنية العامة == | ||
<syntaxhighlight lang="sass"> | <syntaxhighlight lang="sass"> | ||
| سطر 9: | سطر 9: | ||
=== <code>$color</code> === | === <code>$color</code> === | ||
اللون المراد زيادة عتامته. | |||
=== <code>$ | === <code>$amount</code> === | ||
مقدار زيادة العتامة. | قيمة عددية تتراوح بين 0 و 1 تمثِّل مقدار زيادة العتامة. | ||
== القيم المعادة == | == القيم المعادة == | ||
اللون | يعاد اللون <code>$color</code> بعد زيادة عتامته بمقدار <code>$amount</code>. | ||
== الأخطاء والاستثناءات == | == الأخطاء والاستثناءات == | ||
سيُرمى الخطأ <code>ArgumentError</code> إن | سيُرمى الخطأ <code>ArgumentError</code> إن كانت قيمة المعامل <code>$amount</code> خارج المجال المسموح، أو كان أحد المعاملين من النوع الخطأ. | ||
==أمثلة== | ==أمثلة== | ||
المثال 1: استخدام الدالة <code>opacify()</code> لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>).<syntaxhighlight lang="sass"> | |||
.selector { | .selector { | ||
color: opacify(rgba(0, 0, 0, 0.5), 0.1) // rgba(0, 0, 0, 0.6) | color: opacify(rgba(0, 0, 0, 0.5), 0.1) // rgba(0, 0, 0, 0.6) | ||
| سطر 34: | سطر 34: | ||
== انظر أيضًا == | == انظر أيضًا == | ||
* الدالة <code>[[Sass/desaturate|desaturate()]]</code>: تجعل اللون أقل تشبّعًا. | * الدالة <code>[[Sass/desaturate|desaturate()]]</code>: تجعل اللون أقل تشبّعًا. | ||
* | * الدالة <code>[[Sass/darken|()darken]]</code> : تجعل اللون أكثر ظلمة. | ||
* الدالة <code>[[Sass/lighten|()lighten]]</code>: تجعل اللون أكثر إضاءةً. | |||
* الدالة <code>[[Sass/rgba|()rgba]]</code>: تضبط شفافيَّة لون معيّن أو تُنشئ لونًا انطلاقا من المركبات: الأحمر والأخضر والأزرق والشفافيَّة. | |||
* الدالة <code>[[Sass/adjust color|adjust_color()]]</code>: تزيد أو تقلِّل خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد. | |||
== مصادر == | == مصادر == | ||
مراجعة 16:10، 3 مايو 2018
تجعل الدالة ()opacify (تٌسمّى أيضًا fade_in) اللون أكثر عتامةً. يمرَّر إليها لونًا وعددًا بين 0 و 1 ثمَّ تعيد ذلك اللون بعد زيادة عتامته بحسب القيمة الأخيرة.
البنية العامة
opacify($color, $amount)
المعاملات
$color
اللون المراد زيادة عتامته.
$amount
قيمة عددية تتراوح بين 0 و 1 تمثِّل مقدار زيادة العتامة.
القيم المعادة
يعاد اللون $color بعد زيادة عتامته بمقدار $amount.
الأخطاء والاستثناءات
سيُرمى الخطأ ArgumentError إن كانت قيمة المعامل $amount خارج المجال المسموح، أو كان أحد المعاملين من النوع الخطأ.
أمثلة
المثال 1: استخدام الدالة opacify() لضبط قيمة اللون (color) ولون الخلفية (background-color).
.selector {
color: opacify(rgba(0, 0, 0, 0.5), 0.1) // rgba(0, 0, 0, 0.6)
background-color: opacify(rgba(0, 0, 17, 0.8), 0.2) // #001
}
سيُصرّف المثال السابق إلى شيفرة CSS الآتية:
.selector {
color: rgba(0, 0, 0, 0.6);
background-color: #001;
}
انظر أيضًا
- الدالة
desaturate(): تجعل اللون أقل تشبّعًا. - الدالة
()darken: تجعل اللون أكثر ظلمة. - الدالة
()lighten: تجعل اللون أكثر إضاءةً. - الدالة
()rgba: تضبط شفافيَّة لون معيّن أو تُنشئ لونًا انطلاقا من المركبات: الأحمر والأخضر والأزرق والشفافيَّة. - الدالة
adjust_color(): تزيد أو تقلِّل خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد.