ألوان في CSS - شرح مبسّط
يونيو 26, 2025ألوان في CSS - شرح مبسّط
النهارده هنتكلم عن الألوان في CSS: ازاي بنحددها، وخصوصًا الطرق الحديثة زي lab() وoklch().
1. يعني إيه لون؟
مفيش حاجة اسمها "لون" في العالم الفيزيائي. اللون هو تجربة بصرية بتتكون في المخ بعد ما العين تستقبل موجات الضوء.
2. Color spaces – مجالات الألوان
المجالات دي خرائط ثلاثية الأبعاد بتمثل الألوان. مثال:
sRGB: المجال الافتراضي في أغلب الشاشات.CIELABوOklab: مجالات بتدي نتائج ألوان أكثر انتظامًا للعين.color(display‑p3 ...): بتدعم ألوان أوسع على الشاشات الحديثة.
3. Color models – أنماط الألوان
زي RGB أو HSL، اللي هما بس طريقه رياضية لتمثيل اللون. بدون المجال (color space)، الوظيفة بتبقى مش واضحة.
4. Color gamut – مجال الألوان المتاح
هو مدى الألوان اللي المجال يقدر يمثلها. لو الشاشة مش قادرة على لون معين، بنقول عليه out-of-gamut.
5. Color functions – دوال الألوان في CSS
rgb(), hsl(), hwb(): للألوان التقليدية في sRGB.lab(), lch(): للألوان في مجال CIELAB.oklab(), oklch(): للألوان في مجال Oklab.color(), color-mix(): للوصول لأي مجال زي display‑p3، rec2020، وغيره.
مثال كود:
.box-srgb {
background: rgb(255, 100, 50);
}
.box-oklab {
background: oklab(70% 0.05 -0.10);
}
.box-display-p3 {
background: color(display-p3 1 0.2 0.3);
}
ملخص سريع (TL;DR)
- Color space = المجال اللي بيمثل الألوان.
- Color model = تمثيل رقمي بدون مجال.
- Color gamut = مدى الألوان المتاحة.
- الدوال الحديثة بتخلينا نستخدم مجالات ألوان حديثة على الويب.
المدونة
يونيو 30, 2025
أحدث مميزات ECMAScript 2025 في 25 يونيو 2025، تم اعتماد ES2025 رسميًا. الإضافات الجاية هتسهل عليك كتابة الكود: 1. 📦 Import Attributes و JSON Module...
يوليو 26, 2025
1. البدايات: النشأة داخل Facebook في عام 2011، واجه مهندسو Facebook تحديًا متزايدًا في صيانة واجهات المستخدم المعقدة والتفاعلية. تم تطوير مكتبة د...
يوليو 07, 2025
Laravel 12.19: استخدام Attributes تنظّم Query Builder في Laravel 12.19، دلوقتي تقدر تستخدم Attribute اسمه #[UseEloquentBuilder] علشان تحدد Query Bu...
يونيو 17, 2025
React Labs: View Transitions وActivity المنشور اتكتب يوم 23 أبريل 2025 من Ricky Hanlon. في React Labs النهارده بيقدّموا ميزتين تجريبيّتين مودرن...
يوليو 01, 2025
مكونات واجهة المستخدم والتفاعل الأساسية في React Native React Native بتوفرلك مجموعة قوية من المكونات الجاهزة اللي تقدر تستخدمها لبناء تطبيقات موباي...
أغسطس 06, 2025
عند بناء تطبيقات باستخدام React، هناك حاجة إلى إدارة البيانات التي تتغير نتيجة تفاعل المستخدم أو جلب البيانات من مصادر خارجية. توجد ثلاث وسائل رئيسي...