درس عمل تأثير سلايد على الأزرار CSS

3:02:00 ص
سنتعلم في هذا درس كيفة عمل تأثير سلايد بإستخدام CSS دون استخدام أو كتابة أي كود جافاسكريبت 
السلام عليكم ورحمة الله وبركاته 

اليوم في هذا الدرس سنتعلم كيفية عمل تأثير الإسلايد على الإزرار بإستخدام الـ CSS ودون استخدام أو كتابة أي كود جافاسريبت

 النتيجة النهائية للدرس :
See the Pen pEjOON by Mohammed Jaffar (@MJK) on CodePen.

 المتطلبات التي يجب أن تتوفر لديك لإستيعاب الدرس :
- المعرفة التامة بأساسيات كل من HTML & CSS

 أهم خصائص CSS التي يجب عليك معرفتها قبل تطبيق الدرس :
- Position Property
- Pseudo-elements
في حال لم تكن على معرفة جيدة بأحداهما اضغط عليها وسيقوم الرابط بتحويلك إلى موقع W3schools وهناك ستجد شرح وافي لها على الموقع

 والآن دعنا نبدأ الدرس ...
في البداية سنقوم ببناء هيكلة صفحة html الخاصة بنا كما في التالي :

 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Slide</title>
</head>
<body>
      <button class="slide-from-left">SLIDE FROM LEFT</button>
      <button class="slide-from-right">SLIDE FROM RIGHT</button>
      <button class="slide-from-top">SLIDE FROM TOP</button>
      <button class="slide-from-bottom">SLIDE FROM BOTTOM</button>
      <button class="slide-from-center">SLIDE FROM center</button>
      <button class="slide-right-top">SLIDE RIGTH TOP </button>
</body>
النتيجة :

كل ماقمنا بإضافته داخل الصفحة هي عدة أزرار مع أسماء كلاسات مختلفة لاحظ أن كل أسماء الكلاسات تبدأ باسم slide ايضاً قمنا بإضافة رابط ملف CSS في (style.css)

 الآن سنذهب إلى ملف style.css حيث سيكون جل عملنا في هذا الملف منذ الآن

 في البداية سنقوم بتنسيق الأزرار بالكود التالي:

button {
    padding: 10px;
    margin: 5px;
    background: #303030;
    border: 1px solid #303030;
    color: #fff;
    position: relative;
    z-index: 1;
}

button:hover {
    color: #303030;
}
كل ما قمنا به هو تنسيق الإزرار الخاصة بنا ومن ثم قمنا بتغيير لو عنوان الأزرار إلى الأسود عند مرورو مؤشر الفأرة عليها بما أن خلفية الإزرار ستكون بيضاء وبالتالي لن يظهر عنوان الأزرار في حال كان بنفس لون الخلفية لاحظ أننا قمنا بإضافة خاصية (position: relative) وايضاً (z-index: 1) لتقديم الطبقة خطوة للأمام 

والنتيجة : 


الآن سنأتي للجزء الأهم من الدرس وسنقوم باستخدام Pseudo-elements  كما في التالي :
button::after {
    content: '';
    background: #fff;
    position: absolute;
    z-index: -1;
    transition: all 0.35s;
}

لاحظ هنا أننا اضفنا (content: '') ولم ندخل أي نص بداخلها إنما ادخلنا مساحة فراغة فقط لعمل خلفية بيضاء للزر وفي حال لم تقوم بإضافته هذه الخاصية فلن يعمل التأثير ثم بعد ذلك قمنا بإعطاء الخلفية حرية مطلقة في التمركز داخل الزر بإستخدام (position: absolute) ثم بعد ذلك قمنا بإرجاع طبقة الخلفية خطوة للخلف بإستخدام (z-index: -1) حتى يظهر عنوان الزر وفي النهاية قمنا بإضافة تأثير إنتقالي للزر قد تتسأل ما الفائدة من هذا الكود ؟ الغرض من هذا الكود هو صنع خلفية بيضاء للزر ولكننا لا نريد إظهار هذه الخلفية إلا في حال مرور مؤشر الفأرة على الزر ولكن في حال أردت رؤية الخلفية باستطاعتك إدخال القيم التالية :
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

الآن سنقوم بإضافة هذه القيم ولكن فقط عندما يمر مؤشر الفأرة على الزر وذلك عن طريق الكود التالي :
button[class^="slide"]:hover::after {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: all 0.35s;
}
هنا قمنا بإختيار جميع الإزار والتي لديها اسم كلاس يبدأ بإسم (slide) بما أننا حددنا التمركز (position: absolute) سابقاً ستكون أبعاد هذه الخلفية حول الزر بالكامل بإعطاء القيمة صفر لجميع الإتجاهات وبعدها فمنا بعمل حركة إنتقالية بأستخدام(transition: all 0.35s) لاحظ أن خاصية (transition) تلعب دور هام في عمل التأثر حيث من دونها لن يعمل التأثير الآن إذا قمت باذهاب إلى المتصفح ورؤية الأزرار سترى بأنها لون الخلفية سيتغير للأبيض في حال مرور المؤشر عليها الآن واخيراً سنقوم بعمل تأثير slide بالخطوة التالية : 
button.slide-from-left::after {
    top: 0;
    right: 100%;
    left: 0;
    bottom: 0;
}
هنا قمنا بإختيار الزر الذي يحمل كلاس بإسم (slide-from-left) وقمنا بجعل التموضوع من الجهة اليمنى 100% وعند مرور المؤشر ستتغير القيمة إلى صفر كما حددنا ذلك في الخطوة السابقة بمعنى آخر ضغطنا خلفية الزر إلى الجهة اليسرى بإستخدام(right: 100%) وبعد ذلك عند مرور المؤشر ارجنعا الخلفية لوضعها الطبيعي (right: 0) فمثلاً إذا قمت بتغيير قيمة right إلى 80% سيظهر جزء بسيط من الخلفية البيضاء ايسر الزر لكن عند جعلها 100% لن ستختفي إلى جهة اليسار بشكل كامل الآن إن قمت برؤية النتيجة ستجد بأن التأثير بدأ يعمل بإمتياز الآن في حال أردنا أن نقوم بعمل بالتأثير من الجهة اليمنى كل ما علينا هو جعل قيمة left 100% وإن أردنا التأثير من الأعلى سنقوم بتغيير قيمة bottom إلى 100% وفي حال أردنا التأثير يخرج من الأسفل نقوم بتغيير قيمة top إلى 100% إذا الآن لنحاول إضافة الأكود التالية لنرى النتيجة : 

button.slide-from-right::after {
    top: 0;
    right: 0;
    left: 100%;
    bottom: 0;
}

button.slide-from-top::after {
    top: 0;
    right: 0;
    left: 0;
    bottom: 100%;
}

button.slide-from-bottom::after {
    top: 100%;
    right: 0;
    left: 0;
    bottom: 0;
}
ممتاز الآن جميع التأثيرات تعمل بشكل جميل لكن ماذا لو قمنا بتغيير قيمتين ؟ لن نخسر شيئاً دعنا نجرب تغيير قيمتي right & left معاً إلى 100% 
button.slide-from-center::after {
    top: 0;
    right: 100%;
    left: 100%;
    bottom: 0;
}

لا بد من أنك لاحظت ذلك خرج التأثير من المنتصف جميل جداً ، أليس كذلك ؟ دعنا نجرب شيء آخر بتغيير قيمتي right & top إلى 100%
button.slide-right-top::after {
    top: 100%;
    right: 100%;
    left: 0;
    bottom: 0;
}
جميل جداً كما لاحظت خرج التأثير من الزاية السفلية اليسرى إلى الزاوية العلوية اليمنى

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

  في حال استفدت من الدرس لا تنسى نشره لتعم الفائدة للجميع
 وإلى اللقاء في درس قادم ...

ليست هناك تعليقات

المقالات الاكثر مشاهدة

قالب هاش تك 2016 © - منتج إبداعي طور بواسطة حيّاك