**overflow:** يتحكم في ما يحدث عندما يتجاوز المحتوى حدود حاويته: - `visible` — يتجاوز الحدود بشكل مرئي (الافتراضي) - `hidden` — يُقص المحتوى الزائد - `scroll` — يُضيف scrollbar دائماً - `auto` — يُضيف scrollbar عند الحاجة فقط - `clip` — مثل hidden لكن لا يُنشئ stacking context
**overflow-x / overflow-y:** للتحكم المستقل في الاتجاهين.
**clip-path:** يقص العنصر بشكل هندسي: - `inset()` — مستطيل - `circle()` — دائرة - `ellipse()` — إهليج - `polygon()` — مضلع حر - `path()` — مسار SVG
**filter: blur():** يُطمس العنصر — مفيد للـ frosted glass.
| 1 | /* قص المحتوى */ |
| 2 | .card { overflow: hidden; border-radius: 12px; } |
| 3 | |
| 4 | /* تمرير أفقي فقط */ |
| 5 | .scroll-x { overflow-x: auto; overflow-y: hidden; white-space: nowrap; } |
| 6 | |
| 7 | /* قص بشكل مائل */ |
| 8 | .hero { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); } |
مثال 1: Hero Section بقص مائل
| 1 | .hero { |
| 2 | background: linear-gradient(135deg, #1e3a8a, #3b82f6); |
| 3 | min-height: 70vh; |
| 4 | clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); |
| 5 | display: flex; |
| 6 | align-items: center; |
| 7 | padding: 80px 32px; |
| 8 | } |
| 9 | |
| 10 | /* دائرة صورة شخصية */ |
| 11 | .avatar { |
| 12 | width: 96px; |
| 13 | height: 96px; |
| 14 | clip-path: circle(50%); |
| 15 | /* أو: border-radius: 50% */ |
| 16 | } |
| 17 | |
| 18 | /* شريط أفقي قابل للتمرير */ |
| 19 | .horizontal-scroll { |
| 20 | display: flex; |
| 21 | gap: 16px; |
| 22 | overflow-x: auto; |
| 23 | scroll-snap-type: x mandatory; |
| 24 | -webkit-overflow-scrolling: touch; |
| 25 | padding-bottom: 8px; |
| 26 | } |