CSS Academy · درس

‏shape-outside لالتفاف النص

اجعل النص يلتف حول أشكال مخصّصة باستخدام shape-outside على العناصر العائمة

‏shape-outside لالتفاف النص درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

وحدة CSS Shapes

تتيح وحدة CSS Shapes التفاف النص حول أشكال غير مستطيلة. والخاصية الأساسية هي shape-outside، التي تحدد الشكل الذي يلتف النص حوله.

متطلبات shape-outside

لا تعمل shape-outside إلا على العناصر العائمة. ويجب أن يكون العنصر عائمًا إلى اليسار أو اليمين حتى يلتف النص المجاور حول الشكل المحدد.

<div class="circle-float"></div>
<p>Text wraps around the circular float, following the shape-outside boundary instead of the element's rectangular box, creating a natural flow around curved shapes for magazine-style layouts.</p>

shape-outside: circle()

يلتف النص حول مسار دائري محدد بالنسبة إلى العنصر العائم:

<div class="profile-image"></div>
<p>Paragraph text wraps neatly around the circular profile image thanks to shape-outside matching the visual border-radius.</p>

shape-outside: ellipse()

يلتف النص حول مسار بيضاوي:

<div class="cutout"></div>
<p>Text on the left flows around the elliptical shape on the right, curving inward and outward with the ellipse's boundary.</p>

shape-outside: polygon()

يلتف النص حول مسار مضلع، مما يتيح إنشاء تخطيطات تحريرية معقدة:

<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>

shape-outside مع صورة

مرّر عنوان URL لاستخدام قناة ألفا في الصورة بوصفها حدود الشكل. وسيلتف النص حول المناطق غير الشفافة في الصورة:

<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>

shape-margin

تضيف shape-margin مسافة بين مسار shape-outside والنص الملتف حوله:

<div class="shape-float"></div>
<p>A 16px shape-margin adds breathing room between the circular float and the wrapping text.</p>

shape-image-threshold

عند استخدام صورة مع shape-outside، تحدد shape-image-threshold حد شفافية alpha (من 0 إلى 1) الذي يحدد حدود الشكل.

تطبيقات التصميم

تتيح CSS Shapes إنشاء تخطيطات تحريرية بأسلوب المجلات، واقتباسات بارزة يلتف النص حول صورها وفق شكل محدد، ومناطق للحروف الاستهلالية ذات تدفق نصي غير منتظم — وهي تأثيرات لم يكن من الممكن تنفيذها سابقًا إلا في تصميمات الطباعة أو باستخدام SVG.

دعم المتصفحات

تحظى shape-outside مع الأشكال الأساسية (circle وellipse وpolygon وinset) بالدعم في جميع المتصفحات الحديثة. أما shape-outside مع image URL فتتمتع بدعم أوسع، لكنه قد يختلف. اختبرها دائمًا.

مثال عملي: الحرف الاستهلالي

منطقة مثلثة للحرف الاستهلالي يلتف النص حول حرف زخرفي كبير:

<div><span class="drop-cap">T</span>his paragraph begins with a large drop cap letter that text wraps around using shape-outside on the enlarged first character, a classic print typography effect brought to CSS.</div>

تحقق سريع

ما المطلوب حتى تعمل shape-outside على عنصر؟

خلاصة

تتيح shape-outside تدفق النص حول أشكال غير مستطيلة محددة على العناصر العائمة. ويمكن أن تكون الأشكال دوائر أو قطعًا ناقصة أو مضلعات أو ناتجة عن قنوات alpha في الصور. استخدم shape-margin لإضافة مساحة حول الشكل. ادمجها مع clip-path لمطابقة مظهر العنصر مع الشكل المحدد له.

الأسئلة الشائعة

هل درس «‏shape-outside لالتفاف النص» مجاني؟

نعم — نص درس «‏shape-outside لالتفاف النص» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏shape-outside لالتفاف النص»؟

اجعل النص يلتف حول أشكال مخصّصة باستخدام shape-outside على العناصر العائمة تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «‏shape-outside لالتفاف النص»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy