تحريك النص، بألوان قوس قزح باستخدام - CSS

الكود الذي سأقدمه لك كود CSS يستخدم لتحديد ستايل، لعنصر HTML يحمل فئة "ta-clr-text". الكود يقوم بإضافة تأثير تغيير اللون بشكل تدريجي باستخدام قيم HSL. يظهر هذا التأثير كتأثير تلوين نص بألوان قوس قزح.

تحريك النص بألوان قوس قزح باستخدام CSS (Rainbow Text Animation in CSS)

السلام عليكم ورحمة الله وبركاته

مقدمة

تعتبر التكنولوجيا الحديثة واحدة من أهم العوامل التي تشكل العالم الحديث. يلعب الكود البرمجي دوراً أساسياً في تطوير البرامج والتطبيقات التي نعتمد عليها في حياتنا اليومية. تقدم لغات البرمجة والأدوات التقنية الحديثة مرونة وقوة للمطورين لبناء أنظمة معقدة وحلول إبداعية. من الجدير بالذكر أن استخدام الكود البرمجي يأتي مع فوائد وتحديات. سنقوم في هذا المقال بمناقشة الفوائد والتحديات الرئيسية لاستخدام الكود البرمجي وكيف يؤثر ذلك على المجتمع والتطور التقني.

فوائد استخدام الكود البرمجي:

1. تسريع عمليات التطوير: يساعد الكود البرمجي في تسريع عمليات تطوير البرمجيات والتطبيقات، مما يؤدي إلى تسليم المنتجات بشكل أسرع للمستخدمين مع الحفاظ على جودة عالية.
2. إنشاء تطبيقات متقدمة: يمكن للكود البرمجي تمكين المطورين من بناء تطبيقات متقدمة مثل التعلم الآلي، والواقع المعزز، والواقع الافتراضي، التي تجلب تجارب جديدة ومثيرة للمستخدمين.
3. تحسين تجربة المستخدم: باستخدام الكود البرمجي المتقدم، يمكن للمطورين تصميم وتطوير تجارب مستخدم تفاعلية وسلسة تعزز رضا المستخدم وتجعل البرامج أكثر فعالية.

تحديات استخدام الكود البرمجي:

1. أمان المعلومات: مع زيادة الاعتماد على البرمجيات والتطبيقات، تزداد التحديات المتعلقة بأمان المعلومات وحماية البيانات الحساسة من التهديدات السيبرانية.
2. تعقيد الصيانة والدعم: قد يصعب صيانة ودعم البرمجيات المعقدة التي تحتوي على الكود البرمجي المتقدم، مما يمكن أن يزيد من تكاليف ومشاكل الصيانة.
3. نقص المهارات: قد يواجه الشركات والمطورون نقص في المهارات والخبرات اللازمة لفهم وإدارة الكود البرمجي المعقد.

كود برمجي لتغير لون النص مع حركة ذكية

بعد فهمنا اسس الكود البرمجي و تحدياته و فوائده سنباشر العمل على مثال لكود برمجي يقوم بتغير لون النص على حسبب تخصص الكود بمعنى انه سيتم اضافة كود css للموقع و من بعدها ادراج النص المراد تطبيق عليه البرمجية ضمن كلاس اما في صفحة ثابتة او مشاركة مضمنة و ذلك سيبقى على حشب اختيارك.

معاينة في صِوان unPlug

شرح و تركيب كود CSS

<style>
.ta-clr-text {
    color:black;
    animation:myfirst 15s;
    animation-iteration-count:infinite;
    -webkit-animation:myfirst 15s;
    -webkit-animation-iteration-count:infinite;
    font-family:Arial;
    font-weight:bold;
    font-size:25px;
    text-decoration:none;
    text-align:center
}
@keyframes myfirst {
    0% {
    color:hsl( 10,90%,60% )
}
6% {
    color:hsl( 30,90%,60% )
}
12% {
    color:hsl( 50,90%,60% )
}
18% {
    color:hsl( 70,90%,60% )
}
24% {
    color:hsl( 90,90%,60% )
}
30% {
    color:hsl( 110,90%,60% )
}
36% {
    color:hsl( 130,90%,60% )
}
42% {
    color:hsl( 150,90%,60% )
}
48% {
    color:hsl( 170,90%,60% )
}
54% {
    color:hsl( 190,90%,60% )
}
60% {
    color:hsl( 210,90%,60% )
}
66% {
    color:hsl( 230,90%,60% )
}
72% {
    color:hsl( 250,90%,60% )
}
78% {
    color:hsl( 270,90%,60% )
}
84% {
    color:hsl( 290,90%,60% )
}
90% {
    color:hsl( 310,90%,60% )
}
96% {
    color:hsl( 330,90%,60% )
}
100% {
    color:hsl( 350,90%,60% )
}
}@-webkit-keyframes myfirst {
    0% {
    color:hsl( 10,90%,60% )
}
6% {
    color:hsl( 30,90%,60% )
}
12% {
    color:hsl( 50,90%,60% )
}
18% {
    color:hsl( 70,90%,60% )
}
24% {
    color:hsl( 90,90%,60% )
}
30% {
    color:hsl( 110,90%,60% )
}
36% {
    color:hsl( 130,90%,60% )
}
42% {
    color:hsl( 150,90%,60% )
}
48% {
    color:hsl( 170,90%,60% )
}
54% {
    color:hsl( 190,90%,60% )
}
60% {
    color:hsl( 210,90%,60% )
}
66% {
    color:hsl( 230,90%,60% )
}
72% {
    color:hsl( 250,90%,60% )
}
78% {
    color:hsl( 270,90%,60% )
}
84% {
    color:hsl( 290,90%,60% )
}
90% {
    color:hsl( 310,90%,60% )
}
96% {
    color:hsl( 330,90%,60% )
}
100% {
    color:hsl( 350,90%,60% )
}
}
</style>

شرح الكود:

1. `<style>`: يبدأ الكود بعنصر style لتعريف قواعد النمط.
2. `.ta-clr-text`: تحديد العنصر الذي يمكن تطبيق التأثير عليه. في هذا الحال، العنصر يجب أن يحمل الفئة .ta-clr-text.
3. `color: black;`: تحديد لون النص كأسود.
4. `animation: myfirst 15s;`: تحديد اسم التأثير وزمن الانتقال بين التأثيرات (15 ثانية).
5. `animation-iteration-count: infinite;`: جعل التأثير يعمل بشكل متكرر بشكل لا متناهي.
6. `-webkit-animation: myfirst 15s;`: خاصية تحديد التأثير وزمن الانتقال بين التأثيرات للمتصفحات التي تدعم متصفح ويبكيت.
7. `-webkit-animation-iteration-count: infinite;`: جعل التأثير يعمل بشكل متكرر بشكل لا متناهي للمتصفحات التي تدعم متصفح ويبكيت.
8. `font-family: Arial; font-weight: bold; font-size: 25px; text-decoration: none; text-align: center;`: تحديد خصائص الخط.
9. `@keyframes`: بداية تعريف تأثير الأنيميشن وتسلسل الألوان لكل نقطة زمنية.
10. `@-webkit-keyframes`: نفس العملية للمتصفحات التي تدعم متصفح ويبكيت.

بعد فهمنا لعناصر الكود سنتطرق لطريثة اضافته على الموقع لنعمل ذلك في مدونة بلوجر على سبيل المثال يمكنك اضافة الكود و تطبيقه على موقعه مهما طانت المنصة التي تعمل عليها كل ما عليك هو الانتباه و تتبع الخطوات بشكل دقيق.

كيفية اضافة الكود css

توجد طريقتين لاضافة هذا الكود البرمجي اولاً سنتطرق لاسهل طريقة و هي الاضافة مباشرة ضمن اكواد القالب فوق وسم الغلق `</body>` الطريقة الثانية يمكنك اضافة الكود من خلال لوحة التحكم صعوبتها في تفرع خطوات الاضافة عن طريق تركيب كود `<style>` من خلال التخصيص في لوحة التحكم ولكن سنتطرق اليها ايضا.

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

نصيحة:
قم بتعليم الاكواد التي تضيفها داخل قالبك في عناصر html بتوثيق مناسب لك مثلا: <----[توثيق]---> اما فيما يخص توثيق css اضف /*...توثيق...*/ حتى لا يحدث اي اختلاط و تبقى لك امكانية معرفة اين وضعت الكود المعدل.

اذا كنت تستخم الهاتف انصحك بتنزيل نسخة للقالب و كرر النسخ لنسختين بعدها افتح محرر النصوص انصحك بتطبيق [Quick Editor+] واضف التعديلات اما اذا كنت تريد تطبيق التعديلات مباشرة من لوحة التحكم انصحك بتنزيل تطبيق [Hacker's Keyboard] نظرا لوجود جميع الاختصارات الموجودة في لوحة مفاتيح الحاسوب كاختصار البث و النسخ و اللصق و التحديد...

1. إضافة كود CSS:
   - تسجيل الدخول إلى حساب بلوجر:
   قم بتسجيل الدخول إلى لوحة التحكم بلوجر.
   - انتقل إلى لوحة تحكم بلوجر واختر "المظهر".
   - انقر على السهم بجانب التخصيص اختر تعديل HTML
   - ابحث عن `</body>` وضع الكود CSS فوقه.
   - بمجرد لصق الكود، احفظ التغييرات بالنقر فوق هذا الرمز

الطريقة الثانية

الطريقة الثانية ساستعمل سكرين شوت حتى يتسنى لك فهم التطبيق بصورة عملية اكثر.

للحصول عل الكود مضغوط انسخه من الصندوق اسفله

<style>
.ta-clr-text{color:black;animation:myfirst 15s;animation-iteration-count:infinite;-webkit-animation:myfirst 15s;-webkit-animation-iteration-count:infinite;font-family:Arial;font-weight:bold;font-size:25px;text-decoration:none;text-align:center}@keyframes myfirst{0%{color:hsl(  10,90%,60% )}6%{color:hsl(  30,90%,60% )}12%{color:hsl(  50,90%,60% )}18%{color:hsl(  70,90%,60% )}24%{color:hsl(  90,90%,60% )}30%{color:hsl( 110,90%,60% )}36%{color:hsl( 130,90%,60% )}42%{color:hsl( 150,90%,60% )}48%{color:hsl( 170,90%,60% )}54%{color:hsl( 190,90%,60% )}60%{color:hsl( 210,90%,60% )}66%{color:hsl( 230,90%,60% )}72%{color:hsl( 250,90%,60% )}78%{color:hsl( 270,90%,60% )}84%{color:hsl( 290,90%,60% )}90%{color:hsl( 310,90%,60% )}96%{color:hsl( 330,90%,60% )}100%{color:hsl( 350,90%,60% )}}@-webkit-keyframes myfirst{0%{color:hsl(  10,90%,60% )}6%{color:hsl(  30,90%,60% )}12%{color:hsl(  50,90%,60% )}18%{color:hsl(  70,90%,60% )}24%{color:hsl(  90,90%,60% )}30%{color:hsl( 110,90%,60% )}36%{color:hsl( 130,90%,60% )}42%{color:hsl( 150,90%,60% )}48%{color:hsl( 170,90%,60% )}54%{color:hsl( 190,90%,60% )}60%{color:hsl( 210,90%,60% )}66%{color:hsl( 230,90%,60% )}72%{color:hsl( 250,90%,60% )}78%{color:hsl( 270,90%,60% )}84%{color:hsl( 290,90%,60% )}90%{color:hsl( 310,90%,60% )}96%{color:hsl( 330,90%,60% )}100%{color:hsl( 350,90%,60% )}}
</style>

شرح كود HTML و كيفسة تطبيق الكلاس

لتطبيق البرمجية على نص معين ستحتاج فقط ادارج النص المستهدف ضمن الصفحة التابثة او المشاركة ضمن كلاس المخصص في كود css سنعمل ذلك بطريثة سلسة و احترافسة فقط تابع الشرح.

1. إضافة كود HTML:
   - في لوحة التحكم بلوجر ادخل على المشاركات او الصفحات.
   - على حسب رغبتك يمكنك اضافة الكود ضمن مشاركة او صفحة تابثة.
2. - انقر على انشاء مشاركة/صفحة جديدة.
   - غير من وضع الانشاء الذي رمزه الى وضع تكويد HTML الذي رمزه .
3. - الصق الكود html كما مكتوب اسفله
   <div class="ta-clr-text"> هنا تضع النص المسهدف اذا كان جملة </div> <p class="ta-clr-text"> هنا تضع النص المسهدف اذا كان جملة </p>
4. - قم بتغير الكتابة المؤشر عليها بما تريد ادارجه في القائمة التي تريد انشاءها.
5. - انقر على نشر و قم بمعاينة الصفحة لترى النتيجة.

خاتمة:

في نهاية هذا المقال، يتضح أن استخدام الكود البرمجي يأتي مع فوائد وتحديات متنوعة. على الرغم من التحديات، يبقى الكود البرمجي حجر الزاوية في تقدم التكنولوجيا وتحسين حياتنا اليومية. من المهم أن ندرك أهمية توازن الفوائد والتحديات والعمل على تطوير كود برمجي ذكي وآمن يمكن أن يسهم في تحسين جودة البرمجيات والتطبيقات التي نستخدمها.

المشاركات ذات الصلة

شكرًا لمساعدة #ChatGPT في إعداد هذا المقال

المصدر:
SiwaneXYZ©
https://www.siwane.xyz/2024/01/css-rainbow-text-animation-in-css.html