رمز الرموز الاجتماعية. تنطلق CSS من مثال تثبيت روابط الأزرار على المدونة "الاشتراك في التحديثات

• تغيير الحجم لا يؤثر على الجودة ،
• يتم عرضها بشكل مثالي على جميع الأجهزة ، بما في ذلك تلك التي تحتوي على شاشات Retina ،
• تطبيق أي نمط تقريبًا ينطبق على النص ، مثل الخلفية واللون والظلال وما إلى ذلك ،
• سهولة التنفيذ؛

بفضل هذه المزايا ، أصبحت رموز الخطوط شائعة بين المصممين والمطورين ويتم استخدامها بواسطة CSS / أطر العمل مثل.
لاهتمامك الخطوط مع أيقونات الشبكات الاجتماعية.

1. RONDO SOCIAL ICON FONT

أيقونات خطوط ممتازة لبعض الشبكات الاجتماعية الأكثر شهرة وليس فقط ، ولكن لسوء الحظ لا يوجد رمز خاص بنا ، المفضل لدى الجميع.

2. Fontello - مولد الخطوط الأيقونية

مولد أيقونة مع مجموعة ضخمة من الرموز الجاهزة. تتمثل إحدى المزايا في القدرة على تحديد الرموز الضرورية فقط وإنشاء خط منها ، مما سيؤثر بشكل إيجابي على تحسين الصفحة وسرعة تحميل هذا الخط. من بين المزايا ، يمكن للمرء أيضًا إبراز وجود أيقونات لشبكات اجتماعية مثل Vkontakte و Odnoklassniki.

3. خط الرموز الاجتماعية الأحادي

حل مثالي لدمج أيقونات الخطوط بسرعة في المشروع ، يوجد بالفعل رمز تضمين لـ CSS و SCSS ومثال HTML. العيب الوحيد هو عدم وجود شبكات اجتماعية روسية شعبية.

4. Pixeden - حزمة الرمز الاجتماعي

أيقونات جميلة مع صفحة تجريبية قوية ، يمكنك أن ترى جمال استخدام رموز الخطوط وتصميمها باستخدام CSS

29 أكتوبر 2019 تم تحديث الإدخال

يوري نيمتس

تأثيرات زر الوسائط الاجتماعية لموقع الويب

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

شاهد جميع الأمثلة الـ 12 وقم بالتنزيل من الرابط أدناه:

تحميل

بالمناسبة ، فيما يتعلق بتأثيرات التمرير ، هناك عدة مقالات أخرى على الموقع حول هذا الموضوع:

مثل التأثير - استخدمه!

على سبيل المثال ، أحببت التأثير الأول. تحوم فوق الصورة أدناه لرؤية التأثير.

(تحوم فوق الصورة)

طريقة جذابة للغاية لتسليط الضوء على أهم الصور سواء على الموقع أو على موقع بيع من صفحة واحدة. ولكن ، كما كتبت بالفعل ، هناك الكثير من التأثيرات (12!).

الخطوة 1 - HTML

بالنسبة للأيقونات التي تراها على أزرار الوسائط الاجتماعية ، يتم استخدام FA (Font Awesome). هذه الرموز متصلة في سطر واحد بين الكتل :

1	<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

بعد تنزيل جميع المصادر ، تحتاج إلى اختيار التأثير الذي تريده. التأثير الخاص بي في الملف index.html... يحتوي هذا الملف أيضًا على جميع الأنماط اللازمة لإنشاء تأثير التمرير.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<فئة div = "image-effect-fall-back"> <فئة div = "share-layer"> <a href = "#" class = "share-button share-via-vk"> <i class = "fa fa-vk"> في تواصل مع</ أ> <a href = "#" class = "زر المشاركة عبر الفيسبوك"> <i class = "fa fa-facebook"> موقع التواصل الاجتماعي الفيسبوك</ أ> <a href = "#" class = "زر المشاركة عبر تويتر"> <i class = "fa fa-twitter"> تويتر</ أ> </ div> <فئة div = "image-layer"> <img src = "images / tree.jpg" width = "500" alt = "(! LANG: California surf" > !} </ div> </ div>

كل الهيكل الضروري موجود هناك. كل ما تبقى هو ضبط الأنماط في CSS. لذلك ، ننتقل إلى الخطوة الثانية ، وفي نفس الوقت ، الخطوة الأخيرة.

الخطوة 2 - CSS

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

يجب أن تأخذ هذه الأنماط وتضعها في ورقة الأنماط الخاصة بك:

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

.image-effect-fall-back (العرض: 500 بكسل ؛ الارتفاع: 300 بكسل ؛ الموضع: نسبي ؛ الهامش: 0 تلقائي ؛ -مجموعة ويب منظور: 800 بكسل ؛ المنظور: 800 بكسل ؛). image-effect-fall-back. image-layer (الموضع: مطلق ؛ أعلى: 0 ؛ يسار: 0 ؛ ارتفاع: 300 بكسل ؛ -مجموعة ويب الانتقال: 0.6 ثانية ؛ انتقال: 0.6 ثانية ؛ مؤشر z: 1 ؛). layer (-webkit-transform: rotateX (70deg) ؛ تحويل: rotateX (70deg) ؛ تجاوز: مرئي ؛) .image-Effect-fall-back. image-layer img (height: 100٪ ؛). image-Effect-Fall -الظهر. صورة-طبقة: قبل (المحتوى: "" ؛ الموضع: مطلق ؛ أعلى: 0 ؛ اليسار: 0 ؛ العرض: 100٪ ؛ الارتفاع: 100٪ ؛ الخلفية: rgba (0 ، 0 ، 0 ، 0.5) ؛ الصندوق الظل: 0 0100px 50px rgba (0، 0، 0، 0.5) ؛ التعتيم: 0 ؛ -webkit-transfer: all 0.5s ؛ الانتقال: كل 0.5s ؛ -webkit-transform: rotateX (114deg) translateZ (-26px ) ترجم Y (110 بكسل) مقياس (0.75 ) ؛ تحويل: rotateX (114deg) translateZ (-26px) translateY (110px) scale (0.75) ؛ أصل -webkit- تحويل: أسفل ؛ أصل تحويل ms: القاع ؛ أصل التحويل: أسفل ؛ ) .image-effect-fall-back: hover. image-layer: before (opacity: 0.3؛). image-effect-fall-back .share-layer (position: مطلق ؛ bottom: 100px ؛ left: 0 ؛ العرض: 100٪ ؛ ارتفاع: 100 بكسل ؛ عتامة: 0 ؛ مؤشر z: 10 ؛ -حزمة ويب-انتقالية: 0.6 ثانية ؛ انتقال: 0.6 ثانية ؛ -webkit-transform: rotateX (70deg) ؛ تحويل: rotateX (70deg) ؛). -تأثير التراجع: تحوم. طبقة المشاركة (عتامة: 1 ؛ -webkit-transform: rotateX (0deg) translateY (-70px) ؛ التحويل: rotateX (0deg) translateY (-70px) ؛) / * الأنماط لجميع الأزرار * /.share-button (display: inline-block؛ text-decoration: none؛ color: #ffffff؛ padding: 12px؛ width: 90px؛ border-radius: 2px؛ margin: 25px 10px؛) / * لون أزرار الوسائط الاجتماعية * /.Share-via-vk (لون الخلفية: # 4C75A3 ؛). المشاركة عبر facebook (لون الخلفية: # 3b5998 ؛). المشاركة عبر twitter (لون الخلفية: # 00aced ؛)

أحذرك على الفور: بعض الأمثلة تستخدم jQuery ، لأنه هناك ، للحصول على التأثير الكامل ، تحتاج إلى النقر فوق الصورة. ما عليك سوى أن تأخذ كل أكواد JS المستخدمة في الصفحة مع المثال الذي تريده.

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

انتاج |

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

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

فوائد العفاريت

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

ما هو مصور على هذه الايقونات

كالعادة سأخبرك ما هي الصور من بين هذه الأيقونات حتى تتمكن من إيجاد الأيقونات اللازمة للبحث والموجودة في القائمة الرئيسية في أعلى الموقع: قلعة ، روبوت ، ألماس أو أحجار كريمة ، شاشة ، هدية ، ميكروفون ، صاروخ ، آيس كريم ، رجل ، ساعة ، مقص ، أيقونات أي شبكات وخدمات اجتماعية ، مفاتيح ربط ، قوس ، محفظة ، آيباد ، بطيخ ، محفظة ، عصا تحكم اللعبة ، آلة حاسبة ، مهرج ، مصباح كهربائي ، قوس ، سلة مهملات أو سلة ، و letter ، و world ، و burger ، و auto ، و cloud ، و camera ، والمزيد. هناك حوالي 100 صورة في المجموع.

ربط هذه الرموز بسيط للغاية:

1. نقوم بتوصيل ملف css sprite.css بهذه الطريقة: قم بإنشاء مجلد css في جذر موقعك ، وأضف ملف css هناك ، وفي الصفحة حيث سيتم عرض الرموز بين العلامات أدخل الكود التالي:

3. في المكان الذي تريد وضع الرمز فيه ، الصق الرمز:

4. يمكنك استخدام العرض التوضيحي الخاص بي ، فهناك جميع الرموز المعروضة وباستخدام عارض عنصر google chrome ، حدد اسم الرمز وأدخله بدلاً من "اسم الرمز". لنفترض أن رمز الساعة يحتوي على الكود التالي:

حسنًا ، أعتقد أنه ليس من الصعب معرفة كيفية إدراج هذه الرموز من كائن ما ، خاصة وأنني شرحت كل شيء بالفعل :)) استمتع به!

مرحبا أعزائي قراء موقع المدونة. يمكنك بالطبع استخدام مكون إضافي لهذه المهمة ، ولكن ليس من الصعب أن تفعل ذلك بنفسك، وسيكون هناك عدد أقل ، خاصة وأن لدي بالفعل الكثير منهم يعملون لديهم (انظر المقالة على الرابط المعطى). أخذت منها أيقونات وسائل التواصل الاجتماعي ، والتي كتبت عنها بالفعل بشيء من التفصيل (آمل ألا يعترض ديموكس على ذلك).

وأيضًا اعتبرته مناسبًا للبريد الإلكتروني.

قم بإنشاء كائن من الأزرار وأدخل رمز Html في الموقع

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

لكن هذا ليس الخيار الأفضل. لماذا ا؟ حسنًا ، نظرًا لتحميل كل صورة على الشبكة الاجتماعية ، سيتم تقديم طلب منفصل إلى الخادم الخاص بك. إذا كان لديك عشرات الرموز ، فهذا يعني عشرة طلبات ، والتي ستنشئ بأي شكل حملًا إضافيًا على الخادم و. مثل هذه النفايات لا تناسبنا ، خاصة أنها كانت كذلك منذ فترة طويلة.

قررت عدم إعادة اختراع العجلة (إنشاء كائن) ، لكنني استخدمت العنصر الذي تم إنشاؤه بواسطة مُنشئ Share42 (تم توفير رابط لوصف كيفية التعامل معها أعلاه). في ذلك ، يمكنك تحديد تلك الشبكات الاجتماعية ، والأيقونات التي ستحتاج إليها ، إلى جانب الرمز ، ستتلقى رمز CSS ، أي ملف رسومي واحد فعليًا ، والذي سيحتوي على جميع أيقونات الوسائط الاجتماعية التي تحتاجها واشتراكات موجز RSS (والبريد الإلكتروني ، إذا لزم الأمر).

لقد اخترت أربع شبكات رئيسية واثنين من الرموز للاشتراك في الأخبار بحجم رمز 24 × 24 ، لذلك يبدو الرمز الخاص بي بهذا الشكل (على الرغم من أنني ما زلت هناك ، لكن لا يهم):

الآن لدينا جميع المكونات - روابط للمجموعات أو صفحات الوسائط الاجتماعية والأيقونات لعرضها على الموقع. يبقى فقط أن نعد كل هذا بشكل صحيح ، أي. نسق. مدونتي مدعومة من WordPress ، لذلك سأقوم بلصق الكود مع الأزرار في أحد ملفات. في حالتي ، يُطلق عليه sidebar.php. كود Htmlاتضح أنه بسيط للغاية:

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

نعم ، قم بتحميل ملف sprite إلى موقعك باستخدام FTP وحدد المسار إليه في الخلفية (). هذا كل شئ. إذا لم ينجح الأمر في قراءة المواد الموجودة على الروابط أعلاه بعناية ، حسنًا ، إذا لم يعمل أي شيء على الإطلاق ، فقم بوصف موقفك في التعليقات (بالتفصيل - لإدخال الكود ، انسَ وضعه في علامات PHP مع مربع اقواس).

كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة

قد تكون مهتمًا

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

ما هي CSS sprites و sprites بشكل عام؟

العفاريت- مجموعة من الصور الصغيرة التي يتم دمجها في صورة واحدة. يتم ذلك من أجل عدم تنزيل 10-20 صورة صغيرة وخفيفة الوزن من الخادم إلى كمبيوتر المستخدم ، ولكن لإرسالها في دفق واحد ، ودمجها في ملف واحد. جاءت Sprites لتصميم الويب من صناعة الألعاب ، حيث تم استخدامها لإنشاء رسومات متحركة ثنائية الأبعاد ، على سبيل المثال ، إطلاق النار على الوحوش ، إلخ.

في تصميم الموقع ، تُستخدم أيضًا تقنية يتم فيها دمج أيقونات متنوعة في ملف واحد ، على سبيل المثال ، مثل هذا:

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

في هذه الصورة ، حاولت أن أبين بشكل تخطيطي كيف تعمل النقوش المتحركة css. إذا كانت الكتلة أكبر من صورة الخلفية ، فسيتم وضعها في الزاوية اليسرى العليا افتراضيًا ، إذا تم تعيين عدم التكرار في أنماط css. لكن يمكننا تغيير موضع صورة الخلفية بالنسبة إلى الزاوية اليسرى العلوية للكتلة. يكون هذا مفيدًا بشكل خاص إذا كانت الكتلة ، على سبيل المثال ، مساوية في الحجم لأيقونة واحدة. لدينا سبعة أيقونات ، 32 × 32 لكل منها. إنها تقع أفقيًا ، لذلك لا نحتاج إلى تغيير موضع الخلفية عموديًا. قمنا بتعيين موضع صورة الخلفية -32 بكسل ، نحصل على رمز في الكتلة ، -64 بكسل - رمز Facebook ، إلخ.

كيفية إنشاء أزرار ارتباط لملفات تعريف الوسائط الاجتماعية؟

بعد التسجيل في المجتمعات المعنية وفي ، تلقيت روابط لملفات التعريف وعنوان موجز RSS الخاص بي ورابطًا لنموذج اشتراك لتلقي التحديثات عن طريق البريد. ثم قمت بدمجها في الكود التالي ولصقها في عنصر واجهة نصي في لوحة إدارة WordPress:

في مرساة الروابط ، يستخدم هذا الرمز العلامة : ... إنه هو الكتلة ذاتها التي تظهر فيها الأيقونة المرغوبة. يتم تحديد إزاحة صورة الخلفية في ملف النمط style.cssمن خلال الممتلكات خلفية الموقف:

/ * أزرار الاشتراك في التحديثات * / .spmenu (المساحة المتروكة: 0 بكسل ؛ الهامش: 0 بكسل ؛ اللون: # 4682B4 ؛ محاذاة النص: يسار ؛ حجم الخط: 100٪ ؛) .spmenu a ، .spmenu a: hover (cursor) : pointer؛ color: # 1E90FF؛ text-decoration: none؛ font-size: 100٪؛) .spmenu span (display: inline-block؛ width: 32px؛ height: 32px؛ background: url ("images / icons.png ") لا تكرار ؛) .spmenu span.sprite_gplus (background-position: 0px 0px؛) .spmenu span.sprite_twitter (background-position: -32px 0px؛) .spmenu span.sprite_fbook (background-position: -64px 0px؛) ) .spmenu span.sprite_rss (background-position: -96px 0px؛) .spmenu span.sprite_email (background-position: -128px 0px؛)

وهكذا ، لكل عنصر داخل الفصل " سبمينو»تم تعيين صورة الخلفية icon.pngوهي مجموعة من الرموز. لاحظ أن هو عنصر مضمّن وفقًا لمواصفات HTML ، لذلك من أجل إعطائه أبعادًا صارمة (العرض والارتفاع) ، يجب علينا تغيير طريقة عرضه على مستوى الكتلة في خصائص CSS (السطر: عرض: مضمنة كتلة ؛). يتطابق حجم الكتلة 32 × 32 مع تنسيق الرموز الخاصة بنا.

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

أين يمكنني الحصول على أيقونات الكائن؟

1. ارسمها بنفسك.
2. ابحث في محرك البحث بين الصور.
3. هناك مجموعات خاصة من الرموز على الويب يتم تقديمها مجانًا غالبًا.
4. تعرض العديد من الشبكات والخدمات الاجتماعية الشعارات والأيقونات الرسمية على مواقع الويب الخاصة بهم والتي يمكن استخدامها في تطبيقاتهم.
5. لإنشاء ملف sprite لرموز الوسائط الاجتماعية تلقائيًا ، يمكنك استخدام الخدمة. حدد الرموز بالترتيب المطلوب ، واحفظ الأرشيف مع البرنامج النصي ، وقم بفك ضغط الصورة وشاهدها icon.png- ملف سبرايت جاهز.

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

تم الانتهاء من قائمة روابط الأزرار للقنوات الخاصة بتلقي التحديثات ، الموعودة في بداية الملاحظة ، هذه هي نهاية المقالة. اشترك في التحديثات ، المتعة بدأت للتو.