النتائج 1 إلى 12 من 12

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

  1. #1
    عضو نشيط جدا
    تاريخ التسجيل
    Aug 2004
    المشاركات
    359

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



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



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

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

    تحياتي





    __________________
    <-- مدخل التكنولوجيا -->
    www.Techentr.com
    البساطة أ ُم الجمال
    Google Forever
    Firefox Forever
    لاَ اِلَهَ اِلاَّ اَنْتَ سُبْحَانَكَ اِنِّي كُنْتُ مِنَ الظَّالِمِينَ


  2. #2
    عضو نشيط
    تاريخ التسجيل
    Jun 2005
    المشاركات
    122


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






  3. #3

    تاريخ التسجيل
    May 2001
    المشاركات
    3,294


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





    __________________
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور

  4. #4
    عضو نشيط جدا
    تاريخ التسجيل
    Aug 2004
    المشاركات
    359


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





    __________________
    <-- مدخل التكنولوجيا -->
    www.Techentr.com
    البساطة أ ُم الجمال
    Google Forever
    Firefox Forever
    لاَ اِلَهَ اِلاَّ اَنْتَ سُبْحَانَكَ اِنِّي كُنْتُ مِنَ الظَّالِمِينَ

  5. #5
    عضو نشيط جدا
    تاريخ التسجيل
    Jun 2006
    المشاركات
    318


    شكراً لك أخى ,

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

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





    __________________
    لاَ اِلَهَ اِلاَّ اَنْتَ سُبْحَانَكَ اِنِّي كُنْتُ مِنَ الظَّالِمِينَ

  6. #6
    عضو فعال
    تاريخ التسجيل
    Sep 2004
    المشاركات
    1,157


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





    __________________
    مدونتي

  7. #7


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






  8. #8
    عضو نشيط
    تاريخ التسجيل
    Aug 2004
    المشاركات
    107


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

    شكرا جزيلا لك





    __________________
    Raheeb (AT) Gmail.com

  9. #9
    عضو سوبر نشيط
    تاريخ التسجيل
    Apr 2004
    المشاركات
    832


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

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

    لك أرق تحية

    اسلام ،





    __________________
    فريق التطوير استضافة مواقع، تأجير وإدارة السيرفرات وحجز الدومينات وشهادات SSL
    اربح دولارات من روابط منتداك وموقعك مع منتج adf.ly

  10. #10
    عضو نشيط جدا
    تاريخ التسجيل
    Aug 2004
    المشاركات
    359


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

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

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

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

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





    __________________
    <-- مدخل التكنولوجيا -->
    www.Techentr.com
    البساطة أ ُم الجمال
    Google Forever
    Firefox Forever
    لاَ اِلَهَ اِلاَّ اَنْتَ سُبْحَانَكَ اِنِّي كُنْتُ مِنَ الظَّالِمِينَ

  11. #11
    عضو نشيط
    تاريخ التسجيل
    Nov 2005
    المشاركات
    40


    مشكور اخوي WrDi

    بارك الله فيك






  12. #12
    عضو نشيط
    تاريخ التسجيل
    May 2006
    المشاركات
    167


    اقتباس المشاركة الأصلية كتبت بواسطة محمد عباس
    شكراً لك أخى ,

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

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

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





    __________________
    ------------------------
    Moving with the web 2.0h era





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  
0
موقع مكملات غذائية | نظارات طبية | أضف موقعك هنا