الفرق بين المراجعتين لصفحة: «Sass/transparentize»
< Sass
جميل-بيلوني (نقاش | مساهمات) مراجعة الصفحة وتدقيقها. |
|||
سطر 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> لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>):<syntaxhighlight lang="sass"> | مثال عن استخدام الدالة <code>transparentize()</code> لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>):<syntaxhighlight lang="sass"> | ||
سطر 35: | سطر 35: | ||
== <span> </span>انظر أيضًا == | == <span> </span>انظر أيضًا == | ||
* الدالة <code>[[Sass/opacify|opacify()]]</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). | |||
== مصادر == | == مصادر == |
مراجعة 18:12، 12 مايو 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).