سلام عليكم ورحمة الله وبركاته ،،
أقدم لكم درس جميل جداً .. يتيح لك إستعمال الزوايا المنحنية في أحد جداول الصفحة بدون أن تستخدم أية صور وذلك عن طريق إستخدام الـCSS
بداية أعرض لكم فوائد هذا الدرس:
السرعة : حيث أنه لا توجد أية صور تستدعي التحميل أثناء التصفح لهذا هذه الخاصية ستتيح لك سرعة التصفح وإنشاء سريع للصفحات
الوقت : حيث أنك سوف تستخدم الـCSS بدلاً من تصميم الصور المنحنية وتقطيعها ثم تركيبها على البرامج الخاصة بتصميم المواقع ثم رفعها على موقعك .. هذه الطريقة ستغنيك عن هذه الخطوات
المستقبل : هذه الطريقة ستكون مستقبل الزوايا المنحنية للجداول والطريقة التقليدية ستنقرض تذريجياً وذلك كما أسلفت في البند الأول
لنبدأ الدرس بمحتويات الـ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 :
كود:
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;
}
بعد إتمامك للخطوات أعلاه يجب أن يكون الناتج هكذا : من هنا
للأمانة رابط الدرس: من هنا
تحياتي