الفرق بين المراجعتين ل"Sass/hsla"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (مراجعة الصفحة وتدقيقها.)
سطر 1: سطر 1:
تُنشئ الدالة <code>hsla()‎</code> لونًا انطلاقا من قيم الصبغة (hue) والتشبُّع (saturation) والإضاءة (lightness) والشفافيَّة (alpha). تستخدم الدالة [http://www.w3.org/TR/css3-color/#hsl-color خوارزمية] من مواصفات [[CSS|CSS]].<noinclude>{{DISPLAYTITLE: الدالة <code>()hsla</code> في Sass
+
تُنشئ الدالة <code>hsla()‎</code> لونًا انطلاقًا من قيم الصبغة (hue) والتشبُّع (saturation) والإضاءة (lightness) والشفافيَّة (alpha). تستخدم الدالة [http://www.w3.org/TR/css3-color/#hsl-color خوارزمية] من مواصفات [[CSS|CSS]].<noinclude>{{DISPLAYTITLE: الدالة <code>()hsla</code> في Sass
 
}}</noinclude>
 
}}</noinclude>
  
سطر 28: سطر 28:
  
 
== أمثلة ==
 
== أمثلة ==
المثال 1: ضبط قيمة الخاصية <code>[[CSS/color|color]]</code> باستخدام الدالة <code>hsla()‎</code>.<syntaxhighlight lang="sass">
+
مثال عن ضبط قيمة الخاصية <code>[[CSS/color|color]]</code> باستخدام الدالة <code>hsla()‎</code>:<syntaxhighlight lang="sass">
 
.selector {
 
.selector {
   color: hsl(50, 50, 50); // #bfaa40
+
   color: hsla(50, 50, 50, 0.5); // rgba(191, 170, 64, 0.5);
 
}
 
}
  
 
</syntaxhighlight>ستُصرّف الشيفرة السابقة إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css">
 
</syntaxhighlight>ستُصرّف الشيفرة السابقة إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css">
 
.selector {
 
.selector {
   color: #bfaa40;
+
   color: rgba(191, 170, 64, 0.5); }
}
 
 
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  

مراجعة 06:38، 9 مايو 2018

تُنشئ الدالة hsla()‎ لونًا انطلاقًا من قيم الصبغة (hue) والتشبُّع (saturation) والإضاءة (lightness) والشفافيَّة (alpha). تستخدم الدالة خوارزمية من مواصفات CSS.

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

hsla($hue, $saturation, $lightness, $alpha)

المعاملات

‎$hue

قيمة صبغة اللون. يجب أن تكون بين 0 و 360 درجة.

‎$saturation

قيمة تشبُّع اللون. يجب أن تترواح بين ‎0%‎ و ‎100%.

‎$lightness 

قيمة إضاءة اللون. يجب أن تترواح بين ‎0%‎ و ‎100%.

‎$alpha

قيمة شفافيَّة اللون. يجب أن تكون بين 0 و 1.

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

تُعاد قيمة اللون الناتج.

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

سيُرمى الخطأ ArgumentError إن كانت المعاملات من النوع الخطأ أو كانت قيمة المعاملات ‎$lightness أو ‎$saturation أو ‎$alpha خارج المجال المسموح.

أمثلة

مثال عن ضبط قيمة الخاصية color باستخدام الدالة hsla()‎:

.selector {
  color: hsla(50, 50, 50, 0.5); // rgba(191, 170, 64, 0.5);
}

ستُصرّف الشيفرة السابقة إلى شيفرة CSS الآتية:

.selector {
  color: rgba(191, 170, 64, 0.5); }

انظر أيضًا

  • الدالة hsl()‎: تُنشئ لونًا انطلاقًا من قيم الصبغة والتشبُّع والإضاءة.
  • الدالة adjust_color(): تزيد أو تقلِّل قيمة خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد.

مصادر