CSS3 تعليمي إنشاء زر تشغيل / إيقاف أنيق
باستخدام زر ، حتى الآن ، الطريقة المفضلة للتفاعل مع الأشياء الإلكترونية ؛ مثل الراديو والتلفزيون ومشغل الموسيقى ، وحتى الهاتف الذكي الذي يحتوي على ميزة الأوامر الصوتية ، لا يزال يحتاج إلى واحد أو اثنين من الأزرار المادية.
علاوة على ذلك ، في هذا العصر الرقمي ، فإن زر تطورت في شكلها الرقمي أيضًا ، مما يجعلها أكثر تفاعلية وديناميكية وحقيقية سهلة ، مقارنةً بالزر المادي.
لذا ، هذه المرة ، سننشئ زرًا تفاعليًا ومريحًا يعتمد على هذا التصميم الممتاز في Dribbble باستخدام CSS فقط.
حسنًا ، لنبدأ.
HTML
سنبدأ تشغيل الزر عن طريق وضع العلامات التالية على مستند HTML الخاص بنا. الأمر بسيط جدًا ، حيث يعتمد الزر على علامة ربط ، ولدينا أيضًا رمز امتداد بجانبه لإنشاء ضوء المؤشر ، ومن ثم يتم لفهم معًا داخل HTML5 الجزء بطاقة.
& # xF011.
هنا هو كيف يبدو زرنا في البداية.
التصميم الأساسي
في هذا القسم ، سنبدأ العمل على الأنماط.
نطبق أولاً هذه الخلفية المظلمة من Subtle Pattern على وثيقة الجسم ، ونركز الجزء. ثم ، سنقوم أيضًا بإزالة النقاط المنقطة الخطوط العريضة على :التركيز و :نشيط حلقة الوصل.
body background: url ('images / micro_carbon.png')؛ قسم الهامش: 150px auto 0؛ العرض: 75 بكسل ؛ الارتفاع: 95 بكسل ؛ الموقف: نسبي محاذاة النص: المركز ؛ : نشط ،: focus outline: 0؛ باستخدام خط مخصص
بالنسبة إلى رمز الزر ، سنستخدم خطًا مخصصًا من Font Awesome بدلاً من صورة. وبهذه الطريقة ، سيكون الأيقونة قادرًا بسهولة على الأناقة وقياسًا عبر ورقة الأنماط.
قم بتنزيل الخط وتخزين ملفات الخطوط (eot و woff و ttf و svg) في الخطوط المجلد ، ثم ضع التعليمات البرمجية التالية في ورقة الأنماط الخاصة بك لتحديد عائلة خطوط جديدة.
@ font-face font-family: "FontAwesome"؛ src: url ("fonts / fontawesome-webfont.eot") ؛ src: url ("fonts / fontawesome-webfont.eot؟ #iefix") format ('eot') ، url ("fonts / fontawesome-webfont.woff") format ('woff') ، url ("fonts / fontawesome- webfont.ttf ") format ('truetype') ، url (" fonts / fontawesome-webfont.svg # FontAwesome ") format ('svg')؛ وزن الخط: عادي ؛ نمط الخط: عادي. 
ال أيقونة السلطة التي نحتاجها لهذا الزر ممثلة في رقم Unicode F011. إذا نظرت عن كثب إلى علامة HTML أعلاه ، فقد وضعنا هذه الشخصية الرقمية & # xF011. ضمن علامة الارتساء ، ولكن بما أننا لم نحدد العرف خط العائلة في نمط الزر ، لم يتم تقديم الرمز بشكل صحيح.
قراءة متعمقة: يونيكود و HTML: وثيقة الأحرف
تصميم الزر
بادئ ذي بدء ، نحن بحاجة إلى تحديد العرف خط العائلة للزر.
زرنا سيكون دائرة ، يمكننا تحقيق تأثير الدائرة باستخدام الحدود بين دائرة نصف قطرها خاصية وتعيين القيمة ، على الأقل ، نصف الزر عرض.
نظرًا لأننا نستخدم خطًا للرمز ، يمكننا بسهولة تعيين اللون و أضف نص الظل للرمز في ورقة الأنماط كذلك.
بعد ذلك ، سنقوم أيضًا بإنشاء تأثير مشطوف للزر. هذا التأثير صعب للغاية. أولا ، نحن بحاجة إلى تطبيق لون الخلفية: rgb (83،87،93) ؛ لقاعدة لون الزر ، نضيف حتى أربع طبقات من مربع الظلال.
font-family: "FontAwesome"؛ اللون: rgb (37،37،37) ؛ text-shadow: 0px 1px 1px rgba (250،250،250،0.1)؛ حجم الخط: 32pt ؛ العرض محجوب؛ الموقف: نسبي زخرفة النص: لا شيء ؛ لون الخلفية: rgb (83،87،93) ؛ صندوق الظل: 0px 3px 0px 0px rgb (34،34،34) ، / * 1st Shadow * / 0px 7px 10px 0px rgb (17،17،17) ، / * 1 Shadow * / inset 0px 1px 0px rpba ، 250، 250، .2)، / * 3rd Shadow * / inset 0px -12px 35px 0px rgba (0، 0، 0، .5)؛ / * 4th Shadow * / width: 70px؛ الارتفاع: 70 بكسل ؛ الحدود: 0 ؛ نصف قطر الحدود: 35 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 79 بكسل ؛
هناك أيضًا دائرة أكبر في الجزء الخارجي من الزر وسوف نستخدمها :قبل شبه عنصر لذلك بدلا من إضافة علامات إضافية.
a: قبل content: ""؛ العرض: 80 بكسل ؛ الارتفاع: 80 بكسل ؛ العرض محجوب؛ مؤشر z: -2 ؛ الموقف: مطلق ؛ لون الخلفية: rgb (26،27،29) ؛ اليسار: -5 بكسل ؛ أعلى: -2 بكسل ؛ نصف قطر الحدود: 40 بكسل ؛ box-shadow: 0px 1px 0px 0px rgba (250،250،250،0.1)، inset 0px 1px 2px rgba (0، 0، 0، 0.5)؛
قراءة متعمقة: CSS: قبل و: بعد عناصر-الزائفة (Hongkiat.com)
ضوء المؤشر
تحت الزر ، هناك ضوء صغير لتعيين حالة التشغيل وإيقاف التشغيل. أدناه ، نحن نستخدم اللون الأحمر للون الخاص بالضوء لأن الطاقة في البداية مغلقة ، نضيف أيضًا مربع الظل لتقليد تأثير بصيص الضوء.
a + span display: block؛ العرض: 8px ؛ الارتفاع: 8 بكسل ؛ لون الخلفية: rgb (226،0،0) ؛ مربع الظل: أقحم 0px 1px 0px 0px rgba (250،250،250،0.5)، 0px 0px 3px 2px rgba (226،0،0،0.5)؛ دائرة نصف قطرها الحدود: 4px ؛ واضحة على حد سواء؛ الموقف: مطلق ؛ أسفل: 0 ؛ اليسار: 42 ٪ ؛
التأثير
في هذه المرحلة ، يبدأ زرنا في الظهور بشكل جيد ونحن بحاجة فقط إلى إضافة بعض التأثيرات عليه ، على سبيل المثال ، عندما يتم النقر فوق الزر ، نريد أن يبدو الزر وكأنه يتم الضغط عليه وضغطه باستمرار.
لتحقيق التأثير ، الأول مربع الظل في الزر سيتم صفير وسيتم خفض الموقف قليلا. نحتاج أيضًا إلى ضبط شدة الظلال الثلاثة الأخرى قليلاً لتتناسب مع موضع الزر.
a: نشط box-shadow: 0px 0px 0px 0px rgb (34،34،34)، / * 1st Shadow * / 0px 3px 7px 0px rgb (17،17،17)، / * 2nd Shadow * / inset 0px 1px 1px 0px rgba (250 ، 250 ، 250 ، .2) ، / * 3rd Shadow * / inset 0px -10px 35px 5px rgba (0، 0، 0، .5)؛ / * 4th Shadow * / background-colour: rgb (83،87،93)؛ أعلى: 3px ؛
علاوة على ذلك ، بمجرد النقر على الزر ، يجب أن يظل مضغوطًا إلى أسفل ويجب أن "يضيء" الرمز للإشارة إلى أن الطاقة في وضع التشغيل.
لتحقيق مثل هذا التأثير ، سنستهدف الزر باستخدام :استهداف الفئة المزيفة, ثم قم بتغيير لون الرمز إلى اللون الأبيض وإضافة نص الظل مع اللون الأبيض كذلك.
a: target box-shadow: 0px 0px 0px 0px rgb (34،34،34)، 0px 3px 7px 0px rgb (17،17،17)، inset 0px 1px 1px 0px rgba (250، 250، 250، .2) ، inset 0px -10px 35px 5px rgba (0، 0، 0، .5)؛ لون الخلفية: rgb (83،87،93) ؛ أعلى: 3px ؛ اللون: # ff؛ text-shadow: 0px 0px 3px rgb (250،250،250)؛
قراءة متعمقة: باستخدام: الهدف الفئة المزيفة
نحن بحاجة أيضا إلى ضبط مربع الظل في الدائرة خارج الزر ، على النحو التالي.
a: active: قبل ، a: target: before top: -5px؛ لون الخلفية: rgb (26،27،29) ؛ box-shadow: 0px 1px 0px 0px rgba (250،250،250،0.1)، inset 0px 1px 2px rgba (0، 0، 0، 0.5)؛
سوف يتحول مؤشر الضوء من اللون الأحمر الافتراضي إلى اللون الأخضر للتأكيد على أن الطاقة في وضع التشغيل بالفعل.
a: target + span box-shadow: inset 0px 1px 0px 0px rgba (250،250،250،0.5)، 0px 0px 3px 2px rgba (135،187،83،0.5)؛ لون الخلفية: rgb (135،187،83) ؛
تأثير انتقال
أخيرًا ، لجعل تأثير الزر يعمل بسلاسة ، سنطبق أيضًا تأثير الانتقال التالي.
سيضيف هذا المقتطف أدناه الانتقال إلى اللون الملكية و نص الظل إلى عن على 350ms في عنصر مرساة.
انتقال: لون 350 مللي ثانية ، نص ظل 350 مللي ثانية ؛ -o-الانتقالية: اللون 350ms ، النص الظل 350ms؛ - انتقال - انتقالي: 350 مللي ثانية ، نص الظل 350 مللي ثانية ؛ -webkit-الانتقالية: اللون 350ms ، النص الظل 350ms ؛
سيضيف هذا المقتطف الثاني أدناه الانتقال إلى لون الخلفية و مربع الظل خاصية في مؤشر الضوء.
a: target + span الانتقالية: 350ms لون الخلفية ، صندوق الظل 700 مللي ثانية ؛ - انتقال: 350ms لون الخلفية ، مربع الظل 700ms ؛ -الموزع الانتقالية: 350ms لون الخلفية ، مربع الظل 700 مللي ثانية ؛ -webkit-الانتقالية: 350ms لون الخلفية ، مربع الظل 700ms ؛
النتيجة النهائية
لقد مررنا بجميع الأنماط التي نحتاجها ، والآن يمكنك رؤية النتيجة النهائية مباشرة بالإضافة إلى تنزيل الملف المصدر من الروابط أدناه.
- عرض
- تحميل المصدر
المكافأة: كيفية إيقاف تشغيله
هنا تأتي المكافأة. إذا جربت الزر من العرض التوضيحي أعلاه ، فقد لاحظت أنه لا يمكن النقر فوق الزر إلا مرة واحدة ، وهذا لتشغيله ، فكيف يمكننا إيقاف تشغيله?.
لسوء الحظ ، علينا أن نفعل ذلك مع jQuery ، لكن الأمر بسيط أيضًا. يوجد أدناه رمز jQuery الذي نحتاجه.
$ (document) .ready (function () $ ('# button'). انقر فوق (function () $ (this) .toggleClass ('on')؛))؛ سيضيف المقتطف أعلاه الفئة ON في المرساة ، وقد استخدمناها toggleClass وظيفة من مسج لإضافته. لذلك ، عندما #زر عند النقر فوقه ، سيتحقق jQuery مما إذا تمت إضافة الفصل ON أم لا: عندما لا يتم ذلك ، ستضيف jQuery الفصل ، وإذا تمت إضافته ، فستقوم jQuery بإزالة الفصل..
ملحوظة: لا تنس تضمين مكتبة jQuery.
الآن علينا تغيير النمط قليلاً. ببساطة استبدال جميع :استهداف شبه عنصر مع ال .على محدد الفصل ، على النحو التالي:
a.on box-shadow: 0px 0px 0px 0px rgb (34،34،34)، 0px 3px 7px 0px rgb (17،17،17)، inset 0px 1px 1px 0px rgba (250، 250، 250، .2) ، inset 0px -10px 35px 5px rgba (0، 0، 0، .5)؛ لون الخلفية: rgb (83،87،93) ؛ أعلى: 3px ؛ اللون: # ff؛ text-shadow: 0px 0px 3px rgb (250،250،250)؛ a: active: before، a.on: before top: -5px؛ لون الخلفية: rgb (26،27،29) ؛ box-shadow: 0px 1px 0px 0px rgba (250،250،250،0.1)، inset 0px 1px 2px rgba (0، 0، 0، 0.5)؛ a.on + span box-shadow: inset 0px 1px 0px 0px rgba (250،250،250،0.5)، 0px 0px 3px 2px rgba (135،187،83،0.5)؛ لون الخلفية: rgb (135،187،83) ؛
أخيرًا ، لنجربه في المتصفح.
- عرض
- تحميل المصدر
