صندوق

السلام عليكم ورحمة الله وبركاته.. منذ فترة صغيرة لم أكن أستخدم من برامج التصميم غير برنامج الرسام الخاص بويندوز، وذلك لأخذ صورة Capture من الشاشة، حاولت عدة مرات أن أستخدم برامج أخرى للتصميم كالفوتوشوب ولكنني فشلت.. فأقنعت نفسي ذلك الحين أنني لا ولن أجيد أبدا التصميم.. ولكن ذلك الحال قد تغير فعملي كان يتطلب الكثير من تصفح الانترنت والمقارنة دائما بين المواقع وصفحات الانترنت واستعراض الكثير من التصاميم ومشاهدة الأنماط التقليدية والغير تقليدية التي يستعملها المصممون. بدأت بتقليد بعض الأشياء والحمدلله أحرزت تقدما جيدا وبدأت أن أغير القناعة السابقة بعدم صلاحيتي للعمل في مجال التصميم. الصناديق بالأركان المدورة أكثر جاذبية وألطف من من الصناديق بأركان معقوفة أنظر الصورة مثلا في هذه المدونة أعتقد أنها أكثر لطفا من الصور العادية مثل الصور في هذه المدونة، أيضا الموضوع ينطبق على أي أشكال وصناديق أخرى وليس فقط الصور. وجدت طريقة لعمل الصناديق بأركان بمدورة باستخدام CSS، والشكل النهائي سيبدو كهذا الصندوق ضع هذه الكلاسات في منطقة الـ head أو بملف CSS خارجي ثم اربطه بصفحتك:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em} .br {background: url(br.gif) 100% 100% no-repeat} .tl {background: url(tl.gif) 0 0 no-repeat} .tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px} .clear {font-size: 1px; height: 1px} واستخدم الكود التالي طبعا داخل body :

<div class="bl"><div class="br"><div class="tl"><div class="tr"> Lorem ipsum dolor sit amet consectetur adipisicing elit </div></div></div></div> <div class="clear"> </div>

والملفات bl.gif ، br.gif، tl.gif ، tr.gif هي أركان الصندوق

المصدر : http://www.sitepoint.com/article/css-round-corners-boxes-curves

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