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

الموضوع: التعامل مع الظلال في css3

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

    التعامل مع الظلال في css3



    سنقوم في هذا الدرس بالتعلم خطوة بخطوة كيفية الوصول للنتيجة النهائية التي ترونها أمامكم في التدوينة وهي كيفية التحكم في الظلال في css3 وخصائصها حيث سنقوم بعمل كادر للصورة وبعدها نقوم بعمل ظل لهذا الكادر.
    الصعوبة : متوسطة
    مدة التطبيق : 8 دقائق تقريباً
    البرامج الضرورية : Adobe Dreamweaver و يمكنك استعمال notepad++ مفتوح المصدر أيضاً أو أي محرر متطور.
    سنحتاج لتطبيق الدرس إلى ملفين
    الأول : index.html
    الثاني : style.css
    نقوم بعد إنشاء الملفين بتضمين ملف الستايل في ملف التصميم الخاص بنا عن طريق الكود الآتي قبل نهاية الترويسة

    كود PHP:
     <link href="style.css" type="text/css" rel="stylesheet" /> 

    بعدها نقوم بوضع الصورة التي نريد العمل عليها بداخل ديف بالشكل التالي:

    كود PHP:
     <div class="box"><img src="john.jpg" alt="john" /></div
    لتصبح الصورة كالتالي :

    نضع بعد التفاصيل على ملف الستايل (style.css)لنضع الصورة في منتصف الصفحة ونحدد عرض العمل كالتالي:

    body{
    widht:150px;
    margin:50px auto;
    }



    لتصبح الصورة كالتالي :

    نقوم الآن بإضافة خصائص الظل ونقوم ببعض التعديلات عليها مثل الكود التالي :
    كود PHP:
    .box{
        
    box-shadow1px 2px 4px rgba(0,0,0,.5);
        
    padding:10px;
        
    background:#FFFFFF;

    والشرح الخاص بها هو :
    box-shadow لإضافة ظل
    1px: من اليمين
    2px: من الأسفل
    4px: هو مقدار الضبابية
    rgba(0,0,0,.5): هو لون هذا الظل
    padding:المسافة البادئة
    background للون الخلفية
    لتصبح الصورة كالتالي :

    لتصحيح هذا الخطأ الذي تراه يجب أن نضيف لخصائص الصورة عرضها بالكود التالي في ملف الستايل :
    كود PHP:
    .box img{
    max-width:100%;
    border1px inset #8a4199;

    جعلنا أقصى عرض للصورة هو 100 بالمئة وإضفنا حدود بقيمة 1px باستعمال خاصية inset وهي تعني أن الحدود ستكون ظاهرة على يمين وأعلى الصورة
    لتصبح الصورة كالتالي :

    الآن لنقم بإضافة بعض الظل على الطرف الأيمن ليظهر وكأنه خيال للصورة وللقيام بذلك نستعمل خاصية الظل ولكن مع after أو before وتعني بعد الصورة أو قبلها كالتالي :

    كود PHP:
    .box:after{
        
    content:"";
        
    box-shadow100px 0 10px rgba(0,0,0,.2);
     

    content: تساعدك في وضع قيمة لذلك نحن نحتاجها لإظهار الخيال ولكن مع ذلك يمكنك كتابة اي قيمة بداخلها وسترى كيف تعمل بالضبط.
    لاداعي لشرح السطر السابق فقط قمت بشرحه مسبقاً في أول التدوينة
    ولكن عند الحفظ لن نشاهد أي تغيير حصل لاننا لم نختار مكان ظهور هذه القيمة بالضبط لذلك نضيف
    كود PHP:
    .box:after{
        
    content:"";
        
    box-shadow100px 0 10px 20px rgba(0,0,0,.2);
        
    position:absolute;
     

    عندها ستلاحظ ظهور خيال على شكل مربع صغير حجمه 100 بيكسل.
    مثل الصورة التالية :

    لنقوم بزيادة حجم الخيال ونحدد موقعه نضيف :
    كود PHP:
    .box:after{
        
    content:"";
        
    box-shadow100px 0 10px 20px rgba(0,0,0,.2);
        
    position:absolute;
        
    width:50%;
        
    bottom:20px;
     

    سنلاحظ فعلا أن حجم الخيال أصبح كبيراً وكنه أصبح أسفل الصفحة وذلك بسبب خاصية bottom حيث أن قيمتها الصفحة وليس الصورة ولذلك نضيف الكود التالي للستايل الأول position:relative;
    ليصبح كود الستايل ككل كالتالي :
    كود PHP:
    body{
        
    width:150px;
        
    margin:50px auto;
    }
     
    .
    box{
        
    position:relative;
        
    box-shadow1px 2px 4px rgba(0,0,0,.5);
        
    padding:10px;
        
    background:#FFFfff;
    }
     
    .
    box img{
        
    max-width:100%;
        
    border1px inset #8a4199;
    }
     
    .
    box:after{
        
    content:"";
        
    box-shadow100px 0 10px 20px rgba(0,0,0,.2);
        
    position:absolute;
        
    width:50%;
        
    bottom:20px;
     


    الآن نقوم بالتعديل وإضافة بعض الخصائص الأخرى التالية لعمل ميلان للخيال ليصبح بشكل أجمل كالتالي :
    كود PHP:
    .box:after{
        
    content:"";
        
    box-shadow60px 0 10px 20px rgba(0,0,0,.2);
        
    position:absolute;
        
    width:50%;
        
    height:10px;
        
    bottom:20px;
        
    right:65px;
        
    z-index:-1;
        
    transformskew(-30deg);

    تلاحظون قبل الشرح أني قمت بتعديل الكثير من القيام التي كتبناها مسبقاً وذلك لكي يتطابق الخيال مع ما أنا اريده وطبعاً انتم ستقومون بذلك تبعا لاختلاف
    حجم الصورة وعرضها وإرتفاعها.
    height: لتحديد ارتفاع الخيال
    right: لتحديد طول الخيال من اليمين
    z-index: لتحديد رقم الطبقة وهنا اعطيناها قيمة سالبة لكي يكون الخيال خلف الطبقة التي هي الصورة أي ورائها
    transform استعملنا هذه الخاصية والتي لها اكثر من قيمة بإضافة skew وهو معامل الانحراف لكي نجعل الخيال يميل قليلاً بما يناسبنا لتكون الصورة الآن كاملة كما في الشكل التالي :

    بقية الخطوة النهائية والأهم ولعل البعض وأثناء تطبيق الدرس لم تظهر معه النتائج كما كنت أصف وذلك لإختلاف كتابة هذه التنسيقات بإختلاف المتصفح ولذلك سأضيف الآن الكود الكامل مع وضعه المتوافق مع كل المتصفحات ليكون كالتالي :

    كود PHP:
    @charset "utf-8";
    /* CSS Document */
     
    body{
        
    width:150px;
        
    margin:50px auto;
    }
     
    .
    box{
        
    position:relative;
        
    box-shadow:          1px 2px 4px rgba(0,0,0,.5);
        -
    webkit-box-shadow1px 2px 4px rgba(0,0,0,.5);
        -
    moz-box-shadow:    1px 2px 4px rgba(0,0,0,.5);
        
    padding:10px;
        
    background:#FFFfff;
    }
     
    .
    box img{
        
    max-width:100%;
        
    border1px inset #8a4199;
    }
     
    .
    box:after{
        
    content:"";
        
    box-shadow:     60px 0 10px 20px rgba(0,0,0,.2);
        -
    webkit-box-shadow:60px 0 10px 20px rgba(0,0,0,.2);
        -
    moz-box-shadow:   60px 0 10px 20px rgba(0,0,0,.2);
        
    position:absolute;
        
    width:50%;
        
    height:10px;
        
    bottom:20px;
        
    right:65px;
        
    z-index:-1;
        
    transformskew(-30deg);
        -
    moz-transformskew(-30deg);/* Firefox */
        
    -ms-transformskew(-30deg); /* IE 9 */
        
    -webkit-transformskew(-30deg); /* Safari and Chrome */
        
    -o-transformskew(-30deg); /* Opera */
     

    وأي نقص في الدرس يرجى معذرتي وأي استفسار أنا جاهز بإذن الله.

    هذا الشرح مقدم من مدونة جديد مشاريع الويب ولمزيد من الوضوح في الأكواد في حال عدم سهولة قراءتها يرجى يارة الرابط التالي :
    التعامل مع الظلال في css3





    __________________
    كونى جوعى كونو حمقى


  2. #2
    عضو نشيط
    تاريخ التسجيل
    May 2013
    المشاركات
    38


    يعطيك العافية

    قبل مدة .... كنت ابحث عن هذا الدرس






  3. #3
    عضو نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    143


    اهلا وسهلا اخي يسعدني انك وجدته





    __________________
    كونى جوعى كونو حمقى





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

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض