الفرق بين المراجعتين ل"Sass/transparentize"
< Sass
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
(4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: الدالة <code>()transparentize</code> في Sass}}</noinclude> | <noinclude>{{DISPLAYTITLE: الدالة <code>()transparentize</code> في Sass}}</noinclude> | ||
− | تجعل الدالة <code>()transparentize</code> ( | + | تجعل الدالة <code>()transparentize</code> (تسمى أيضًا <code>fade_out</code>) اللون أكثر شفافيَّةً. يمرَّر إليها لونًا وعددًا بين 0 و 1 ثمَّ تعيد ذلك اللون بعد تخفيض عتامته (opacity) بحسب القيمة الأخيرة. |
== البنية العامة == | == البنية العامة == | ||
<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> خارج المجال المسموح، أو كان أحد المعاملين من النوع الخطأ. |
==أمثلة== | ==أمثلة== | ||
− | مثال عن استخدام الدالة <code>transparentize()</code> لضبط قيمة اللون ([[CSS/color|color]]) ولون الخلفية ([[CSS/background-color|background-color]]):<syntaxhighlight lang="sass"> | + | مثال عن استخدام الدالة <code>transparentize()</code> لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>):<syntaxhighlight lang="sass"> |
.selector { | .selector { | ||
− | + | color: transparentize(rgba(0, 0, 0, 0.5), 0.1); // rgba(0, 0, 0, 0.4) | |
− | + | background-color: transparentize(rgba(0, 0, 0, 0.8), 0.2); // rgba(0, 0, 0, 0.6) | |
} | } | ||
+ | |||
</syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة <code>[[CSS]]</code> الآتية:<syntaxhighlight lang="css"> | </syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة <code>[[CSS]]</code> الآتية:<syntaxhighlight lang="css"> | ||
.selector { | .selector { | ||
− | + | color: rgba(0, 0, 0, 0.4); | |
− | + | background-color: rgba(0, 0, 0, 0.6); } | |
− | } | + | </syntaxhighlight> |
− | </syntaxhighlight><span> </span> | + | |
− | + | == <span> </span>انظر أيضًا == | |
− | * الدالة <code>[[Sass/desaturate|desaturate()]]</code>: تجعل اللون أقل تشبّعًا. | + | * الدالة <code>[[Sass/opacify|opacify()]]</code>: تجعل اللون أكثر عتامةً. |
− | * | + | * الدالة <code>[[Sass/saturate|saturate()]]</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>: تزيد أو تقلِّل خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد. | ||
+ | * الدالة <code>[[Sass/scale color|()scale_color]]</code>: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales). | ||
== مصادر == | == مصادر == | ||
− | * [https://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method قسم الدالة | + | * [https://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method قسم الدالة transparentize في صفحة الدوال في توثيق Sass الرسمي]. |
− | [[تصنيف:Sass]] | + | [[تصنيف:Sass|{{SUBPAGENAME}}]] |
− | [[تصنيف: Sass Function]] | + | [[تصنيف: Sass Function|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 07:00، 20 مايو 2018
تجعل الدالة ()transparentize
(تسمى أيضًا fade_out
) اللون أكثر شفافيَّةً. يمرَّر إليها لونًا وعددًا بين 0 و 1 ثمَّ تعيد ذلك اللون بعد تخفيض عتامته (opacity) بحسب القيمة الأخيرة.
البنية العامة
transparentize($color, $amount)
المعاملات
$color
اللون المراد إنقاص عتامته.
$amount
قيمة عددية تتراوح بين 0 و 1 تمثِّل مقدار إنقاص العتامة.
القيم المعادة
يعاد اللون $color
بعد تخفيض عتامته بمقدار $amount
.
الأخطاء والاستثناءات
سيُرمى الخطأ ArgumentError
إن كانت قيمة المعامل $amount
خارج المجال المسموح، أو كان أحد المعاملين من النوع الخطأ.
أمثلة
مثال عن استخدام الدالة transparentize()
لضبط قيمة اللون (color
) ولون الخلفية (background-color
):
.selector {
color: transparentize(rgba(0, 0, 0, 0.5), 0.1); // rgba(0, 0, 0, 0.4)
background-color: transparentize(rgba(0, 0, 0, 0.8), 0.2); // rgba(0, 0, 0, 0.6)
}
سيُصرّف المثال السابق إلى شيفرة CSS
الآتية:
.selector {
color: rgba(0, 0, 0, 0.4);
background-color: rgba(0, 0, 0, 0.6); }
انظر أيضًا
- الدالة
opacify()
: تجعل اللون أكثر عتامةً. - الدالة
saturate()
: تجعل اللون أكثر تشبّعًا. - الدالة
desaturate()
: تجعل اللون أقل تشبّعًا. - الدالة
()darken
: تجعل اللون أكثر ظلمة. - الدالة
()lighten
: تجعل اللون أكثر سطوعًا. - الدالة
()rgba
: تضبط شفافيَّة لون معيّن أو تُنشئ لونًا انطلاقا من المركبات: الأحمر والأخضر والأزرق والشفافيَّة. - الدالة
adjust_color()
: تزيد أو تقلِّل خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد. - الدالة
()scale_color
: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales).