إعادة تدوير وإيقاع الرسوم المتحركة مع المغلق
في الماضي غير البعيد ، كنا نتعلم تقنيات ثورية لحفظ طلب HTTP و KBs على حد سواء من خلال استخدام صور متحركة. تتألف هذه النقوش المعدنية من عشرات أو حتى مئات الرموز مرتبة في ملف صورة تم تقطيعها لاحقًا وخدمت بطرق متنوعة عبر موقع الويب.
لقد استخدمنا هذه التقنية بشكل جيد ، ويوظفها كل موقع تقريبًا مع قابلية التوسع.
وبفضل ظهور خصائص Transform و Transition الخاصة بـ CSS3 ، يمكننا أن نأخذ هذه خطوة أبعد ، وباستخدام بضعة أسطر من الكود ، نقوم بتحويل قوالب الرموز الأساسية إلى رموز جديدة للاستخدام المستقبلي - وحتى نرسم الرسوم المتحركة في المزيج للحصول على مكافأة إضافية !
هذه التقنية بسيطة وبديهية كما كانت صور متحركة ، وتتيح استخدامها لنشر أيقونات جديدة بسرعة دون الحاجة إلى تغيير الصورة المتحركة.
أيقونات إعادة التدوير مع CSS
ألقِ نظرة على هذا الرمز المتحرك المأخوذ من مكتبة jQuery UI. أثناء تصفحك ، ستلاحظ أن العديد من الرموز المذكورة هنا هي في الواقع تنوعات في القوالب الأساسية. يمكن تمثيل أيقونة واحدة بعشرات طرق مختلفة ، ووضعها في نفس الملف. العديد من الأيقونات هي حرفياً مجرد نسخ مستديرة من والديهم. والخبر السار هو أنه في الوقت الذي نستخدم فيه CSS ، يمكننا استخدام نفس الأسلوب بالضبط دون الحاجة إلى تضمين الاختلافات في صورة الرموز المتحركة.
من المثال أعلاه ، يمكننا أخذ رمز واحد وإعادة إنشائه لأغراضنا الخاصة ، مثل شيفرون بسيط من الصف الثاني لأسفل. مع خاصية التحويل ، نحن قادرون على تدوير هذا الشيفرون 45deg ، 90deg ، 180deg ، بوضوح وبشكل غير محدد لإنشاء العديد من الأشكال المختلفة من نفس القالب.
قالب أساسي (سهم لأعلى):
سيسحب التعليمة البرمجية التالية الوجه المتجه لأعلى من صورة الرموز المتحركة ، وستكون بمثابة قالب أساسي خاص بنا.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
إنشاء حق ow
سيؤدي تحويل السهم 90deg إلى توجيه السهم إلى اليمين ، كما هو موضح أدناه:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
قم بإنشاء سهم أعلى يمين
قم بتدويره فقط 45deg وتحصل على سهم صغير يسار علوي يمين:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
بكل بساطة. باستخدام هذه الطريقة ، يمكننا البدء برمز صغير بسيط من الرموز ، وببذل جهد قليل جدًا ، يمكنك إنشاء ستة أضعاف عدد الرموز لاستخدامها في واجهتنا ، وهو بالطبع مجرد بداية ما يمكن فعله.
نمت بعض التحولات ، وبعض المواقع الفاخرة ، وعائلة أيقونة لدينا قليلا جدا!
إضافة الرسوم المتحركة إلى المزيج
للحصول على تجربة قاتلة ، يمكننا إضافة الرسوم المتحركة إلى المزيج. لن نقوم فقط بتغيير الرموز ، بل سنقوم بتحويلها لجعل التحويل مرئيًا للمستخدم. دعونا نلقي نظرة على مثال آخر ، بدءا من علامة زائد ينظر أعلاه.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
سيعمل تدوير 45deg سهل واحد على تحويل رمز الإضافة إلى رمز إغلاق مفيد.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
الآن بعد أن أصبح التحويل يعمل بشكل صحيح ، يمكننا إضافة انتقال إلى المزيج. تخيل أن لديك ميزة على موقعك لمشاركة الصفحة الحالية من خلال مجموعة متنوعة من الشبكات الاجتماعية. سيؤدي النقر فوق رمز علامة الجمع إلى فتح قائمة خيارات المشاركة ، وبينما يتم فتح القائمة ، يتم نقل زائدًا إلى رمز قريب من خلال رسم متحرك دقيق. أفضل تطبيق وجدته لهذا هو تطبيق iPad الخاص بشركة FontBook. تحقق من تنفيذها:
إنه ممتاز. دعونا نلقي نظرة على كيفية جعل هذا الجمال يأتي إلى الحياة. ابدأ باستخدام رمز plus الخاص بنا الذي تم إنشاؤه أعلاه. لتحريكها ، قم ببساطة بإضافة خاصية النقل إلى الرمز الخاص بك. في انتقالنا ، نحدد الخاصية (التحويل) ، والمدة (0.2 ثانية) ، وأخيرًا ما هي وظيفة التوقيت التي نرغب في استخدامها (خطية).
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;-webkit-transition: -webkit-transform 0.2s linear;-moz-transition: -moz-transform 0.2s linear;transition: transform 0.2s linear;cursor: pointer;}مرة أخرى ، الأمر بهذه البساطة. لا يمكننا فقط إنشاء رموز جديدة لمكتبتنا باستخدام CSS فقط ، بل يمكننا تنشيط وإضفاء الحيوية على أي عنصر معين!
استخدام العتامة لمزيد من التنوع
يأتي الجزء الأخير من إعادة تدوير الأيقونات للعب في شكل خاصية العتامة. سيسمح لك تكرار الرموز الأساسية للأبيض والأسود بإنشاء عدد لا نهائي من الظلال / المتغيرات للاستخدام في جميع أنحاء موقعك أو تطبيقك.
يمكن بسهولة استخدام شكل من أربعة صور (كما هو موضح أدناه) للسبرايت أعلاه لإنشاء عشرات المرات من الرموز ، وعن طريق زيادة أو تقليل التعتيم يمكنك وضعها عند الحاجة ، ولا تزال تبدو رائعة.
حان الوقت للذهاب إلى اللون الأخضر: إعادة التدوير باستخدام CSS
مع اكتساب CSS3 ، بدأت نسختي من Photoshop CS5 في جمع الغبار ، ولأسباب وجيهة! تسمح لك هذه التقنية لإعادة تدوير الرموز بنشر إصدارات ومتغيرات جديدة بشكل مستمر إلى واجهاتك دون الحاجة إلى فتح الملفات المصدر وإضافة رموز مرهقة إلى النقوش المتحركة الآخذة في التوسع.
ينخفض وقت الصيانة ، ويزداد الوقت الذي تقضيه في قراءة الكتب مثل 4 Hours Work Week ! كل شيء ذهب.
وبالطبع ، فإن الجانب السلبي الأكثر وضوحًا لكل هذا هو دعم المتصفح ، ومع الدفع الأخير من جانب الجميع لاستخدام متصفحات حديثة ، سنتمكن من الاستفادة من التقنيات التقدمية الجديدة والمثيرة. لا تتردد في تصفح بعض الأمثلة من هذه التقنية.
ما هي الطرق الأخرى التي تمكنت من إعادة تدوير أصول موقع الويب الخاص بك؟