آخر المقالات

الخميس، 1 سبتمبر، 2016

تأثير التموج فى الماتريال ديزاين
تأثير التموج فى الماتريال ديزاين

تأثير التموج فى الماتريال ديزاين


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

يمكنك معاينة الدرس من هنا لكى تفهم أكثر ما أقصده : 


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




الخطوة الأولى أن تضع هذا الكود فوق هذا الوسم *-* : </head> 





ثم عليك أن تضع الكود الأتى فوق هذا الوسم *-* : </body> 





عندما تنتهى من هذين الخطوتين يجب أن تحفظها التغييرات ثم نأتى للخطوة التالية التى يجب ان تركز معى فيها جيدا . 

إذا كيف يتم عمل هذا التأثير عن الضغط على هذا الشئ 

ركز معى فى هذا المثال الأتى : 

1- أترى هذا الكود الأتى : 
هو مجرد كود إعتيادى لم يحصل شئ به 






ولكن إن أضفنا فى class الخاص به كلمة ripple سيتم تشغيل تأثير التموج به كما فى المثال الأتى : 







هل فهمتم هذه الخطوة لأنها هى الأهم لأن بدونها لن يعمل التأثير كما قلت لكى يعمل التأثير كل ماعليك هو إضافة كلمة ripple فى أى class لأى إضافة تريد بها هذا التأثير . 


ملاحظة صغيرة إن كنت تريد تغير لون التأثير من الأبيض إلى أى لون أخر كل ماعليك هو إضافة هذا attr فى الكود الخاص بك :

data-ripple-color="#000"

ليصبح الكود كا الأتى :









اتمنى أن تكونوا فهمتهم هذا الدرس جيدا وإن لم تفهموا أى شئ على الأطلاق أو هناك شئ لم تفهموا من الشرح كل ماعليك التواصل معى عبر الفيس بوك أو أترك تعليق أسفل  الموضوع وسيتم الرد عليك إن شاء الله 

هناك 4 تعليقات:

المتابعون

المشاركات الشائعة

قوالب مميزة

قالب بساطة تكويد : البروفيسور الصغير