ونحن على متابعة إنشاء زر التحميل بسيطة وممتعة باستخدام بعض CSS3 نزوة.
وسوف تستخدم زر لدينا الكثير من الأشياء الجيدة بما في ذلك متعة دائرة نصف
قطرها الحدود، مربع الظل، تدرجات خطية، ض مؤشر والتحولات لتحقيق مزدوج
فريد انزلاق تأثير درج على التحويم.
ونحن نمضي، وسوف أناقش لماذا يجب تجنب بعض التقنيات التي قد تفكر في استخدام. التحولات هي صعبة للعمل مع وعرضة الى حد بعيد في رفض العمل مع خصائص معينة. تقرأ على لمعرفة المزيد.
مفهوم
على أساس هذه الفكرة
أردت، لإنشاء زر التحميل مع وجود تأثير درج انزلاق بارد حيث المعلومات
المخفية في الأصل من الملوثات العضوية الثابتة عندما يبدأ المستخدم حدث
التحويم. لوضع تدور على ذلك، قررت لمضاعفة تأثير وخلق درج على كل من أعلى وأسفل زر ( انقر هنا للحصول على نظرة خاطفة من النتيجة النهائية).
هنا هو كيف سيعمل: باستخدام مزيج من HTML و CSS، وسنقوم بإنشاء ثلاث قطع منفصلة. وتشمل هذه على الزر الرئيسي واثنين من لوحات صغيرة من المعلومات. سيكون أصغر لوحات إخفاء البداية، في إطار أكبر زر، ثم عند مرور المستخدم، واحد سوف ينزلق إلى أعلى والأخرى نحو الانخفاض.
كما ترون، وسوف يكون هذا المشروع من السهل جدا أن مثالية للمبتدئين أن تبحث لتصل المهارات CSS الخاصة بهم. تعلم قيمة خاصة هو كيف سنقوم الاستفادة من الموضع المطلق والتراص عن طريق Z-فهرس.
هل ما ليس العمل
كما خططت خارج هذا المشروع، حتى جئت مع اثنين من سبل لجعل مفهوم عملي. نظرا إلى أن لقد كنت على عنصر الزائفة ركلة في الآونة الأخيرة، على الطريقة التي اخترت لهيكلة المشروع كان في البداية من خلال استخدام: قبل و: بعد.
مع هذه العناصر الزائفة، يمكننا رمز فقط على زر التحميل في HTML لدينا ومن ثم تضيف في أجنحة باستخدام المغلق نقية. يبدو أن الحل الأمثل، بل وعملت كبيرة ... حتى حاولت تحريك عملية الانتقال. مهما حاولت، وأنا ببساطة لا يمكن الحصول على الانتقال إلى العمل.
بعد قليل من البحث اكتشفت ان هذا فايرفوكس فقط يدعم التحولات CSS على العناصر الزائفة.
هذه هي المشكله الحقيقية التي تحد حقا متعة مع أننا يمكن أن يكون: قبل و:
بعد، ولكن في الاتجاه الصاعد تعلمت درسا قيما من شأنها أن توفر لي الكثير
من الوقت والمتاعب في المستقبل.
في مثل هذه الدروس لم تحصل في كثير من الأحيان نسمع عن المؤلف حيث فشلت،
ولكن أعتقد أنه من المهم أن تواصل هذه الاخفاقات بحيث يمكنك معرفة من منهم
كما قلت. الآن في المرة القادمة التي تريد تحريك عنصر زائف سوف نتذكر انها لن تعمل في معظم المتصفحات!
الفشل جانبا، ودعونا القفز الى وسيلة من شأنها أن تعمل.
زر
لتبدأ، سنقوم خلق وأسلوب زر لدينا. مرة واحدة لدينا في هذا المكان، فسوف يكون من الأسهل لتشكيل عناصر أخرى. كل ما نحتاج إليه في وزارة HTML هو شعبة واحدة تحتوي على وصلة. نحن يمكن ان تستخدم ببساطة على ارتباط زر لكننا بحاجة إلى تجميع كائنات متعددة معا وعلى هذا فإن شعبة هو ضروري.
<فئة DIV = "زر"> <أ href = "#"> تحميل </ أ> </ div> المصدر:
الشكل والحجم زر
وينبغي أن أتش تي أم أل أعلاه توفر لك ببساطة مع وصلة نص عادي. ونحن في طريقنا لتحويل هذا إلى زر مع مجموعة شكل الخلفية وحجم. للقيام بذلك، ونحن نبدأ مع بعض الأبعاد، وإضافة بعض الألوان وتعيين قيمة العرض لعرقلة.
. زر { عرض: كتلة؛ الطول: 50px؛ العرض: 200px؛ خلفية: # 00b7ea؛ }
هنا نظرة على ما الزر الخاص بك ينبغي أن تبدو بعد هذه الخطوة. انها لا تشبه كثيرا حتى الآن، لكنه سوف يكون زر نزوة تبحث قبل ان تعرفه.
نوع أنماط
أول شيء بشع حول الزر أعلاه أننا سوف تحتاج إلى إصلاح هو نوع، انه في الوقت الراهن حالة من الفوضى. لحسن الحظ، هذا أمر سهل لمعالجة. تم تعيين كل ما نحتاج الى القيام به في اللون إلى الأبيض، يعلن الخط، ومركز تقنية المعلومات.
. زر { عرض: كتلة؛ الطول: 50px؛ العرض: 200px؛ خلفية: # 00b7ea؛ / * نوع * / اللون: أبيض؛ الخط: 17px / 50px هلفتيكا، فيردانا، بلا الرقيق؛ النصوص الديكور: لا شيء؛ مواءمة النصوص: المركز؛ تحويل النص: الكبيرة؛ }
هناك بضعة أشياء مثيرة للاهتمام أن نلاحظ هنا. أولا، لاحظت أن أنا باستخدام "خط" اختزال بدلا من تشغيل من خلال خاصية الخط متناول كل على حدة. هذا هو وسيلة رائعة لتوفير المساحة والحفاظ على أنماط نوع لطيف وجيز. الأمر هنا هو كما يلي:
هنا آخر خدعة أنيق: أنا وضعت خط الطول إلى 50px إلى مركز تقنية المعلومات عموديا في زر. كما لاحظت أن أزلت نص يؤكد وحولت نوع لتكون كبيرة. لماذا لم اكتب فقط لانه في كل مباراة دولية في HTML؟ لأن هذا هو حقا اختيار الاسلوب ويمكن ان يتغير مع إعادة تصميم المستقبل.
الآن لدينا زر تبحث أفضل بكثير!
CSS3 ماجيك
عند هذه النقطة زر لدينا ما زال يبحث عن سهل القليل. إذا كنت بارد مع نظرة الحد الأدنى، يمكنك القفز الى الامام. خلاف ذلك، دعونا جعله قليلا أكثر إثارة للاهتمام. أول شيء سنقوم به هو جولة قبالة الزوايا. تأكد من إضافة كافة البادئات المتصفح ثلاثة:
بكت، الحدود، دائرة نصف قطرها: 10px؛ MOZ-الحدود، دائرة نصف قطرها: 10px؛ حدود دائرة نصف قطرها: 10px؛
يصل المقبل، سنقوم إرم في الظل مربع. مرة أخرى، وسوف نحتاج إلى ثلاثة إصدارات لتغطية مختلف برامج التصفح. الأمر هنا هو اختزال قيمة الأفقي والرأسي عوض عوض، وطمس واللون.
بكت، فإن صندوق الظل: 2px 2px 8px RGBA (0، 0، 0، 0.2)؛ MOZ--شباك الظل: 2px 2px 8px RGBA (0، 0، 0، 0.2)؛ علبة الظل: 2px 2px 8px RGBA (0، 0، 0، 0.2)؛
وأخيرا، فإننا سوف إرم في الانحدار. للأسف، وهذا يتطلب فوضى كاملة من التعليمات البرمجية.
طريقة عمل التدرجات تغيير في الآونة الأخيرة وذلك ليس فقط نحتاج البادئات
المتعددة، ونحن بحاجة أيضا جمل متعددة للتأكد من أننا نؤيد كل شيء. أنا ذاهب إلى أن نكون صادقين، أنا رمز نادرا هذه الأشياء باليد. بدلا من ذلك، وأنا استخدم مولد التدرج في نهاية المطاف ولصقها في الشفرة التي تم إنشاؤها. ها هي النتيجة:
خلفية:-MOZ الخطية، الانحدار (أعلى، 00b7ea # 0٪، # 009ec3 100٪)؛ / * FF3.6 + * / خلفية:-بكت-التدرج (خطي، أعلى اليسار، أسفل اليسار، واللون وقفة (0٪، 00b7ea #)، لون توقف (100٪، # 009ec3))؛ / * كروم، Safari4 + * / خلفية:-بكت الخطية، الانحدار (أعلى،٪ # 00b7ea 0، # 009ec3 100٪)؛ / * Chrome10 +، Safari5.1 + * / خلفية:-O-الانحدار الخطي (أعلى، 00b7ea # 0٪، # 009ec3 100٪)؛ / * أوبرا 11.10 + * / خلفية: MS-الانحدار الخطي (أعلى، 00b7ea # 0٪، # 009ec3 100٪)؛ / * IE10 + * / خلفية: الانحدار الخطي (أعلى، 00b7ea # 0٪، # 009ec3 100٪)؛ / * W3C * / .. فلتر: معرف البرنامج: DXImageTransform مايكروسوفت الانحدار (startColorstr = '# 00b7ea'، endColorstr = '# 009ec3'، GradientType = 0)؛ / * IE6-9 * /
الآن هو على غرار تماما زر لدينا ويبحث غرامة. ها هي النتيجة:
واضاف في الأدراج
الآن أن يتم ذلك زر اهتمامنا الرئيسي، وحان الوقت لإضافة القليل من
الأدراج التي من شأنها أن تنزلق من أعلى وأسفل (وربما "أجنحة" هو المصطلح
المناسب). للقيام بذلك، وسوف نبدأ بإضافة قليلا إلى HTML لدينا:
<فئة DIV = "زر"> <أ href = "#"> تحميل </ أ> <P = فئة "كبار"> انقر لبدء </ P> <ف الطبقة = "أسفل"> 1.2MB. الرمز </ P> </ div> المصدر:
كما ترون، أنا القوا أساسا في فقرتين، مع كل فئة فريدة من نوعها أن يجعلها
سهلة الهدف (هل يمكن استخدام بعض محددات الزائفة بدلا من ذلك إذا كنت تريد
حقا أن تحصل على نزوة).
الافتراضي الفقرة التصميم
قفز الآن إلى أكثر من CSS الخاص بك، وسنقوم نمط الفقرات. للبدء، ونحن نريد التركيز على الأنماط التي سوف تتقاسم كل من الفقرات. التصميم على حد سواء في وقت واحد كلما أمكن ذلك يساعد على الحفاظ على رمز لدينا نظيفة والمكرر أقل. وهنا جزءا كبيرا من رمز للتفكير في:
ف { خلفية: # 222؛ عرض: كتلة؛ الطول: 40px؛ العرض: 180px؛ هامش:-50px 0 0 10px؛ / * نوع * / مواءمة النصوص: المركز؛ الخط: 12px / 45px هلفتيكا، فيردانا، بلا الرقيق؛ لون: # الاتحاد الفرنسي؛ / * الوظيفة * / الموقف: المطلقة؛ Z-الفهرس: - 1؛ / * CSS3 * / بكت، الحدود، دائرة نصف قطرها: 5PX؛ MOZ-الحدود، دائرة نصف قطرها: 5PX؛ حدود دائرة نصف قطرها: 5PX؛ بكت، فإن صندوق الظل: 2px 2px 8px RGBA (0، 0، 0، 0.2)؛ MOZ--شباك الظل: 2px 2px 8px RGBA (0، 0، 0، 0.2)؛ علبة الظل: 2px 2px 8px RGBA (0، 0، 0، 0.2)؛ }
الآن، وهذا هو الكثير ليلقي عليك في كل مرة ولذا فإنني سوف يدخلون من خلال ذلك خطوة خطوة. أول شيء نقوم به هو إعطاء الفقرات الشكل واللون وأنماط الكتابة تماما كما فعلنا على زر. والفرق الرئيسي هو أن هذه هي أصغر حجما واستخدام بعض الهوامش لدفعهم إلى مكان.
القادمة هي أنماط لتحديد المواقع. هذه هي مهمة جدا لذلك تأكد من أنك تفهم بشكل واضح. من أجل جعل أجنحة تظهر خلف زر، ونحن بحاجة لتطبيق Z-مؤشر، الأمر الذي يؤثر على ترتيب التراص من العناصر. فكر في هذا كنوع "إرسال إلى الخلف" للقيادة. لجعل هذا العمل، نحن بحاجة لتطبيق الموضع المطلق.
أخيرا، واضاف نحن الاساليب نفسها للحدود دائرة نصف قطرها، والانحدار الذي فعلنا من قبل.
لقد ظللت هذه فصلها عن الأنماط السابقة لابقاء الامور بسيطة وواضحة، ولكن
لجعل الامور مجفف، وكنت ربما تريد إعادة كتابة المشترك الخاص بك CSS3
الأنماط لشيء من هذا القبيل:
. زر واحدة، ف { بكت، الحدود، دائرة نصف قطرها: 10px؛ MOZ-الحدود، دائرة نصف قطرها: 10px؛ حدود دائرة نصف قطرها: 10px؛ بكت، فإن صندوق الظل: 2px 2px 8px RGBA (0، 0، 0، 0.2)؛ MOZ--شباك الظل: 2px 2px 8px RGBA (0، 0، 0، 0.2)؛ علبة الظل: 2px 2px 8px RGBA (0، 0، 0، 0.2)؛ }
في الأساس، في أي وقت تجد نفسك تكرار أو لصق أساليب عدة مرات، وكنت على شفرة معقدة أكثر من اللازم، وينبغي أن محاولة تبسيط الأمور.
في نهاية هذه الخطوة، سترى غريب يحدث أي تغيير في المعاينة الخاص بك من وقت آخر. وذلك لأن لدينا مخفية وراء هذه العناصر على الزر. انهم هناك، انك لا يمكن ان نراها حتى الآن!
تحوم وأنماط بالموقع
ما نريد القيام به هو التالي تتخذ أجنحة أننا بإنشائه ونقلها الى الخارج عندما يقوم المستخدم تحوم فوق زر. لتحقيق ذلك، ونحن ببساطة الحاجة الى ضبط الهوامش في كل فقرة. هنا نحن استهداف كل من الفئات التي خلقنا، ثم نقل إلى القمة. واحد حتى وقاع واحد لأسفل. الطبقة. أعلى مطلوب أيضا طفيف خط الطول تعديل للنظر اليمين.
. زر: تحوم أعلى { هامش:-80px 0 0 10px؛ خط الطول: 35px؛ } . زر: تحوم أسفل { هامش:-10px 0 0 10px؛ }
بينما نحن هنا، اضافة الى اننا قد رمي بعض الأساليب الفعالة في كذلك. وهذه نافذة المفعول خلال الماوس لأسفل الحدث.
/ * ضبط التدرج * / زر: نشط {خلفية: # 00b7ea؛ / * المتصفحات القديمة * / خلفية:-MOZ الخطية، الانحدار (أعلى، # 00b7ea 36٪، # 009ec3 100٪)؛ / * FF3.6 + الكروم، Safari4 + * / خلفية:-بكت الخطية، الانحدار (أعلى، # 00b7ea 36٪، # 009ec3 100٪)؛ / * Chrome10 +، Safari5.1 + * / خلفية: (رأس-O-الانحدار الخطي، 00b7ea # 36٪،٪ # 009ec3 100)؛ / * أوبرا 11.10 + * / خلفية: MS-الخطية التدرج (أعلى، # 00b7ea 36٪، # 009ec3 100٪)؛ / * IE10 + * / خلفية: الخطية التدرج (أعلى ، # 00b7ea 36٪، # 009ec3 100٪)؛ / * W3C .. IE6-9 * /} / * التأثيرات في أجنحة * / زر: {نشط أسفل الهامش:-20px. 0 0 10px؛} زر: نشط أعلى {هامش:-70px 0 0 10px؛}
كما ترون، ما قمت به هنا هو ضبط التدرج بحيث اللون أعلى وتمتد أبعد قليلا،
ثم أحضر لي مرة أخرى في أجنحة قليلا بحيث هناك تأثير التعاقد عند النقر
فوق.
الآن لدينا زر تتطلع رهيبة. كل ثلاثة من دولنا تعمل. عندما كنت لا تحوم، يبدو زر سهل القديمة. عندما كنت تحوم، وأجنحة أو أدراج جحظ. عند النقر فوق، وأجنحة يأتي في قليلا والتدرج يغير من أي وقت مضى حتى قليلا.
الخطوة النهائية: إضافة الانتقالية
عند هذه النقطة، كل شيء يبدو أنه يعمل على ما يرام. والمشكلة الوحيدة هي أن تأثير تحوم يحدث على الفور، وبالطبع نحن نرغب أن تكون أكثر من ذلك بقليل تدريجي. لتحقيق ذلك، والعودة إلى كتلة الخاص بك وإضافة فقرة في مرحلة انتقالية 0.5 الأساسية الثانية باستخدام كل من البادئات المطلوبة.
ف { خلفية: # 222؛ عرض: كتلة؛ الطول: 40px؛ العرض: 180px؛ هامش:-50px 0 0 10px؛ / * نوع * / مواءمة النصوص: المركز؛ الخط: 12px / 45px هلفتيكا، فيردانا، بلا الرقيق؛ لون: # الاتحاد الفرنسي؛ / * الوظيفة * / الموقف: المطلقة؛ Z-الفهرس: - 1؛ / * CSS3 * / بكت، الحدود، دائرة نصف قطرها: 5PX؛ MOZ-الحدود، دائرة نصف قطرها: 5PX؛ حدود دائرة نصف قطرها: 5PX؛ بكت، فإن صندوق الظل: 2px 2px 8px RGBA (0، 0، 0، 0.2)؛ MOZ--شباك الظل: 2px 2px 8px RGBA (0، 0، 0، 0.2)؛ علبة الظل: 2px 2px 8px RGBA (0، 0، 0، 0.2)؛ ، بكت المرحلة الانتقالية: كل سهولة 0.5s؛ MOZ-المرحلة الانتقالية: كل سهولة 0.5s؛ -O-تمر بمرحلة انتقالية: جميع سهولة 0.5s؛ MS-تمر بمرحلة انتقالية: جميع سهولة 0.5s؛ المرحلة الانتقالية: كل سهولة 0.5s؛ }
مع هذا، علاوة على أن زر الانتقال لطيف جدا بين الدول الثلاث مختلفة.
نرى ذلك في العمل
الانتهاء من كل ما! يجب عليك الآن رهيبة تحميل CSS المتحركة زر من المؤكد أن التأثير. تحقق من عرض حي أدناه أو تحقق من رمز في Tinkerbin .
عرض: اضغط هنا لاطلاق