أقدم لكم درس جميل جداً .. يتيح لك إستعمال الزوايا المنحنية في أحد جداول الصفحة بدون أن تستخدم أية صور وذلك عن طريق إستخدام الـCSS
بداية أعرض لكم فوائد هذا الدرس:
* السرعة : حيث أنه لا توجد أية صور تستدعي التحميل أثناء التصفح لهذا هذه الخاصية ستتيح لك سرعة التصفح وإنشاء سريع للصفحات
* الوقت : حيث أنك سوف تستخدم الـCSS بدلاً من تصميم الصور المنحنية وتقطيعها ثم تركيبها على البرامج الخاصة بتصميم المواقع ثم رفعها على موقعك .. هذه الطريقة ستغنيك عن هذه الخطوات
* المستقبل : هذه الطريقة ستكون مستقبل الزوايا المنحنية للجداول والطريقة التقليدية ستنقرض تدريجياً وذلك كما أسلفت في البند الأول
لنبدأ الدرس بمحتويات الـHTML الخاصة للجدول
هذا هو الكود الخاص بالجدول
كود HTML:
<div class="rounded-box">
<!-- Corners -->
<div class="top-left-corner">
<div class="top-left-inside">
•
</div>
</div>
<div class="bottom-left-corner">
<div class="bottom-left-inside">
•
</div>
</div>
<div class="top-right-corner">
<div class="top-right-inside">
•
</div>
</div>
<div class="bottom-right-corner">
<div class="bottom-right-inside">
•
</div>
</div>
<!-- Content -->
<div class="box-contents">
Contents go here, but it must be at least
two lines to look any good.
</div> <!-- end div.box-contents -->
</div> <!-- end div.rounded-box -->
وهنـا الـClasses الخاصة بالـStyle Sheet :
كود HTML:
div.rounded-box {
width: 9em;
background-color: #E6E6E6;
margin: 3px;
}
div.top-left-corner, div.bottom-left-corner,
div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px;
background-color:#FFF; overflow:hidden;}
div.top-left-inside, div.bottom-left-inside,
div.top-right-inside, div.bottom-right-inside
{position:relative; font-size:150px; font-family:arial;
color:#E6E6E6; line-height: 40px;}
div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}
div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}
div.box-contents {
position: relative; padding: 8px; color:#000;
}
بعد إتمامك للخطوات أعلاه يجب أن يكون الناتج هكذا : إضغط هنا
رابط الدرس: إضغط هنا
.....................
مشكور للاخ a3-x