ألوان في 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 = مدى الألوان المتاحة.
- الدوال الحديثة بتخلينا نستخدم مجالات ألوان حديثة على الويب.
المدونة
يوليو 20, 2025
🔧 1. لارافيل 12.0 – ستارتر كيتس وتعديلات أساسية إصدار 12.0 جاب Starter Kits جاهزة للـ React، Vue، Livewire، وكمان دمج مع WorkOS AuthKit،...
يوليو 26, 2025
1. البدايات: النشأة داخل Facebook في عام 2011، واجه مهندسو Facebook تحديًا متزايدًا في صيانة واجهات المستخدم المعقدة والتفاعلية. تم تطوير مكتبة د...
يوليو 01, 2025
حلل كود Laravel باستخدام Laravel Introspect لو بتعمل Refactor كبير أو بتبني أدوات Dev، Laravel Introspect بيسمحلك تستعلم عن الكود: فيوز، مودلز، رو...
يوليو 01, 2025
مكونات واجهة المستخدم والتفاعل الأساسية في React Native React Native بتوفرلك مجموعة قوية من المكونات الجاهزة اللي تقدر تستخدمها لبناء تطبيقات موباي...
يوليو 01, 2025
🚫 وقّف نسخ الكود! لو عندك نفس المنطق في كذا Model أو Controller زي Slug أو Logging، Traits في Laravel هتوفر عليك تعب الكتابة والتكرار. 1. إيه هو...
أغسطس 17, 2025
Laravel Global Scopes: Automatic Query Filtering Eloquent الأهمية: فرض فلترة ثابتة على جميع استعلامات الموديل (مثل Soft Deletes) دون تكرا...