طريقة عمل صندوق بأركان مدورة

السلام عليكم ورحمة الله وبركاته.. منذ فترة صغيرة لم أكن أستخدم من برامج التصميم غير برنامج الرسام الخاص بويندوز، وذلك لأخذ صورة 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 دولارات لدعم جهود المطور! رأيت الأسلوب السابق عدة مرات عند المواقع الأجنبية ولكني لم أراه عند العرب.. لماذا يا ترى!!

 

3 تعليقات to “طريقة عمل صندوق بأركان مدورة”

  1. طريقة عمل صندوق بأركان مدورة باستخدام CSS3 « صندوق Says:

    […] أشرت سابقا إلى طريقة عمل صناديق بأركان مدورة .. نفس النتائج يمكن الحصول عليها ومن غير صور ولكن […]

  2. Watch The X Factor – Season 1, Episode 15: LIVE Performance Show #3 Says:

    Watch The X Factor – Season 1, Episode 15: LIVE Performance Show #3…

    […]طريقة عمل صندوق بأركان مدورة « صندوق[…]…

  3. ps3 mkv Says:

    ps3 mkv…

    […]طريقة عمل صندوق بأركان مدورة « صندوق[…]…

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: