مصمم - مدونة تصميم وتطوير المواقع العربية

الزوايا المستديرة أصبحت من أكثر التأثيرات المطلوبة في المواقع لتصميمات معاصرة، لأنها بالطبع جميلة المنظر. ولكنها مع الأسف من أكثر مسببات الصداع للمصمم وعملها يتطلب الجهد الزائد (وغير اللازم) في بعض الأحيان.

لكم اليوم بعض الطرق لدعم جميع المتصفحات في عرض الزوايا المستديرة في تصميماتكم باستخدام مزيج من CSS3 وجافا سكريبت.

عرض
تنزيل

للمتصفح الحديث

الطريقة المستخدمة للمتصفحات الحديثة بكل بساطة مباشرة، فهي تستخدم أنماط CSS3 الحديثة كالـborder-radius. سنضع نصف قُطر ٢٥ بِكسل وخلفية بلون رمادي داكن #2c2c2c.

• متصفحات الوِب كيت
• متصفحات موزيلا

#box {
	border-radius:25px;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
}

أتمنى أن يكون كذلك الحال مع بقية المتصفحات، ولكن كلنا نعلم أن هذا مستحيل، وهذا يدفعنا إلى النقطة الآتية وهي كيفية التعامل مع المتصفحات منتهية الصلاحية (إحم إكسبلورر)!

إكسبلورر ٨ وما قبل

لأجل السهولة، سأستخدم مكتبة جافا سكريبت Curvy Corners. ولكن بالطبع، أي متصفح بجافا سكريبت معطلة لن يتمتع بهذا التأثير! كل ما عليك فعله هو الإشارة إلى الملف الـjs في الملف الرئيسي إضافةً إلى أنماط الـCSS3 المذكورة سابقاً وسيقوم الجافا سكريبت بفعل كل السحر!

أسلوب بديل: الأنماط فقط!

عرض

تحدثت في النقطة السابقة عن العائق الأساسي لللجوء إلى جافا سكريبت، مع سهولة استخدامها، أي متصفح بدون تفعيل الجافا سكريبت لن يرى هذا التأثير، بالإضافة إلى الجهد الزائد على الخوادم وقت تحميل الصفحة. هذا يأخذنا إلى الملاذ الأخير!

لا جافا سكريبت ولا أنماط CSS3 محدودة الدعم، هذا الأسلوب يستخدم أنماط الـCSS الإعتيادية بالإضافة إلى صورة واحدة، فهو يعمل على كل المتصفحات، قديماً كان أو حديثاً.
عليك إضافة العناصر التالية في التوصيف:

كذلك ستكون الأنماط:

.tl {
	position:absolute;
	top:0;
	left:0;
	background:url(corner.png) top left no-repeat;
	width:25px;
	height:25px;
}

.tr {
	position:absolute;
	top:0;
	right:0;
	background:url(corner.png) top right no-repeat;
	width:25px;
	height:25px;
}

.bl {
	position:absolute;
	bottom:0;
	left:0;
	background:url(corner.png) bottom left no-repeat;
	width:25px;
	height:25px;
}

.br {
	position:absolute;
	bottom:0;
	right:0;
	background:url(corner.png) bottom right no-repeat;
	width:25px;
	height:25px;
}

ماذا حدث هنا؟

باستخدام الـCSS وهذه الصورة، تم توزيع أركانها على الأربعة عناصر بالفئات tl وtr وbl وbr top left, top right, bottom left, bottom right. ولأننا نستخدم الـCSS Sprites، احتجنا فقط إلى صورة واحدة وأعدنا استخدامها لكل عنصر من العناصر المذكورة، وهذا يخفف الجهد على الخوادم ويقنن من استخدامك الشهري لنقل البيانات وفي نهاية المطاف يوفر مصاريف الموقع.