الفكرة واضحة من العنوان (ومعروفة للجميع ) فقط أحببت مشاركتكم به ولمن لا يعرف طريقة عملها ، وهي عمل الحواف الدائرية الجميلة والتي نراها في معارض تصاميم CSS المختلفة ، أحب أن أذكر أني كتبت درس سابق لطريقة عمل حواف دائرية في الفوتوشوب سهلة جداً ،ولكن هذا الدرس يتحدث عن طريقة عملها في CSS أي ربط الصور أو تقسيمها وعرضها في صفحة الويب على شكل صندوق.

توضيح عمل الحواف الصندوق

لعمل الحواف الدائرية ، سأعرض ثلاثة طرق وطريقة أخرى سأضع رابط لها فقط وهي عملها بـ CSS3 ، أما عملها في شفرة HTML عن طريق كتابة أوسمة div متداخلة (حسب الطريقة) ، وغالباً تتكون الحواف من أربع صور ( أعلى اليمين ـ أعلى اليسار ـ أسفل اليمين ـ أسفل اليسار ).
ويمكن إستخدام صورة واحدة ودمجها بإستخدام الخاصية background-position في CSS ، ولكن سنستخدم الطريقة العادية ، المهم أن تعرف طريقة عملها إما بإستخدام صور gif أو png (الأفضل) أو عن طريق CSS3.

الطريقة السهلة لعمل الحواف

أسهل طريقة لعملها (إذا كنت تريد تثبيت العرض أو الطول) بوضع صورة واحدة تكفي أو إثنين في الأعلى والأسفل ، غالباً تستخدمها إذا كنت تريد تعديلها مرة واحدة فقط عن طريق الفوتوشوب وبين الصورتين يكون المحتوى بينهما ، شفرة HTML ، إستخدمت ثلاثة من أقسام من أوسمة DIV:

<!-- box -->
<div id="box">
        
        <!-- boxTop -->
        <div id="boxTop"></div>
        	
             <!-- content -->  
             <div id="content">
                       .. هنا نضع المحتويات ..
            </div>
            <!-- /content --> 
        
        <!-- /boxBottom -->
        <div id="boxBottom"></div>
            
</div>
<!-- /box -->

تنسيق CSS:

#box { margin: 0 auto; width: 450px; background: #fff; }
	
#boxTop {
	width: 450px;
	height: 7px;
	background: url(boxR.gif) no-repeat top;
}
	
#boxBottom {
	width: 450px;
	height: 7px;
	background: url(boxR.gif) no-repeat bottom;
}
	
#box #content {
	padding: 15px;
}

شرح شفرة CSS مثل ما قمت به من خلال الصورة:

gif1

الطريقة المرنة لعمل الحواف

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

الطريقة الأولى: تكون عن طريق أربعة صور من نوع gif مثلاً ، ستكون مركزة على الزوايا الأربع أنظر إلى شفرة html:

<!-- box -->
<div id="box">

	<!-- boxTopLeft -->
	<div id="box-top-left">
            	
             		<!-- boxTopRight -->
           		<div id="box-top-right">
                	
             			<!-- boxBottomLeft -->
             		 	<div id="box-bottom-left">
                    
                    			<!-- boxBottomRight -->
                    			<div id="box-bottom-right">
                         
                             		<div id="content">
                             		
                                			.. هنا نضع المحتويات ..
                            
                        			</div>
                        			<!-- /boxBottomRight -->
                    		</div>
                   		<!-- /boxBottomLeft -->
                    
                	</div>
                	<!-- /boxTopRight -->
                
	</div>
	<!-- /boxTopLeft -->
            
</div>
<!-- /box -->
</div>

تنسيق CSS:

#box { margin: 0 auto; width: 450px; }
	
#box-top-left { 
	background: #ffffff url(NorTopLeft.gif) no-repeat;
	width: 100%;
}
	
#box-top-right { 
	background: url(NorTopRight.gif) no-repeat top right;
	width: 100%;
}
	
#box-bottom-right { 
	background: url(NorBottomRight.gif) no-repeat bottom right;
	width: 100%;
}
	
#box-bottom-left { 
	background: url(NorBottomLeft.gif) no-repeat bottom left;
	width: 100%;
}
	
#box #content {
	padding: 15px;
}	

لاحظ أن الكلاس box-top-left سيكون الكلاس الرئيسي بعد الكلاس box ويضمّن باقي الكلاسات ، أما الكلاسات الأخرى فيتم وضعها في أماكنها عن طريق خاصية backround-position أو نختصرها ضمن الخاصية background ، قمت بوضع خلفية لكل كلاس ووضع إسم الصورة في إسم الكلاس (وذلك لتسهيل فهم العملية) ، هذه الصورة تبين الزوايا مع صورها التي نسقناها في الشفرة السابقة:

gif2

الطريقة الثانية: عن طريق صور PNG ، ولكن هنا سنضع طريقة لعملها بعمودين ، عمود متمدد ( من اليسار) وعمود ثابت (من اليمين):

png1

العمود المتمدد سيحتوي على صورة عريضة بقياس طويل لإستخدامه في عدة قياسات ، وسنطبق ذلك في الأعلى والوسط والأسفل ، شفرة HTML:

<div id="box">	
    	
        	<!-- topRight and topLeft -->
    	<div class="topRight"><div class="topLeft"></div></div>
        	<!-- /topRight and topLeft -->
        
        	<!-- allContent -->
       	 <div class="allContent">
        	
            		<!-- centerRight -->
            		<div class="centerRight"><div class="centerLeft">
            	
               	<!-- content -->
            		<div id="content">
                
                		.. نضع المحتويات هنا ..

                	</div>
                	<!-- /content -->
                
            		</div></div>
            		<!-- /centerRight -->
            
        </div>
        <!-- /allContent -->
        
        <!-- bottomRight and bottomLeft -->
        <div class="bottomRight"><div class="bottomLeft"></div></div>
        <!-- /bottomRight and bottomLeft -->
        
</div>

شفرة CSS:

#box { /* مهم للتحكم بعرض الصندوق */
	width: 90%;
	margin: 0 auto;
	color: #333333;
}
#content { /* مهم لترتيب المساحات الجانبية للنص */
	margin: 0 -25px 0 10px;
	padding: 1px 15px;
}
	
#box .topRight , #box .topLeft ,#box .bottomRight , #box .bottomLeft { height: 37px; }
#box .topRight {
	background: url(topRight.png) no-repeat right top;
}
#box .topLeft {
	background: url(topLeft.png) no-repeat left top;
	margin-right: 37px;
}
#box .centerRight {
	background: url(centerRight.png) repeat-y right top;
}
#box .centerLeft {
	background: url(centerLeft.png) repeat-y left top;
	margin-right: 34px;
}
#box .bottomRight {
	background: url(bottomRight.png) no-repeat right bottom;
}
#box .bottomLeft {
	background: url(bottomLeft.png) no-repeat left bottom;
	margin-right: 37px;
}

سأشرح ما قمت به عبر نقاط سريعة:

  • الكلاس box نستخدمه لتحديد عرض الصندوق.
  • الكلاس content نستخدمه لموازنة المحتوى النصي للصندوق ، ستلاحظ أنك في البداية عدم تناسق النص ووجود فراع في الأسفل تم حل المشكلة عن طريق الخاصية padding.
  • النسبة للكلاسات الداخلية نعين طولها حسب طول الصورة ، وذلك لكي تظهر في الصفحة تماماً.
  • بقية الأمور سهلة ، فقط هناك ملاحظة على الكلاس topLeft و centerLeft و bottomLeft وهي تعيين قيمة لخاصية margin-right لذلك لإظهار الصورة التي في اليمين لأن الكلاسات السابقة التي ذكرتها تكون ستكون داخل الكلاسات اليمنى (راجع شفرة html).

الطريقة الثالثة: وهي أفضل من الطريقة الثانية وسنستخدم صور PNG أيضاً ولكن بدون صورة عريضة بقياس طويل ، أولاً هذه الصورة التي ستشرح العملية مع أسماء الصور التي سنستخدمها ، وأيضاً أسماء الصور هي نفسها أسماء الكلاسات التي سنستخدمها:

png2

هنا شفرة HTML:

<!-- box -->
<div id="box">	
    	
	<!-- topRight and topLeft -->
    	<div class="topRight"><div class="topLeft"><div class="topCenter"></div></div></div>
	<!-- /end:topRight and topLeft -->
        
	<!-- allContent -->
	<div class="allContent">
        	
		<!-- centerRight -->
		<div class="centerRight"><div class="centerLeft">
            	
			<!-- content -->
			<div id="content">
                
                			.. نضع المحتويات هنا ..
                		</div>
                		<!-- /content -->
                
            		</div></div>
            		<!-- /centerRight -->
            
        </div>
        <!-- /allContent -->
        
        <!-- bottomRight and bottomLeft -->
        <div class="bottomRight"><div class="bottomLeft"><div class="bottomCenter"></div></div></div>
        <!-- /bottomRight and bottomLeft -->
        
</div>
<!-- /box -->

تنسيق CSS:

#box { /* مهم للتحكم بعرض الصندوق */
	width: 90%;
	margin: 0 auto;
	color: #333333;
}
#content { /* مهم لترتيب المساحات الجانبية للنص */
	margin: 0 -25px 0 10px;
	padding: 1px 15px;
	background: #fff;
}
	
#box .topCenter , #box .topLeft ,#box .bottomCenter , #box .bottomLeft { height: 37px; }
	
#box .topRight {
	background: url(topRight.png) no-repeat right top;
}
#box .topLeft {
	background: url(topLeft.png) no-repeat left top;
	margin-right: 37px;
}
#box .topCenter {
	background: url(topCenter.png) repeat-x top;
	margin-left: 37px;
}
#box .bottomCenter {
	background: url(bottomCenter.png) repeat-x bottom;
	margin-left: 37px;
}
#box .centerRight {
	background: url(centerRight.png) repeat-y right top;
}
#box .centerLeft {
	background: url(centerLeft.png) repeat-y left top;
	margin-right: 34px;
}
#box .bottomRight {
	background: url(bottomRight.png) no-repeat right bottom;
}
#box .bottomLeft {
	background: url(bottomLeft.png) no-repeat left bottom;
	margin-right: 37px;
}

ليست هناك ملاحظات على شفرة CSS تقريباً هي نفسها الملاحظات التي ذكرتها في الطريقة الثانية ، فقط أضفنا إستخدام الخاصية margin-left مع margin-right في كلاسات معينة وذكرنا سببها في الطريقة الثانية وذلك لأظهار الكلاسات الأخرى كما يجب بدون مشاكل (ولأنها متضمنة بعضها البعض) – عند تطبيقك للدرس ستفهم العملية 100%.

عملها عن طريق CSS3

لا زال دعم CSS3 يقتصر على المتصفحات الحديثة مثل الفايرفوكس وسفاري وجميع المتصفحات التي تعمل على محركات متصفح الويب مثل Webkit و Gecko ، عموماً طريقة عملها في CSS3 رائعة وتعطيك شكل مناسب وسريع بدون كثرة الكلاسات وتعديل القياسات ، من ضمن الخواص الجديدة في CSS3 خاصية border-radius المتخصصة لعمل حواف لحدود الصندوق  ، تستطيع عمل حواف دائرية في CSS3 عبر هذه الشفرة:

#box {
	border: 1px solid #000; /* لن يعمل المثال بدون تحديد قيم الحدود أولاً */
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

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

-moz-border-radius-topleft | -webkit-border-top-left-radius
-moz-border-radius-topright | -webkit-border-top-right-radius
-moz-border-radius-bottomleft | -webkit-border-bottom-left-radius
-moz-border-radius-bottomright | -webkit-border-bottom-right-radius

ملاحظة: خاصية ” moz-border-radius- ” تعمل في متصفح فايرفوكس وسفاري ، أما Opera كما بحثت فإنك ستسبدلها بهذه الخاصية ” opera-border-radius- ” أو “o-border-radius-” ، هذه الخاصية لن تعمل معك في إصدار Opera القديم و لأنها أضيفت حديثاً.

ملاحظات أخيرة

جميع الأمثلة متوافقة مع أغلب المتصفحات مثل Mozilla Firefox ، Internet Explorer ، Google Crome وغيره ما عدا الأخيرة بسبب عدم عدم متصفح الإكسبلورر CSS3 بعد (إحتمال يدعمها في الإصدارة Internet Explorer 200!!)

جميع الأمثلة