arabic-web-development/examples/css-effects-v1.5.html 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
105
<!doctype html>
<html dir="rtl" lang="ar">
  <head>
    <title>عرض مؤثرات CSS العربية</title>
    <style>
      html {
        color-scheme: light dark;
      }

      body {
        margin: 0;
        font-family: "Segoe UI", Arial, sans-serif;
        background: linear-gradient(135deg, white, silver);
        color: black;
      }

      main.لوحة {
        min-height: 100vh;
        padding: 2rem;
        display: grid;
        place-items: center;
        container-type: inline-size;
        container-name: مساحة_العرض;
      }

      section.شريط {
        display: flex;
        gap: 1rem;
        overflow: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1rem;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
      }

      article.بطاقة {
        min-width: 18rem;
        padding: 1.25rem;
        background: color(display-p3 0.98 0.98 1);
        border: 1px solid silver;
        border-radius: 1.25rem;
        scroll-snap-align: center;
        filter: drop-shadow(0 1rem 2rem gray);
        backdrop-filter: blur(12px);
        clip-path: inset(0 round 1.25rem);
        contain: layout paint;
        content-visibility: auto;
        contain-intrinsic-size: 18rem 14rem;
        isolation: isolate;
        mix-blend-mode: multiply;
      }

      article.بطاقة strong {
        color: blue;
      }

      @container مساحة_العرض (min-width: 44rem) {
        section.شريط {
          scroll-snap-type: both proximity;
        }

        article.بطاقة {
          min-width: 22rem;
          shape-outside: circle(50%);
        }
      }

      @media (prefers-color-scheme: dark) and (forced-colors: none) {
        body {
          background: oklch(22% .04 250);
          color: white;
        }

        article.بطاقة {
          background: oklch(32% .05 250);
          filter: brightness(112%) contrast(108%);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        section.شريط {
          scroll-behavior: normal;
        }
      }
    </style>
  </head>
  <body>
    <main class="لوحة">
      <section class="شريط" aria-label="بطاقات تعرض مؤثرات CSS">
        <article class="بطاقة">
          <h2>طبقة مرشحة</h2>
          <p>تستخدم هذه البطاقة مرشحا وظلا ساقطا وخلفية زجاجية معزولة.</p>
        </article>
        <article class="بطاقة">
          <h2>تمرير مضبوط</h2>
          <p>يعتمد الشريط على التقاط التمرير وحشو التمرير لتثبيت البطاقات.</p>
        </article>
        <article class="بطاقة">
          <h2>حاوية مستجيبة</h2>
          <p>تغير قاعدة الحاوية شكل البطاقات عندما تتسع مساحة العرض.</p>
        </article>
      </section>
    </main>
  </body>
</html>