الفرق بين المراجعتين لصفحة: «Sass/opacify»

من موسوعة حسوب
لا ملخص تعديل
لا ملخص تعديل
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE: الدالة <code>()opacify</code> في Sass}}</noinclude>
<noinclude>{{DISPLAYTITLE: الدالة <code>()opacify</code> في Sass}}</noinclude>
تجعل الدالة <code>()opacify</code>  (تٌسمّى كذلك <code>fade_in</code>) اللون أكثر شفافيةً. تأخذ لونًا وعددًا بين <code>0</code> و <code>1</code>، وتعيد لونًا مع زيادة شفافيته بذلك المقدار.
تجعل الدالة <code>()opacify</code>  (تٌسمّى كذلك <code>fade_in</code>) اللون أكثر عتامةً. تأخذ لونًا وعددًا بين <code>0</code> و <code>1</code>، وتعيد لونًا مع زيادة عتامته بذلك المقدار.
== البنية العامة ==
== البنية العامة ==
<syntaxhighlight lang="sass">
<syntaxhighlight lang="sass">
سطر 12: سطر 12:


=== <code>‎$amount </code> ===
=== <code>‎$amount </code> ===
مقدار زيادة الشفافية.
مقدار زيادة العتامة.


== القيم المعادة ==
== القيم المعادة ==

مراجعة 17:29، 19 أبريل 2018

تجعل الدالة ()opacify  (تٌسمّى كذلك fade_in) اللون أكثر عتامةً. تأخذ لونًا وعددًا بين 0 و 1، وتعيد لونًا مع زيادة عتامته بذلك المقدار.

البنية العامة

opacify($color, $amount)

المعاملات

‎$color

قيمة لونية.

‎$amount 

مقدار زيادة العتامة.

القيم المعادة

اللون المُعدّل.

الأخطاء والاستثناءات

سيُرمى الخطأ ArgumentError إن كان ‎$amount خارج الحدود أو كان أحد المعاملين من النوع الخطأ.

أمثلة

مثال عن استخدام الدالة 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()‎: تجعل اللون أقل تشبّعًا.
  • الدالة saturation()‎:تُعيدُ الدالة مُكوّن التشبع الخاص باللون.

مصادر