حسنًا، بعد رؤية هذا العنوان، يمكننا تجاهل متصفحات IE أولاً.
أعترف بأن لدي ميلًا إلى الحد الأدنى وأريد أن أكون قادرًا على فعل المزيد بأقل قدر من التعليمات البرمجية والصور.
على الرغم من أن CSS3 يضيف فقط بعض الميزات الجديدة، إلا أن هذه الخصائص يمكنها القيام بالعديد من الأشياء المفيدة وتبسيط عملنا إلى حد كبير. تستفيد الأزرار التي صنعناها اليوم بشكل كامل من الزوايا الدائرية وتأثيرات ظل الصندوق وظل النص في CSS3، أثناء استخدام ألوان RGBa.
دعونا نلقي نظرة على العرض التوضيحي أولاً:
يمكننا صنع هذه الأزرار الجميلة في أربع خطوات:
1. الإعدادات الأساسية للأزرار
نحتاج إلى تعيين النمط الأساسي للزر أولاً. هنا نستخدم العلامة، بالطبع، يمكنك أيضًا استخدام علامات الإدخال، وما إلى ذلك. يتم استخدام العلامة هنا لأن العلامة فقط من بين هذه العلامات الثلاث هي التي تدعم. : تحوم الطبقة الزائفة.
وفيما يلي المحتوى المقتبس: .btn { |
شكرًا لـ ytzong Children's Shoes على اقتراحه، لقد قمنا بتغيير العرض: كتلة مضمّنة، والتي يمكنها حفظ الأسطر العائمة والهامش من التعليمات البرمجية. ——[email protected]
2. صورة متدرجة png شبه شفافة
هذه هي الصورة الوحيدة التي نستخدمها هنا. يتم استخدام صورة png الشفافة هذه لتحقيق التدرجات اللونية. يمكننا أن نطلق على هذه الصورة تدرج شفافية أحادي اللون. في CSS، يمكنك تحقيق تأثيرات تدرج ألوان مختلفة باستخدام عرض توضيحي للخلفية + صورة png مثل هذه. بالطبع، هذه ليست إحدى ميزات CSS3، باستثناء المتصفحات الأقل من IE6، يمكن لجميع المتصفحات تحقيق هذا التأثير. يمكنك النقر هنا لعرض الملف بصيغة png.
وفيما يلي المحتوى المقتبس: .btn { |
3. زوايا مستديرة
تعد الزوايا الدائرية (border-radius) واحدة من أفضل ميزات CSS3 التي تدعمها المتصفحات حاليًا، بالإضافة إلى متصفحات IE، تدعمها جميع متصفحات المستوى A، على الرغم من أن معظمها يتم تنفيذها من خلال السمات الخاصة، إلا أنها متاحة على الأقل. .
وفيما يلي المحتوى المقتبس: .btn { |
4.الظلال وRGBa
يعد Box-shadow وtext-shadow من الخصائص المهمة الجديدة المضافة إلى CSS3 ويمكنهما بسهولة تنفيذ ظلال العناصر وظلال النص على مستوى الكتلة. ومع ذلك، أليس من الأفضل أن يكون لون الظل شبه شفاف، وبهذه الطريقة سوف يمتزج العنصر بشكل أفضل مع الخلفية. تجدر الإشارة إلى أن FF يدعم فقط سمة ظل النص حتى الإصدار 3.5 (المدعوم حاليًا بواسطة Firefox 3.5beta4).
وفيما يلي المحتوى المقتبس: .btn { |
حسنًا، الآن أصبح الزر الخاص بنا جاهزًا تمامًا. لقد حقق هدفنا.
هذا الزر أسود اللون، لذا فإن استخدام الأزرار ذات الألوان الأخرى أسهل:
وفيما يلي المحتوى المقتبس: ... |
يرجى ملاحظة أنه يجب وضع هذه الأنماط بعد .btn. بهذه الطريقة، يمكن أن يتجاوز لون خلفية هذه الأزرار الأخضر والأزرق والأحمر وما إلى ذلك لون خلفية .btn. ثم استخدم
أخيرًا، دعونا نشفق على متصفح IE، ستعرض هذه الأزرار زوايا قائمة، وألوان متدرجة، بدون ظلال، ولا ألوان شفافة في متصفح IE7 وIE8، ولكن في IE6، ستعرض خلفية زرقاء فاتحة، وذلك لأن IE6 لا يدعم شفافية png إذا كنت تريد أن يبدو كزر في IE6، فما عليك سوى استخدام مرشحات IE بعد js.