ألوان في 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 = مدى الألوان المتاحة.
- الدوال الحديثة بتخلينا نستخدم مجالات ألوان حديثة على الويب.
المدونة
يوليو 13, 2025
في Laravel، بنحتاج دايمًا نكتب استعلامات شبه بعض في أكتر من مكان. Laravel بتوفر طريقتين أساسيين نقدر نستخدمهم علشان نرتّب الاستعلامات دي: Scopes + Tra...
يونيو 26, 2025
دليل للأنيميشن المتحركة بالسكّول بـ CSS دلوقتي تقدر تربط الأنيميشن بتاعتك بـ السكّول من غير جافاسكريبت — كله CSS بحت. 1. التلات مكونات بتوع...
يونيو 03, 2025
لارافيل 12.16.0 - مميزات جديدة للمطورين 1. قاعدات تحقق جديدة: in_array_keys دلوقتي تقدر تتحقق إن الأراي فيه على الأقل مفتاح واحد من اللي انت محددهم...
أغسطس 17, 2025
Laravel Global Scopes: Automatic Query Filtering Eloquent الأهمية: فرض فلترة ثابتة على جميع استعلامات الموديل (مثل Soft Deletes) دون تكرا...
يونيو 30, 2025
أحدث مميزات ECMAScript 2025 في 25 يونيو 2025، تم اعتماد ES2025 رسميًا. الإضافات الجاية هتسهل عليك كتابة الكود: 1. 📦 Import Attributes و JSON Module...
يوليو 20, 2025
دليل عملي ومفصل مع أمثلة واقعية وعينات كود تسهّل عليك تفادي بطء Laravel وتحافظ على سرعة التطبيق. 1. 🧠 استدعي اللي محتاجه بس لو بتعمل DB::tabl...