CSS - Offset Property: A Beginner's Guide

Hai هناك، يا مستقبل سحري CSS! اليوم، سنبدأ في رحلة مثيرة إلى عالم خصائص CSS المنزوعة. لا تقلق إذا لم تكتب سطرًا واحدًا من الكود من قبل - سأكون دليلك الصدوق، وستستكشف هذا الموضوع معًا خطوة بخطوة. إذن، خذ ذراعك الافتراضي (أو الفأرة)، ودعنا نغوص في الموضوع!

ما هي خاصية CSS المنزوعة؟

تخيل أنك تنظم الأثاث في غرفة. في بعض الأحيان، تريد نقل كرسي قليلاً إلى اليسار أو رفع لوحة على الحائط قليلاً. في عالم تصميم الويب، تكون خاصية CSS المنزوعة مثل decorator داخلي افتراضي، يتيح لك تحديد موقع العناصر على صفحتك ببالغ الدقة.

الخاصية المنزوعة هي في الواقع اختصار لعدة خصائص فردية تعمل معًا لتحديد موقع عنصر بجانب مسار محدد. إنه مثل إعطاء عناصر HTML الخاصة بك GPS وتوجيهها إلى المكان المحدد!

الخصائص المكونة

تشكل خاصية CSS المنزوعة خمس خصائص فردية. دعنا نحللها:

الخصية	الوصف
offset-path	يحدد المسار الذي سيسلكه العنصر
offset-distance	يحدد المسافة التي سيسلكها العنصر على المسار
offset-rotate	يتحكم في اتجاه العنصر أثناء تحركه على المسار
offset-anchor	يحدد النقطة على العنصر التي تتموضع على المسار
offset-position	يحدد الموضع الأولي للعنصر قبل بدء تحركه على المسار

يلعب كل من هذه الخصائص دورًا حاسمًا في تحديد كيفية تحرك العنصر وتحديد موقفه. إنه مثل إعداد رقصة - كل حركة مهمة!

القيم الممكنة

يمكن أن تقبل الخاصية المنزوعة قيمًا مختلفة، بناءً على ما تريد تحقيقه. إليك بعض القيم الشائعة:

.element {
offset: path('M 0 0 L 100 100') 50px;
}

في هذا المثال، نقول للعنصر أن يتبع مسارًا يبدأ من (0,0) ويتحرك diagonally إلى (100,100)، وأن يوضع 50 بكسلًا على طول هذا المسار.

.element {
offset: ray(45deg) 100px;
}

هنا، نستخدم دالة ray() لإنشاء خط مستقيم بزاوية 45 درجة، ونوضع العنصر 100 بكسلًا على طول هذا الخط.

التطبيق على

يمكن تطبيق الخاصية المنزوعة على أي عنصر يمكن تحديد موقفه. هذا يشمل العناصر ذات المستوى الكتلي مثل <div>، العناصر ذات المستوى الخطي مثل <span>، حتى الصور والنصوص. إنه مثل إعطاء قوى خارقة لجميع عناصر HTML الخاصة بك!

النحو

ينظر النحو الأساسي الخاص بالخاصية المنزوعة هكذا:

offset: [offset-path] [offset-distance] [offset-rotate] [offset-anchor];

لا تحتاج دائمًا إلى تحديد جميع هذه القيم. CSS ذكي جدًا ويستخدم القيم الافتراضية إذا لم تقدمها جميعًا.

خاصية CSS offset - path value

الـ offset-path هو حيث يحدث السحر حقًا. يحدد المسار الذي سيسلكه العنصر. دعنا نرى مثالاً:

.moving-element {
offset-path: path('M 0 0 H 100 V 100 H 0 Z');
}

في هذا الكود، نحن نإنشاء مسار مربع. سيتحرك العنصر 100 بكسلًا إلى اليمين، ثم 100 بكسلًا للأسفل، ثم 100 بكسلًا إلى اليسار، وأخيرًا عودة إلى النقطة الأصلية. إنه مثل الرسم بالكود!

خاصية CSS offset - path والقيمة auto

في بعض الأحيان، تريد أن يوجه العنصر نفسه تلقائيًا أثناء تحركه على المسار. هنا يأتي دور القيمة auto:

.auto-rotating-element {
offset-path: path('M 0 0 Q 100 0 100 100');
offset-rotate: auto;
}

هنا، نحن نإنشاء مسار منحنٍ باستخدام منحنى Bézier ثنائي، ونقول للعنصر أن يوجه نفسه تلقائيًا أثناء اتباع المسار. إنه مثل ركوب أتوبيس الملاهي لعناصر HTML الخاصة بك!

خصائص CSS المنزوعة - الخصائص ذات الصلة

بينما تكون الخاصية المنزوعة قوية بذاتها، إلا أنها غالبًا ما تعمل مع خصائص CSS أخرى لإنشاء تأثيرات أكثر إثارة. إليك بعض الخصائص ذات الصلة التي قد ترغب في استكشافها:

الخصية	الوصف
transform	يتيح لك دوران، وتكبير، وتlanting، أو تحويل عنصر
transition	يتيح لك تحديد انتقال بين حالتين لعنصر
animation	يتيح لك إنشاء حركات معقدة

على سبيل المثال، يمكنك combiner offset مع animation لإنشاء حركة متكررة:

@keyframes move-along-path {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}

.animated-element {
offset-path: path('M 0 0 C 50 0 50 100 100 100');
animation: move-along-path 5s infinite;
}

هذا الكود يإنشاء مسار S الشكل ويحرك عنصرًا بصفة مستمرة على طول المسار. إنه مثل إنشاء استوديو صغير للحركة في CSS الخاص بك!

الخاتمة

ها أنتم، يا أيها الناس! لقد قمنا برحلة مثيرة في عالم خصائص CSS المنزوعة. من المسارات الأساسية إلى الحركات المعقدة، لديك الآن الأدوات لتبدأ في تحديد موقع عناصرك بدقة stylized.

تذكر، مثل أي مهارة، يتطلب التمكن من CSS ممارسة. لا تقلق من تجربة، وتحقيق أخطاء، وتعلم منها. كل مصمم ويب عظيم بدأ من حيث أنت الآن.

إذن، تقدم، وتبدأ في اللعب بهذه الخصائص، وخلق شيء مذهل. من谁知道؟ قد يكون مشروعك التالي هو الشيء الكبير التالي على الويب. تحياتي للبرمجة، وربما تكون offsets دائمًا في النقطة!

Credits: Image by storyset