[شرح] عمل زوايا منحنية لجدول بدون إستخدام صور :: عن طريق الـcss

[Mr.Mahdy]

أقدم لكم درس جميل جداً .. يتيح لك إستعمال الزوايا المنحنية في أحد جداول الصفحة بدون أن تستخدم أية صور وذلك عن طريق إستخدام الـCSS

بداية أعرض لكم فوائد هذا الدرس:

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

لنبدأ الدرس بمحتويات الـHTML الخاصة للجدول

هذا هو الكود الخاص بالجدول

<div class="rounded-box">
    <!-- Corners -->
    <div class="top-left-corner">
        <div class="top-left-inside">
            &bull;
        </div>
    </div>
    <div class="bottom-left-corner">
        <div class="bottom-left-inside">
            &bull;
        </div>
    </div>
    <div class="top-right-corner">
        <div class="top-right-inside">
            &bull;
        </div>
    </div>
    <div class="bottom-right-corner">
        <div class="bottom-right-inside">
            &bull;
        </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;
}

بعد إتمامك للخطوات أعلاه يجب أن يكون الناتج هكذا : إضغط هنا

رابط الدرس: إضغط هنا
.....................

مشكور للاخ a3-x

[waq]

رااائع جدا والله

فعلا رائع ما تعلمنا اياه

بارك الله بك

[العرب للجميع]

الدرس جميل ورائع وبسيط

لكن اعتقد ان مكانه http://www.swalif.net/softs/swalif44

على أي حال شكراً لك اخي والى الامام دائماً

أرق تحية

[ADV]

جزيت خيرا

[owner]

شكرا لك ..

شرح جميل جدا جدا ..

[dev11]

مثال آخر [ فصل المحتويات عن العرض ]

[ADV]

من افضل ماشاهدة بصراحة نحتاجها كثيرا وهاهي قد اتت


شكرا اخي الكريم