ديمو دوال CSS
1. calc()
هذه الصندوق يستخدم calc() لتحديد عرضه.
width: calc(100% - 50px);
2. clamp()
هذا النص يستخدم clamp() لحجم الخط.
font-size: clamp(1rem, 5vw, 2rem);
3. var()
هذا النص يستخدم متغير CSS للون.
:root {
--main-color: #4CAF50;
}
color: var(--main-color);
4. linear-gradient()
هذا الصندوق يستخدم تدرج لوني خطي.
background: linear-gradient(to right, red, blue);
5. radial-gradient()
هذا الصندوق يستخدم تدرج لوني شعاعي.
background: radial-gradient(circle, red, yellow, green);
6. repeating-linear-gradient()
هذا الصندوق يستخدم تدرج لوني متكرر.
background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
7. url()
هذا الصندوق يستخدم url() لإضافة صورة خلفية.
background: url('https://via.placeholder.com/150');
8. hsl()
هذا الصندوق يستخدم hsl() للون الخلفية.
background: hsl(120, 50%, 50%);
9. rgba()
هذا الصندوق يستخدم rgba() للتحكم في الشفافية.
background: rgba(255, 0, 0, 0.5);
10. scale()
هذا الصندوق مُكبر باستخدام scale().
transform: scale(0.8);
مقارنة بين دوال CSS
| الدالة |
الغرض |
حالات الاستخدام |
| calc() |
إجراء العمليات الحسابية على قيم الخصائص CSS. |
تعديل العرض أو المسافات بشكل ديناميكي. |
| clamp() |
تحديد قيمة بين الحد الأدنى والحد الأقصى. |
حجم الخط المتجاوب. |
| var() |
الوصول إلى خصائص CSS المخصصة (المتغيرات). |
ألوان السمات أو القيم القابلة لإعادة الاستخدام. |
| linear-gradient() |
إنشاء تدرجات لونية ناعمة. |
الخلفيات والتأثيرات البصرية. |
| radial-gradient() |
إنشاء تدرجات لونية شعاعية. |
الخلفيات الدائرية أو البيضاوية. |