arabic-web-development/examples/css-effects-v1.5.arhtml at master · GalaxyRuler/arabic-web-development · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<صفحة>
  <رأس>
    <عنوان>عرض مؤثرات CSS العربية</عنوان>
    <نمط>
      صفحة {
        نظام_الألوان: فاتح داكن;
      }

      جسم {
        هامش: 0;
        عائلة_الخط: "Segoe UI", Arial, sans-serif;
        خلفية: خطي(135deg, أبيض, فضي);
        لون: أسود;
      }

      رئيسي.لوحة {
        أدنى_ارتفاع: 100vh;
        حشو: 2rem;
        عرض: شبكة;
        مكان_العناصر: مركز;
        نوع_الحاوية: حجم_ضمني;
        اسم_الحاوية: مساحة_العرض;
      }

      قسم.شريط {
        عرض: مرن;
        فجوة: 1rem;
        فيض: تلقائي;
        نوع_التقاط_التمرير: محور_س إلزامي;
        حشو_التمرير_ضمني: 1rem;
        سلوك_التمرير: سلس;
        سلوك_التمرير_الزائد_س: احتواء;
      }

      مقالة.بطاقة {
        أدنى_عرض: 18rem;
        حشو: 1.25rem;
        خلفية: لون_عام(عرض_بي_3 0.98 0.98 1);
        حد: 1px صلب فضي;
        نصف_قطر_الحد: 1.25rem;
        محاذاة_التقاط_التمرير: مركز;
        مرشح: ظل_ساقط_مرشح(0 1rem 2rem رمادي);
        مرشح_الخلفية: ضبابية(12px);
        قص_مسار: داخلي(0 مستدير 1.25rem);
        احتواء: تخطيط طلاء;
        رؤية_المحتوى: تلقائي;
        حجم_احتواء_داخلي: 18rem 14rem;
        عزل: معزول;
        نمط_مزج: ضرب;
      }

      مقالة.بطاقة تاكيد {
        لون: أزرق;
      }

      @حاوية مساحة_العرض (أدنى_عرض: 44rem) {
        قسم.شريط {
          نوع_التقاط_التمرير: كلاهما تقريبي;
        }

        مقالة.بطاقة {
          أدنى_عرض: 22rem;
          شكل_خارجي: دائرة_شكل(50%);
        }
      }

      @وسائط (يفضل_نظام_الألوان: داكن) و (ألوان_قسرية: لا_شيء) {
        جسم {
          خلفية: لون_اوكي_ال_سي_اتش(22% .04 250);
          لون: أبيض;
        }

        مقالة.بطاقة {
          خلفية: لون_اوكي_ال_سي_اتش(32% .05 250);
          مرشح: سطوع(112%) تباين(108%);
        }
      }

      @وسائط (يفضل_تقليل_الحركة: تقليل) {
        قسم.شريط {
          سلوك_التمرير: عادي;
        }
      }
    </نمط>
  </رأس>
  <جسم>
    <رئيسي صنف="لوحة">
      <قسم صنف="شريط" وسم_اريا="بطاقات تعرض مؤثرات CSS">
        <مقالة صنف="بطاقة">
          <عنوان_٢>طبقة مرشحة</عنوان_٢>
          <فقرة>تستخدم هذه البطاقة مرشحا وظلا ساقطا وخلفية زجاجية معزولة.</فقرة>
        </مقالة>
        <مقالة صنف="بطاقة">
          <عنوان_٢>تمرير مضبوط</عنوان_٢>
          <فقرة>يعتمد الشريط على التقاط التمرير وحشو التمرير لتثبيت البطاقات.</فقرة>
        </مقالة>
        <مقالة صنف="بطاقة">
          <عنوان_٢>حاوية مستجيبة</عنوان_٢>
          <فقرة>تغير قاعدة الحاوية شكل البطاقات عندما تتسع مساحة العرض.</فقرة>
        </مقالة>
      </قسم>
    </رئيسي>
  </جسم>
</صفحة>