أزرار على CSS التصميم الحديث. صنع أزرار أنيقة
قبل أن ننظر إلى الأزرار، دعونا نلقي نظرة على الإعدادات المشتركة بينها جميعًا.
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. سيتم استخدام الرسوم المتحركة لأية تغييرات في الخصائص وستستمر لمدة نصف ثانية.
كود CSS الأساسي
رمز CSS مشابه جدًا للمثال السابق. يتم استخدام لون خلفية مختلف ويتم تغيير الشكل قليلاً. كما يقوم أيضًا بتوسيط النص وتعيين ارتفاع السطر للزر بحيث يحدث التوسيط الرأسي.
#button2 ( الخلفية: #d11717؛ الحد: 2 بكسل صلب #eee؛ الارتفاع: 38 بكسل؛ العرض: 125 بكسل؛ الهامش: 50 بكسل 0 0 50 بكسل؛ التجاوز: مخفي؛ العرض: كتلة؛ محاذاة النص: المركز؛ ارتفاع الخط: 38 بكسل؛ )
تأثيرات 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));
كود CSS الأساسي
صورة الخلفية: -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 ثانية سهلة؛
/*زوايا مستديرة*/ -webkit-border-radius: 5px;
-moz-border-radius: 15px؛
-moz-border-radius: 5px؛
نصف قطر الحدود: 5 بكسل؛
صورة الخلفية: -o-linear-gradient(top, 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);
تستمر الرسوم المتحركة في هذه الحالة لفترة أطول لإنشاء تأثير سلس ومثير للاهتمام.
كود CSS الأساسي
/*الانتقال*/ -webkit-transition: كل 0.8 ثانية سهلة؛
-moz-transition: كل 0.8 ثانية سهلة؛
تأثيرات CSS3
الرسوم المتحركة لا تختلف عمليا عن المثال السابق. -o-transition: كل 0.8 ثانية سهلة؛-ms-transition: كل 0.8 ثانية سهلة؛
الانتقال: كل 0.8 ثانية سهل؛
صورة الخلفية: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
الآن حان الوقت لتحريك صورة الخلفية. كان موضع البداية "0 0". اضبط المعلمة الثانية على 150 بكسل. للتحويل أفقيًا، تحتاج إلى تغيير المعلمة الأولى. #button3:تحويم (موضع الخلفية: 0px 150px;)محاكاة الضغط على الزر ثلاثي الأبعاد
#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))؛
فلاد ميرزيفيتش
الأزرار القياسية التي تم إنشاؤها عبر العلامة
أرز. 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
حسنًا، في الوقت الحالي، سنصنع "الجمال" لمتصفحات Firefox وSafari وChrome.
- ترجمة
مرحبا عزيزي هابرافريند! اليوم سوف نتعلم كيفية إنشاء أزرار CSS3 ثلاثية الأبعاد! وتستند هذه إلى Freebie PSD الشهير الخاص بـ Orman Clark لموقعه على الويب Premium Pixels. سنحاول إنشاء نسخة من هذه الأزرار باستخدام باستخدام CSSمع الحد الأدنى من كود HTML.
الخطوة 1:قم بإنشاء مستند HTML
سنبدأ بإنشاء واحدة جديدة وثيقة HTML. وسوف يعتمد على نموذج HTML5 بحيث يكون لدينا نقطة بداية سهلة. الآن سنضيف قائمة بالروابط. هذا هو كل ما في الأمر، وذلك بفضل CSS3 لعدم الاضطرار إلى استخدام divs وامتدادات إضافية.سنقوم بتعيين "أزرار" فئة لكل عنصر في القائمة. وبما أن أورمان استخدم ألوانًا مختلفة، فسنخصص لكل زر لونًا خاصًا به كفئة.
وهذا كل ما نحتاجه في هذه المرحلة.
الخطوة 2:قواعد CSS الأساسية
قبل الدخول في التدرجات والزوايا المستديرة وما إلى ذلك، هناك بعض القواعد الأساسية التي يجب الاهتمام بها. لا يوجد شيء خاص، فقط CSS2 العادي:Ul (نمط القائمة: لا شيء؛) a.button (العرض: كتلة؛ تعويم: يسار؛ الموضع: نسبي؛ الارتفاع: 25 بكسل؛ العرض: 80 بكسل؛ الهامش: 0 10 بكسل 18 بكسل 0؛ زخرفة النص: لا شيء؛ الخط: 12 بكسل" Helvetica Neue"، Helvetica، Arial، sans-serif؛ وزن الخط: غامق؛ ارتفاع الخط: 25 بكسل؛ محاذاة النص: المركز؛ )
الآن دعونا نطبق القواعد على الألوان المختلفة. على سبيل المثال، للرمادي. يمكن الاطلاع على جميع الألوان الأخرى في العرض التوضيحي.
/* GRAY */ .gray, .gray:hover ( اللون: #555; الحد السفلي: 4px صلب #b2b1b1; الخلفية: #eee; .gray:hover ( الخلفية: #e2e2e2; ) )
يجب أن ينتهي بك الأمر بشيء مثل هذا. يبدو قويًا جدًا، إذا كان عام 2008. 
الخطوة 3:إطارات مزدوجة!
إذا نظرت عن كثب إلى النتيجة النهائية، سترى أن هناك خطًا رفيعًا حول محيط الزر بأكمله. لتحقيق هذا التأثير سوف نستخدم العناصر الزائفة :قبلو :بعد.a.button (العرض: كتلة؛ تعويم: يسار؛ الموضع: نسبي؛ الارتفاع: 25 بكسل؛ العرض: 80 بكسل؛ الهامش: 0 10 بكسل 18 بكسل 0؛ زخرفة النص: لا شيء؛ الخط: 12 بكسل "Helvetica Neue"، Helvetica، Arial، sans -serif; العرض: 80 بكسل؛ الجزء السفلي: -1 بكسل؛ ) أ. الزر: قبل (الارتفاع: 23 بكسل؛ الجزء السفلي: -4 بكسل؛ الحد العلوي: 0؛)
بإضافة اللون تبدو الأزرار أفضل بكثير.
/* GRAY */ .gray, .gray:hover ( اللون: #555; الحد السفلي: 4px صلب #b2b1b1; الخلفية: #eee; ) .gray:before, .gray:after ( border: 1px Solid #cbcbcb; الحد السفلي: 1 بكسل صلب #a5a5a5 .رمادي:تحوم ( الخلفية: #e2e2e2; )
الخطوة 4:القليل من سحر CSS3
الآن دعنا ننتقل إلى الجزء الفعلي من CSS3. لنبدأ بالزوايا الدائرية:a.button (العرض: كتلة؛ تعويم: يسار؛ الموضع: نسبي؛ الارتفاع: 25 بكسل؛ العرض: 80 بكسل؛ الهامش: 0 10 بكسل 18 بكسل 0؛ زخرفة النص: لا شيء؛ الخط: 12 بكسل "Helvetica Neue"، Helvetica، Arial، sans -serif؛ وزن الخط: ارتفاع الخط: 25 بكسل؛ -webkit-border-radius: 3px؛
العناصر الطبيعية :قبلو :بعدتحتاج أيضا زوايا مدورة.
a.button: قبل، a.button: بعد ( المحتوى: ""؛ الموضع: مطلق؛ اليسار: -1px؛ الارتفاع: 25px؛ العرض: 80px؛ الأسفل: -1px؛ -webkit-border-radius: 3px؛ -moz - نصف قطر الحدود: 3 بكسل؛ نصف قطر الحدود: 3 بكسل؛ ) أ. الزر: قبل ( الارتفاع: 23 بكسل؛ الأسفل: -4 بكسل؛ الحد العلوي: 0؛ -نصف قطر الحدود -webkit: 0 0 3 بكسل 3 بكسل؛ -moz- نصف قطر الحدود: 0 0 3px 3px ؛ نصف قطر الحدود: 0 0 3px 3px ؛ ;
وأخيرا سوف نقوم بتطبيق التدرجات والظل الداخلي وظل النص. لتجنب الأخطاء في IE6، دعونا نضيف الحالة: تمت زيارتها.
/* GRAY */ a.gray, a.gray:hover, a.gray:visited ( اللون: #555; الحد السفلي: 4 بكسل صلب #b2b1b1; ظل النص: 0px 1px 0px #fafafa; الخلفية: #eee; الخلفية: -webkit-gradient(linear، أعلى اليسار، أسفل اليسار، من(#eee)، إلى(#e2e2e2) الخلفية: -moz-linear-gradient(top, #eee, #e2e2e2); #f5f5f5؛ ) .رمادي:قبل، .رمادي:بعد (الحدود: 1 بكسل صلب #cbcbcb؛ الحد السفلي: 1 بكسل صلب #a5a5a5؛) .رمادي:تحويم (الخلفية: #e2e2e2؛ الخلفية: -webkit- gradient(linear, أعلى اليسار، أسفل اليسار، من (#e2e2e2)، إلى (#eee) الخلفية: -moz-linear-gradient(top, #e2e2e2, #eee )
النتيجة النهائية لدينا ليست سيئة للغاية!
الخطوة 5:هل نسينا شيئا؟
كما ضمّن أورمان في تصميمه حالة: نشطة. لذلك، علينا ببساطة إضافته إلى الكود الخاص بنا.سنضع هذا الجزء من الكود أسفل قواعد الألوان المختلفة.
/* الحالة النشطة */ a.button:active (الحدود: لا شيء؛ الأسفل: -4px؛ الهامش السفلي: 22px؛ -webkit-box-shadow: 0 1px 1px #fff؛ -moz-box-shadow: 0 1px 1px #fff;
هذا ما حصلنا عليه:
الخطوة 6 (اختياري):المتصفحات القديمة
لذلك قمنا بإنشاء بعض أزرار CSS3 الرائعة التي تعمل بشكل عام المتصفحات الحديثة. ولكن ماذا عن Internet Explorer 8 والإصدارات الأقدم؟ لا تدعم هذه المتصفحات ظلال النص أو تدرجاته.لحل هذه المشكلة يمكننا استخدام مكتبة جافا سكريبت Modernizr، الذي يمكنه اكتشاف ما إذا كان متصفحك يدعم CSS3 وHTML5. المكتبة لا تحل المشكلة، بل تقدم فقط أسلوبًا بديلاً.
أولاً، سنقوم بإنشاء نسختنا الخاصة من Modernizr حتى لا نحمل جافا سكريبت ضخمة. ويمكن القيام بذلك على موقعه على الانترنت. بمجرد قيامنا بإدراج جافا سكريبت في مستندنا، نحتاج إلى تحديد القواعد فئات مختلفةلأسلوب بديل. سوف نستخدم الصور لتلك المتصفحات التي لا تدعم نصف قطر الحدود والتدرجات.
/* تراجع MODERNIZR */ .no-cssgradients a.button، .no-cssgradients a.button: تمت زيارته، .no-borderradius a.button، .no-borderradius a.button: تمت زيارته، .no-generatedcontent a.button، .لا يوجد محتوى تم إنشاؤه أ.زر: تمت الزيارة ( الخلفية: url(images/sprite.png) بدون تكرار 0 0px; الارتفاع: 32px; العرض: 82px; ) .no-cssgradients a.button:hover, .no-borderradius a .button:hover، .no-generatedcontent a.button:hover ( الخلفية: url(images/sprite.png) no-repeat 0 -32px; ) .no-cssgradients a.button: نشط، .no-borderradius a.button :active، .no-generatedcontent a.button:active ( الخلفية: url(images/sprite.png) no-repeat 0 -64px; Bottom: 0; line-height: 35px; ) .no-cssgradients a.gray, . no-cssgradients a.gray: تمت الزيارة، .no-cssgradients a.gray:hover ( موقف الخلفية-x: 0؛ ) .no-cssgradients a.pink، .no-cssgradients a.pink: تمت الزيارة، .no-cssgradients a.pink:hover ( موقف الخلفية-x: -82px؛ ) .no-cssgradients a.blue، .no-cssgradients a.blue: تمت الزيارة، .no-cssgradients a.blue:hover ( موقف الخلفية-x: -164 بكسل؛ ) .no-cssgradients a.green، .no-cssgradients a.green: تمت الزيارة، .no-cssgradients a.green:hover ( موقف الخلفية-x: -246px؛ ) .no-cssgradients a.turquoise، .no- cssgradients a.turquoise: تمت الزيارة، .no-cssgradients a.turquoise:hover ( موقف الخلفية-x: -328px؛ ) .no-cssgradients a.black، .no-cssgradients a.black: تمت الزيارة، .no-cssgradients a .black:hover ( موقف الخلفية-x: -410px؛ ) .no-cssgradients a.darkgray، .no-cssgradients a.darkgray: تمت الزيارة، .no-cssgradients a.darkgray:hover ( موقف الخلفية-x: - 492px; ) .no-cssgradients a.yellow, .no-cssgradients a.yellow:زارت, .no-cssgradients a.yellow:hover ( موقف الخلفية-x: -574px; ) .no-cssgradients a.purple, . no-cssgradients a.purple: تمت الزيارة، .no-cssgradients a.purple:hover ( موقف الخلفية-x: -656px؛ ) .no-cssgradients a.darkblue، .no-cssgradients a.darkblue: تمت الزيارة، .no- cssgradients a.darkblue:hover (background-position-x: -738px;) .no-cssgradients a.button, .no-cssgradients a.button: تمت الزيارة، .no-cssgradients a.button:hover, .no-cssgradients a .زر: قبل، .no-cssgradients a.button: بعد، .no-borderradius a.button، .no-borderradius a.button: تمت الزيارة، .no-borderradius a.button: التحويم، .no-borderradius a.button :قبل، .بلا حدود لنصف القطر أ.زر:بعد، .لا يوجد محتوى مُنشأ أ.زر، .لا يوجد محتوى مُنشأ أ.زر: تمت زيارته، .لا يوجد محتوى مُنشأ أ.زر:تحويم، .لا يوجد محتوى مُنشأ أ.زر:قبل ، .no-generatedcontent a.button:after ( border: 0; )
خاتمة
بهذه الطريقة لدينا بعض أزرار CSS3 الرائعة عبر المتصفحات. قد يبدو هذا كثيرًا من التعليمات البرمجية لعشرة أزرار، ولكنه مجرد عرض توضيحي لما يمكن لـ CSS3 فعله وما لا يمكنه فعله. يمكنك أن تفعل ما تريد معها! آمل أن يكون البرنامج التعليمي الخاص بي مفيدًا، شكرًا لاهتمامكم!في هذا اليوم سوف نخلق عدة أيقونات جميلةلموقع ويب يستخدم CSS3 والرسوم المتحركة. بفضل هذا الزر، يمكنك تحويل أي رابط على الصفحة إلى زر متحرك باسم فئة بسيط. بشكل عام، لا يوجد شيء معقد هنا، كما للوهلة الأولى.
مجرد تذكير بأن هذه الأزرار مجانية ويمكنك ذلك تحميل مجاني. دعنا نذهب.
أزرار CSS3 متحركة لموقعك على الويب
الآن بضع كلمات حول حجم الأزرار وزواياها الدائرية:
/* ثلاثة أحجام للأزرار */ .button.big ( حجم الخط: 30px;) .button.medium ( حجم الخط: 18px;) .button.small ( حجم الخط: 13px;) /* زوايا الأزرار مستديرة */ .button.rounded( -moz-border-radius:4em; -webkit-border-radius:4em; border-radius:4em; )
يوجد في الكود أعلاه ثلاث فئات - هذه هي كبير, واسطةو صغير. وفقا لذلك، لكل فئة نضعها معاني مختلفةبالبكسل. كل شيء واضح للعيان في الكود أعلاه.
الآن يأتي الجزء الممتع - الألوان. هنا، من حيث المبدأ، لا يوجد شيء معقد أيضا.
/* الزر الأزرق */ .blue.button( color:#0f4b6d !important; border:1px Solid #84acc3 !important; /* لون الخلفية الاحتياطية */ لون الخلفية: #48b5f2; صورة الخلفية: url("button_bg. png"), url("button_bg.png"), -moz-radial-gradient(مركز القاع، دائرة، rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(# 4fbbf7, #3faeeb صورة الخلفية: url("button_bg.png"), url("button_bg.png"), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from (rgba(89,208,244,1))), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); ) .blue.button:hover( لون الخلفية:#63c7fe; صورة الخلفية: url("button_bg.png"), url("button_bg.png"), -moz-radial-gradient(مركز القاع، دائرة، rgba (109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7); ), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear) ، 0% 0%، 0% 100%، من (#63c7fe)، إلى (#58bef7))؛ )
هذا كل شيء في الوقت الراهن. أود أن أحذرك مسبقًا من أن الأزرار حاليًا قد لا تعمل في بعض المتصفحات لأنها ليست جميعها تدعم CSS3 حتى الآن. لكن يبدو لي أن هذه المشكلة سيتم حلها قريبًا.