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

[WrDi]

سلام عليكم ورحمة الله وبركاته ،،



أقدم لكم درس جميل جداً .. يتيح لك إستعمال الزوايا المنحنية في أحد جداول الصفحة بدون أن تستخدم أية صور وذلك عن طريق إستخدام الـ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;
}

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

للأمانة رابط الدرس: من هنا

تحياتي

[SnaKeRz]

شكرا لك على الدرس الجميل نتمنى أن تمدنا بدورس CSS الجميلة

[Net Hunter]

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

[WrDi]

يا هلا اخوي SnaKeRz يشرفني ردك الجميل
مشرفنا القدير Net Hunter
اعتقد الموقع الذي يحتوي على CSS & AJAX راح يكون مدهش ومرتب وجميل
فيجب علينا تتطوير انفسنا للحاق هذا الركب

[محمد عباس]

شكراً لك أخى ,

و هذا درس آخر مشابه

http://www.html.it/articoli/nifty/index.html
سلامى

[mjh00l]

شرح كافي ووافي خيوو .
يسلمو عالنقل ..
بإنتظار جديدك ..

[شبكة الملكة]

رائع وممتاز .. بدون استخدام الصور ..

[RHB]

إلى مفضلتي بسرعة الصاروخ

شكرا جزيلا لك

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

تسلم اخي WrDi على الدرس الجميل

موضوعك رائع و إلي الامام دائما ان شاء الله

لك أرق تحية

اسلام ،

[WrDi]

محمد عباس
يشرفني مرورك اخي الكريم
ومشكور على الاضافة الجميلة تسلم يدك

mjh00l
يا هلا اخوي ما عملنا غير الواجب

شبكة الملكة
الرائع هو وجود اخي الكريم بمنتدى سوالف

RHB
يا هلا فيك ترا مسكينة ها المفضلة ما تتحمل صواريخ خلها لإسرائيل ابرك

LiMoO4uS
يا هلا اخوي الى الامام معا انشاء الله
واشكرك على مرورك الكريم

[مناااف]

مشكور اخوي WrDi

بارك الله فيك

[Bo3oof]

شكراً لك أخى ,

و هذا درس آخر مشابه

http://www.html.it/articoli/nifty/index.html
سلامى

هذه كانت النسخة القديمة من الNiftycorner وأصبح اسمه الان NiftyCube
http://www.html.it/articoli/niftycube/index.html
بس مشكلته انه يستخدم جافاسكربت أي أن على المستخدم أن يكون فاتح الجافاسكربت في المتصفح... ولكنه من ناحية الميزات فهو الأروع بين فئته

وشكرا أخي WrDi على هالدرس الجميل
تحياتي