كيفية عمل زر ثلاثي الأبعاد في CSS. كيفية إنشاء أزرار أنيقة باستخدام Pure CSS
تحياتي لجميع القراء هذا المنشور! سأجيب في مقال اليوم على أحد الأسئلة الأكثر شيوعًا: "كيف يتم إنشاؤه؟" أدوات المغلق زر الحجمي؟. هذا الموضوع ليس سهلاً، لذا أنصحك بدراسة المواد النظرية والعملية الواردة أدناه بعناية.
بعد قراءة المقالة، لن تتعلم فقط ما هي علامات وخصائص لغات الويب التي يجب استخدامها لإنشاء زر على صفحة على الإنترنت، ولكن ستتعرف أيضًا على أقسام أعمق من CSS. أعني بهذا الطبقات الزائفة والتأثيرات الديناميكية المختلفة. وبالإضافة إلى ذلك، يمكنك أن تشكل بنفسك البرامج الخاصة، بناء على الأمثلة الخاصة بي. لذلك دعونا نبدأ!
أدوات إنشاء الأزرار الأساسية
هناك علامتان في لغة الترميز يمكن استخدامهما لإنشاء زر على موقع الويب. هذا < زر>ومألوف لك < الإدخال>.
المشتركين الذين يقرؤون المنشورات السابقةوكذلك أولئك الذين عملوا قليلاً مع العنصر < الإدخال>، فهم يعلمون أن هذه الأداة لا تسمح لك بإنشاء الأزرار فحسب، بل أيضًا كائنات مخصصة أخرى. على سبيل المثال، حقول النصوالقوائم والمفاتيح وما إلى ذلك. كل هذا يحدث بفضل السمة يكتب.
العلامة الثانية هي < زر>. يعمل بشكل أساسي بنفس طريقة العنصر الموصوف أعلاه. يحب < الإدخال>, < زر>يجب وضعها داخل الحاوية < النموذج>. سيتم عرض الزر الذي تم إنشاؤه ليس في هذا الزر بشكل صحيح، لكنه لن ينقل المعلومات إلى الخادم.
ومع ذلك، هذه العلامة لديها بعض الاختلافات. لذا، < زر>يوفر للمطورين المزيد من الخيارات لتنسيق وتصميم الأزرار التي يقومون بإنشائها.
للتوضيح، أرفقت أدناه مثالاً لتطبيق برمجي للعناصر الموصوفة:
ما هي هذه "الطبقات الزائفة"؟
عند تشغيل المثال الأول، عرضت النافذة نفس الشيء تمامًا أزرار ورديةمع الفارق الوحيد هو كلمة واحدة. أولا و مرحلة مهمةاجتاز لقد تعلمت كيفية إدراج الأزرار على صفحات الموقع.
ومع ذلك، يجب أن تعترف أنهم في هذا النموذج ليسوا مثيرين للاهتمام وعاديين للغاية. لهذا السبب سنبدأ في إتقان الفصول الزائفة.
الطبقات الزائفةمسؤولون عن السلوك الديناميكي للكائنات المحددة في موارد الويب. أعتقد أن كل واحد منكم لاحظ كيف أنه عندما تقوم بتحريك المؤشر فوق رابط أو حقل ما، فإنها تتغير. إذن هذا هو عمل الطبقات الزائفة.
لتحديد هذا النوع من السلوك، استخدم ":" متبوعًا باسم حالة الكائن.
يرجى الملاحظة منظر عامالإعلانات:
المحدد (أي العنصر): فئة زائفة (تحديد خصائص النمط)
يمكن تطبيق الآلية الموضحة:
- للمعرفات القياسية: ج: تحوم(ظل النص: 0 -1 بكسل 9 بكسل أزرق؛)؛
- إلى المحددات التي قمت بتهيئتها: #أأ:التركيز(اللون: أزرق؛).
تنقسم جميع الفئات الزائفة الموجودة إلى ثلاث مجموعات، كل منها مسؤولة عن:
- حالة الكائنات (الزيارة، التمرير، الارتباط، التركيز، النشطة)؛
- العناصر الفرعية (الطفل الأول)؛
- لغة محتوى النص(لانج).
نظرا لأن المنشور يتعلق بالأزرار الديناميكية الحجمية، فسوف أتحدث عن بعض عناصر المجموعة المسؤولة عن حالة الكائنات.
أمثلة على الأزرار غير العادية
لقد أخبرتك بكل ما تحتاجه من الناحية النظرية، والآن دعونا ننتقل إلى الممارسة. أريد أن أعرض حلين مثيرين للاهتمام لعرض الأزرار.
يقوم هذا البرنامج بإنشاء زر متحرك ثلاثي الأبعاد، عند النقر عليه، يتم "الضغط" على الأخير بسبب الخاصية تحويل.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
أود أن أشير إلى ذلك < زر>كما يدعم عرض الصور. لذلك كتبت المثال التالي بناءً على المثال السابق مع إضافة بعض النقاط.
- تم تغيير تعريف الزر إلى السلسلة ;
- تمت إضافة ما يلي إلى علامة النمط:
1 2 3 4 5 6 7 8 9 img ( العرض: كتلة; العرض: 200 بكسل; الارتفاع: 70 بكسل; تعويم: يسار; ) p ( أعلى الحشو: 10 بكسل; ); img ( العرض: كتلة; العرض: 200 بكسل; الارتفاع: 70 بكسل; تعويم: يسار; ) p ( أعلى الحشو: 10 بكسل; );
مرحبا أيها الأصدقاء الأعزاء. سأخبرك اليوم عن طريقتين ستساعدانك في إنشاء زر متحرك لمواقع الويب الخاصة بك. من المحتمل أنك رأيت الكثير من هذه الأزرار وقمت بالنقر عليها. لذلك، أوصي بشكل دوري في مدونتي بالدورات التدريبية والدورات التدريبية التابعة، فقط تلك التي جربتها بنفسي. وبالطبع أنا مهتم بالإحصائيات، وتشير الإحصائيات إلى أن الأشخاص ينقرون على الأزرار الجذابة بنسبة 48% أكثر من الروابط العادية.
مبدأ إنشاء أزرار متحركة باستخدام CSS هو كما يلي، هناك ثلاثة أحكام. 1 - الأولي، 2 - عند تحريك المؤشر و3 - عند الضغط على زر الماوس. تحتوي بعض الخدمات على جميع الأحكام الثلاثة، بينما تحتوي خدمات أخرى على اثنين فقط. لكن الشيء الرئيسي هو أنك راضٍ عن النتيجة النهائية.
فيديو تعليمي عن الطريقة الثانية لإنشاء الأزرار المتحركة:
على سبيل المثال، دعونا نلقي نظرة على خدمة CSS3 ButtonGenerator التي تحتوي على عنصرين فقط. لكن التأثيرات تبدو جيدة جدًا. من يشعر بالارتباك بسبب عدم وجود اللغة الروسية، استخدم المولد الأخير الموجود في القائمة.
لذلك دعونا نبدأ.
افتتاح الصفحة الرئيسيةخدمة. في البداية، سترى عرضًا أوليًا للزر والأدوات التي تسمح لك بإجراء جميع أنواع الإعدادات.
القسم الأول، النص والخط، هو المسؤول عن النص وحجم الخط ولون الخط وظل الخط. هذا هو المكان الذي تكتب فيه الملصق على الزر، وتضبط حجمه ولونه وظله.
يشير القسم التالي، الخلفية، إلى الخلفية. هنا يمكنك تحديد لون الزر وتدرج الزر وحجم الزر ومزيج الخلفية.
قسم الحدود مسؤول عن ضبط ظل الزر وحدوده. يمكنك بسهولة ضبط سمك الحدود وتقريب الزوايا وظل الزر.
القسم التالي، التحويل، هو المسؤول عن تحويل الزر - التدوير، والإزاحة، والتشويه.
القسم التالي، الانتقال، هو المسؤول عن سلاسة الرسوم المتحركة. يمكنك ضبط هذه الإعدادات وفقًا للزر الخاص بك. يمكن تطبيق الإجراءات على الزر بأكمله أو على الطبقات الفردية.
بعد المحاولة عدة مرات، قم بتجربة الإعدادات وسوف تفهم ما هو.
بعد تكوين المظهر الأولي للزر، يمكنك الانتقال إلى الخطوة التالية. هذا تعديل للزر عند تحريك مؤشر الماوس. للقيام بذلك، انقر فوق مربع الاختيار المشار إليه في لقطة الشاشة.
خيارات تمرير الماوس
الآن جميع التغييرات التي تجريها على الإعدادات مخصصة للزر الذي سيتم عرضه عند تحريك الماوس فوقه. وتعتمد هذه الإعدادات بشكل فردي على كل زر. على سبيل المثال، قمت بتغيير إعدادات ألوان التدوير والتدرج والظل.
عندما يكون الزر جاهزًا، يمكنك المتابعة لتثبيت الزر في المقالة. وللقيام بذلك قم بتثبيت الكود في المكان المطلوب في المقالة:
وهنا مثالنا:
حسنًا، أنت الآن تعرف كيفية إنشاء زر متحرك بسهولة وسرعة لموقع ويب أو مدونة. حاول ونفذ، الأمر يستحق ذلك. إذا كان لديك أي أسئلة، فاكتب في التعليقات، وسأحاول المساعدة.
هذا كل شيء لهذا اليوم، أتمنى لك التوفيق. ويسعدني دائمًا رؤيتك على صفحات مدونتي.
ملاحظة: وإليك مثال على زر متحرك لتدريب دينيس جيراسيموف "إعداد حركة المرور الباردة للترويج للروابط التابعة". لقد أكملت هذا التدريب وأوصي به الجميع - وهذا دون مبالغة لا مبرر لها، طريقة حقيقيةكسب المال على البرامج التابعة. وهو في الأساس ما أفعله.
قبل أن ننظر إلى الأزرار، دعونا نلقي نظرة على الإعدادات المشتركة بينها جميعًا.
HTML
سيتم استخدام الأزرار للغاية HTML بسيطشفرة:
يشترك
CSS
كما سيكون لجميع الأزرار الإعدادات العامةللحصول على نص التسمية التوضيحية وإلغاء تحديد الروابط:
ButtonText (الخط: 18px/1.5 Helvetica، Arial، sans-serif؛ اللون: #fff؛) a (اللون: #fff؛ زخرفة النص: لا شيء؛)
عادةً، يتوقع المستخدم تأثيرًا ناعمًا إلى حد ما عند تحريك الماوس فوق رابط أو زر. وفي حالتنا، يتغير حجم الزر - فهو يزيد، ويظهر رسالة إضافية.
كود CSS الأساسي
في البداية، نحتاج فقط إلى إعطاء الزر شكلًا ولونًا. حدد ارتفاعًا بـ 28 بكسل وعرضًا بـ 115 بكسل، وأضف الهوامش والحشو، وامنح الزر أيضًا حدًا خفيفًا.
#button1 ( الخلفية: #6292c2؛ الحد: 2 بكسل صلب #eee؛ الارتفاع: 28 بكسل؛ العرض: 115 بكسل؛ الهامش: 50 بكسل 0 0 50 بكسل؛ الحشو: 0 0 0 7 بكسل؛ تجاوز السعة: مخفي؛ العرض: كتلة؛ )
تأثيرات CSS3
بعض الناس يحبون ذلك عندما زر بسيطمصحوبًا بعدد كبير جدًا من أكواد CSS. في هذا القسمفيما يلي أنماط CSS3 إضافية لزرنا. يمكنك الاستغناء عنها، لكنها تعطي الزر مظهرًا أكثر حداثة.
قم بتدوير زوايا الإطار وأضف التدرج اللوني. يستخدم هذا خدعة صغيرة ذات تدرج داكن يتفاعل مع أي لون خلفية.
/*زوايا مدورة*/ -webkit-border-radius: 15px;
-moz-border-radius: 15px؛
نصف قطر الحدود: 15 بكسل؛ /*التدرج*/ صورة الخلفية: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));صورة الخلفية: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
صورة الخلفية: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
صورة الخلفية: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
صورة الخلفية: خطي التدرج (أعلى، rgba (0، 0، 0، 0)، rgba (0، 0، 0، 0.2))؛
الرسوم المتحركة CSS
الآن دعونا تثبيت انتقال CSS. سيتم استخدام الرسوم المتحركة لأية تغييرات في الخصائص وستستمر لمدة نصف ثانية.
مرر الماوس
كل ما تبقى هو إضافة نمط لتوسيع الزر عند تحريك الماوس فوقه. يجب أن يكون عرض الزر 230 بكسل لعرض الرسالة بأكملها.
#button1:تحويم ( العرض: 230 بكسل؛ )
تأثيرات CSS3
اضبط تقريب الزوايا وتدرجًا للخلفية وظلًا إضافيًا. باستخدام rgba نجعل الظل أسود وشفاف.
/*زوايا مستديرة*/ -webkit-border-radius: 10px;
-moz-border-radius: 15px؛
-moz-border-radius: 10px؛
نصف قطر الحدود: 10 بكسل؛
صورة الخلفية: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*التدرج*/ صورة الخلفية: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
صورة الخلفية: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
صورة الخلفية: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
مرر الماوس
صورة الخلفية: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); صورة الخلفية: خطي التدرج (أعلى، rgba (0، 0، 0، 0)، rgba (0، 0، 0، 0.2))؛. /*الظل*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
ظل الصندوق: 0px 3px 1px rgba(0, 0, 0, 0.2);
تأثيرات CSS3
الرسوم المتحركة لا تختلف عمليا عن المثال السابق. /*الانتقال*/ -webkit-transition: كل 0.5 ثانية سهلة؛-moz-transition: كل 0.5 ثانية سهلة؛
-o-transition: كل 0.5 ثانية سهلة؛
-moz-border-radius: 15px؛
-ms-transition: كل 0.5 ثانية سهلة؛
/*الانتقال*/ -webkit-transition: كل 0.8 ثانية سهلة؛
صورة الخلفية: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-moz-transition: كل 0.8 ثانية سهلة؛
-o-transition: كل 0.8 ثانية سهلة؛
-ms-transition: كل 0.8 ثانية سهلة؛
الانتقال: كل 0.8 ثانية سهل؛
مرر الماوس
الآن حان الوقت لتحريك صورة الخلفية. كان موضع البداية "0 0". اضبط المعلمة الثانية على 150 بكسل. للتحويل أفقيًا، تحتاج إلى تغيير المعلمة الأولى.
#button3:تحويم (موضع الخلفية: 0px 150px;)
تأثيرات CSS3
الرسوم المتحركة لا تختلف عمليا عن المثال السابق. محاكاة الضغط على الزر ثلاثي الأبعادالمثال الأخير في درسنا يدور حول الطريقة ثلاثية الأبعاد الشائعة لمحاكاة الضغط على الزر عند تحريك مؤشر الماوس فوقه. الرسوم المتحركة لهذه الحالة بسيطة جدًا لدرجة أنها لا تتطلب حتى انتقال CSS. لكن النتيجة النهائية مثيرة للإعجاب للغاية.
رمز CSS لزرنا.
صورة الخلفية: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
#button4 ( الخلفية: #5c5c5c؛ ظل النص: 0px 2px 0px rgba(0, 0, 0, 0.3); حجم الخط: 22px; الارتفاع: 58px; العرض: 155px; الهامش: 50px 0 0 50px; الفائض: مخفي عرض: كتلة؛ محاذاة النص: ارتفاع الخط: 58 بكسل؛ في هذه الحالةلم يعد CSS3 خيارًا جيدًا. لتحقيق التأثير، هناك حاجة إلى الظلال والتدرج. ينشئ الظل الحاد مظهر زر ثلاثي الأبعاد.
#button4:hover ( الهامش العلوي: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0) ، 0، 0، 0.8)؛ مربع الظل: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ صورة الخلفية: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); صورة الخلفية: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) صورة الخلفية: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); Bottom، rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); صورة الخلفية: خطي متدرج(bottom, rgba(0, 0, 0, 0), rgba(0, 0، 0، 0.4))؛
اليوم أريد أن أخبرك كيف تفعل أزرار أنيقةعلى CSS النقي. سنقوم بإنشاء 4 أنماط، وهي أزرار مملوءة بلون واحد، وأزرار محاطة بحدود، ونمط زر بظل وتعبئة، وآخر 4 أنماط عبارة عن أزرار بتأثير النقر. سنفعل كل هذا الخير دون استخدام أي نصوص برمجية، باستخدام CSS فقط.
التجريبي Ι
كود HTML للأزرار
كود HTML الذي سنستخدمه بسيط للغاية. لكل زر من الأزرار سنقوم بتعيينه فصول منفصلة. سنقوم أيضًا بتعيين فئات لتطبيق التأثير عند تحريك زر المستقبل وتنشيطه. على العموم هذا هو الكود نفسه:
أنماط CSS لجميع الأزرار
بعض المتصفحات المختلفة القواعد القياسيةيتم عرض CSS بشكل مختلف قليلاً. لذلك، في كود CSS التالي سنقوم بإعادة ضبط جميع الأنماط، وإضافة بعض القيم الافتراضية. هذا ما يبدو عليه الكود:
الزر (العرض: كتلة مضمنة؛ الهامش: 0 10 بكسل 0 0؛ الحشو: 15 بكسل 45 بكسل؛ حجم الخط: 48 بكسل؛ عائلة الخط: "Bitter"، serif؛ ارتفاع الخط: 1.8؛ المظهر: لا شيء؛ ظل الصندوق: لا شيء؛ نصف قطر الحدود: 0 ) الزر: التركيز (المخطط التفصيلي: لا شيء)
انها ليست صعبة على الاطلاق. حسنًا، دعونا الآن نلقي نظرة فاحصة على كل من الأنماط الأربعة لأزرارنا الأنيقة.
أزرار مسطحة مليئة بالخلفية
يحظى هذا النوع من الأزرار بشعبية كبيرة هذه الأيام لأنه يلبي الجميع الاتجاهات الحديثةتصميم الويب. وبعبارة أخرى هو نمط مسطح أو تصميم مسطح. علاوة على ذلك، اعتاد الناس على مثل هذه الأزرار وينقرون عليها عن طيب خاطر.
تعرض هذه الصورة حالات الزر الثلاث، عادي (افتراضي)، عند التمرير، وعند النقر أو الإجراء:
رمز CSS لهذه الأزرار بسيط للغاية. يبدو لي أن هذه إضافة كبيرة:
زر القسم المسطح (اللون: #fff؛ لون الخلفية: #6496c8؛ ظل النص: -1px 1px #417cb8؛ الحدود: لا شيء؛) زر القسم المسطح: التحويم، زر القسم المسطح.التحويم (لون الخلفية: #346392؛ ظل النص: -1 بكسل 1 بكسل #27496d؛ ) زر القسم المسطح: نشط، زر القسم المسطح. نشط (لون الخلفية: #27496d؛ ظل النص: -1 بكسل 1 بكسل #193047؛)
أزرار النمط ذات حدود أو حدود
هذا النمط من الأزرار ينتمي إلى نفس فئة الأزرار المسطحة، والفرق الوحيد هو أننا هنا نزيل التعبئة، ونضع بدلاً من ذلك قواعد لعرض حدود الأزرار. وهذه الصورة توضح كل شيء بوضوح:
وكالعادة، كود CSS بسيط جدًا، كل ما علينا فعله هو إضافة قواعد لتظهر الحدود:
زر حدود القسم (اللون: #6496c8؛ الخلفية: rgba(0,0,0,0); الحدود: 5 بكسل مصمت #6496c8;) زر حدود القسم: التحويم، زر حدود القسم.تحويم ( لون الحدود: # 346392؛ اللون: #346392؛) زر القسم: نشط، زر القسم.الحدود. نشط (لون الحدود: #27496d؛ اللون: #27496d؛)
الأزرار ذات الظل والتدرج في CSS
يمكن بسهولة تسمية هذا النمط من الأزرار بأنه قديم، ولكن حتى الآن يمكن العثور عليه على الإنترنت. إذا كانت هذه الأزرار تناسب نمط موقعك، فهي مخصصة لك فقط. كما أنها سهلة الصنع للغاية، وهذه هي الصورة:
في CSS سوف نستخدم قواعد التعبئة الظل والتدرج. عند التمرير، سيظهر ظل حول الزر وعند النقر عليه بالداخل.
زر تدرج القسم (اللون: #fff؛ ظل النص: -2px 2px #346392؛ لون الخلفية: #ff9664؛ صورة الخلفية: تدرج خطي (أعلى، #6496c8، #346392)؛ ظل الصندوق: داخلي 0 0 0 1px #27496d؛ الحدود: لا شيء؛ نصف قطر الحدود: 15px؛ ) زر التدرج: تحوم، زر التدرج. زر التدرج: نشط، زر التدرج. نشط ( مربع الظل: داخلي 0 0 0 1px #27496d، داخلي 0 5px 30px #193047؛ )
تأثير النقر أنيق
يحظى هذا النمط أيضًا بشعبية كبيرة الآن ويستخدم على نطاق واسع في تصميم مواقع الويب. يبدو للمستخدم أنه يتم الضغط على الزر بالفعل. وهنا يمكنك رؤية التفاصيل في الصورة:
يعد CSS هنا أكثر تعقيدًا ويتطلب القليل من الرياضيات. ولكن هذا يمكن فهمه بسهولة. بشكل عام، الأمر ليس مخيفًا إلى هذا الحد. سنضع ظلًا غير واضح أسفل الزر بحيث يعطي تأثير الزر ثلاثي الأبعاد أو يبدو بارزًا قليلاً. عندما تقوم بالتمرير فوق الأزرار، سنجعل الخلفية أغمق. وعندما ينقر المستخدم على الزر، سنقوم بتغيير موضع الزر نفسه في الأنماط. ولجعل الأمر يبدو أكثر إثارة للإعجاب وسلاسة، سنضيف تحويل CSS3 (translateY). بهذه الطريقة سوف يتحرك الزر بسلاسة إلى الأسفل. وهنا كود CSS نفسه:
قسم.اضغط على زر (اللون: #fff؛ لون الخلفية: #6496c8؛ الحدود: لا شيء؛ نصف قطر الحدود: 15 بكسل؛ مربع الظل: 0 10 بكسل #27496d؛) زر قسم.اضغط:تحويم، قسم.اضغط على زر.تحويم (لون الخلفية: #417cb8) قسم.اضغط على الزر:نشط، قسم.اضغط على زر.نشط (لون الخلفية:#417cb8;ظل الصندوق: 0 5px #27496d;تحويل:ترجمY(5px);)
التجريبي Ι
خاتمة
هذا كل شيء! الآن لديك أزرار أنيقة وعصرية يمكنك استخدامها لتلبية احتياجاتك. وبطبيعة الحال، يمكنك تغييرها حتى يتعذر التعرف عليها، وهذا مجرد مثال بسيط على تنفيذ هذا النوع من الأزرار. أتمنى أن تستمتع بهذا الدرس. نراكم قريبا!
فلاد ميرزيفيتش
الأزرار القياسية التي تم إنشاؤها عبر العلامة
أرز. 1. الزر الأصلي والمعدل
لتغيير مظهر الزر بشكل جذري، يمكنك استخدام الصور، ولكن بالمقارنة مع قدرات CSS 3 يبدو هذا الخيار الآن محليًا.
سأتخذ الزر الأصلي في المتصفح كأساس، والذي يحتوي على تدرج عمودي خطي وحواف مستديرة.
أسهل طريقة هي تقريب الزوايا التي نستخدمها خاصية نصف القطر الحدودي، مما يمنحها نصف قطر التقريب المطلوب. كالعادة، لا يعمل في جميع المتصفحات، لذا سيتعين عليك إضافته مجموعة كاملة. والنتيجة هي التالية.
نصف قطر الحدود Moz: 5px؛ /* فايرفوكس */ -webkit-border-radius: 5px; /* سفاري 4 */ border-radius: 5px; /* آي إي 9، سفاري 5، كروم */
نوع الأزرار في متصفحات مختلفةيظهر في الشكل. 2.
أرز. 2. أزرار ذات زوايا مستديرة
بشكل عام، كل شيء متوقع. الإصدارات القديمة من IE لا تدعم CSS 3، بينما تقوم الإصدارات الأخرى بإنشاء الزوايا التي أحتاجها بشكل صحيح. لسبب ما، لا يعرض Opera الخلفية بشكل افتراضي، كما تفعل المتصفحات الأخرى، ولكن سيتم مناقشة Opera بشكل منفصل.
الآن الجزء الممتع هو عمل تدرج خطي عمودي. للقيام بذلك، سيتم استخدام الأنماط الفردية لكل متصفح مرة أخرى.
الخلفية: -moz-linear-gradient(#00BBD6, #EBFFFF);
يحدد التدرج نقطة البداية، وزاوية التدرج، ولون البداية، ولون النهاية. في حالتنا، عندما ينتقل التدرج عموديًا من الأعلى إلى الأسفل، يكفي تعيين الألوان فقط؛ ويتم استخدام المعلمات المتبقية بشكل افتراضي.
كروم، سفاري
الخلفية: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));
هنا تحدد نوع التدرج (الخطي)، ونقطة البداية لتطبيق التدرج (يسار الزاوية العليا)، ونقطة النهاية (الزاوية اليسرى السفلية)، وألوان البداية والنهاية.
إنترنت إكسبلورر
عامل التصفية: progid:DXImageTransform.Microsoft.gradient(startColorstr = "#00BBD6"، endColorstr = "#EBFFFF")؛
متصفح IE يسير بطريقته الخاصة تأثيرات مختلفةيطبق خاصية التصفية، بما في ذلك التدرج. هنا كل شيء أكثر تافهة، تتم كتابة فقط ألوان البداية والنهاية للتدرج.
الأوبرا يستريح، ولم يتم تنفيذ التدرجات بعد.
نقوم بتجميع كافة خصائص المتصفحات والزوايا والتدرجات (مثال 1).
مثال 1. أزرار مع التدرج الخطي
اتضح أنه لطيف جدًا (الشكل 3)، ولكن هناك أيضًا اختلافات واضحةمن الزر الأصلي - يبدو مسطحًا مثل اللوحة.
أرز. 3. عرض الزر مع التدرج
اصنع زرًا الشكل المطلوبيمكنك مرة أخرى استخدام التدرج، "اللعب" مع الألوان. لم تعد قيمتان متدرجتان كافيتين؛ ولحسن الحظ، يقدم Firefox وSafari حلاً.
الخلفية: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);
بدلاً من قيمتين، أدخل العدد المطلوب من الألوان، وسينتقل التدرج بسلاسة من لون إلى آخر.
كروم، سفاري
الخلفية: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));
تحدد معلمة توقف اللون النقطة التي سيتم تطبيق اللون الجديد عندها. تتراوح القيمة من 0 إلى 1.
مثال 2: أزرار ذات تدرج محسّن
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
وتظهر نتيجة المثال في الشكل. 4.
أرز. 4. التدرج، ما هو نوع التدرج المطلوب
وبالمثل، يمكنك إنشاء أي تدرجات أخرى على زر أو عنصر آخر (الشكل 5). لكن افعل هذا بنفسك، ولهذا أضفته إلى ورشة العمل.
أرز. 5. مثل هذه الأزرار المختلفة
اسمحوا لي أن تلخيص. يمكنك إنشاء زر بتدرج وزوايا مستديرة بدون صور. ومع ذلك، هناك ارتباك وتذبذب مع المتصفحات. لا يمكن لـ Opera العمل مع التدرجات على الإطلاق؛ يوجد خطأ مزعج في IE 9 عند دمج التدرج مع الزوايا (الشكل 6).
أرز. 6. تراكب الخلفية على الزوايا في IE 9
حسنًا، في الوقت الحالي سنصنع "أشياء جميلة" لها متصفحات فايرفوكسوسفاري وكروم.