أدوات لتصميم الزوايا المدوّرة بتقنية CSS

المحرّر: بوابتي

أدوات لتصميم الزوايا المدوّرة بتقنية CSS

غني عن القول أن استعمال تقنية CSS ما انفك يتزايد كأداة لتطوير صفحات الواب، عوض استعمال تقنيات HTML العادية حين توصيف وسوم الصفحة.
و CSS كما هو معروف عبارة عن لغة لتنسيق مكونات صفحات الواب، وهي لغة برمجة بسيطة، بمعنى أنها لا تحتوي على أوامر الشروط وأوامر الكتابة وغيرها كما يوجد باللغات الأخرى، وإنما تحتوي فقط على خواص التنسيق التي تطبق على وسوم TAG صفحة الواب، كأن يقع تغيير اللون والحجم والخلفية والأبعاد ونوعية الخط وغيرها من الخواص.

ويمكن برمجة CSS إما مباشرة خلال صفحة الواب، و إما بملف منفصل ذي امتداد CSS، ويكون مرتبطا بصفحة الواب. وتتيح تقنية CSS الاستقلالية بين محتوى صفحة الواب، وبين عمليات التنسيق، كما تيسر عمليات تبديل التنسيق، من حيث انه يمكن إحداث تغيير على مجمل الصفحات من خلال تغيير محتوى CSS المصدر.

ويمكن تفهم مسألة الاستقلالية التي أوجدها CSS بين المحتوى وبين التنسيق، من ذلك مثلا ان تنسيق صفحة واب بجداول متعددة متداخلة وذات محتوى متغير متات من قاعدة بيانات، يطرح أحيانا مشكلة كبيرة، ولكن من خلال دوال CSS فان الأمر يبدو متيسرا، لأنك لن تجد أمامك الا مجموعة من وسوم div مرتبطة ب CSS من خلال class او بالمعرفات الموحدة ID، وبداخلها ستكتب بيسر شيفرة php مثلا من دون النظر لمشكلة الجداول وتنسيقها، ومجموعة الشيفرة من دون المحتوى المتغيرphp لن يتجاوز سطرين على اقصى تقدير عوض عشرات الأسطر بالطريقة التقليدية من خلال استعمال وسوم html العادية.

الزوايا المدوّرة:

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

.angle .b1, .angle .b2, .angle .b3, .angle .b4, .angle .b5 {
display:block;
overflow:hidden;
height:1px;
background:#eca;
border-left:1px solid #000;
border-right:1px solid #000;
}

.angle .b1 {margin:0 5px; background:#000;}
.angle .b2 {margin:0 4px;}
.angle .b3 {margin:0 3px;}
.angle .b4 {margin:0 2px;}
.angle .b5 {margin:0 1px;}

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

تجد من هنا ادوات تنتج الزوايا المدورة من خلال شيفرة CSS مفصلة

الموقع الأول
الموقع الثاني

وهنا موقع ينتج الشيفرة المصدرية للزوايا المدورة بطريقة مختصرة.

اضغط على الكلمات المفتاحية التالية، للإطلاع على المقالات الأخرى المتعلقة:

تطوير ويب، CSS، php،

يسمح بالنقل، بشرط ذكر موقع "بوابتي" مصدر المقال، ويفضّل أن يكون ذلك في شكل رابط

تاريخ نشر المقال بموقع بوابتي

17-11-2008

تقاسم المقال مع اصدقائك، أو ضعه على موقعك

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

رابط المقال

لإعلام أحدهم بهذا المقال، قم بإدخال بريده الإلكتروني و اسمك، ثم اضغط للإرسال

البريد الإلكتروني

اسمك