أهلا وسهلا بك زائرنا الكريم في JO1R FORUM | منتديات شباب و صبايا الأردن، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

< اضافة > اجمل مؤثرات الظل قد رايتها9 طرق مختلفة لتطبيق الظل على العناصر بالـcss فقط

السلام عليكم هذه من اجمل اجمل مؤثرات الظل الذى رايتها9 طرق مختلفة لتطبيق الظل على العناصر بالـcss فقط دون استعمال اى صور انظر الصورة مثال استخدام الاك


  1. JO1R FORUM | منتديات شباب و صبايا الأردن
  • •• آلمنتديآت آلتقنيـﮧ « Technical Information
  • قسم الشبكات ولغات البرمجة المختلفة
  • [ اضافة ] اجمل مؤثرات الظل قد رايتها .. 9 طرق مختلفة لتطبيق الظل على العناصر بالـcss فقط
    • اضافة رد جديد اضافة موضوع جديد


    subject icon [ اضافة ] اجمل مؤثرات الظل قد رايتها .. 9 طرق مختلفة لتطبيق الظل على العناصر بالـcss فقط
    03-10-2011 02:40 مساءً
    صورة OMRAN الشخصية
    OMRAN
    عضـو بـارز
    rating
    معلومات الكاتب ▼
    تاريخ الإنضمام : 16-07-2007
    رقم العضوية : 46
    المشاركات : 1,315
    الجنس :
    قوة السمعة : 429,537,324
    السلام عليكم
    هذه من اجمل اجمل مؤثرات الظل الذى رايتها .. 9 طرق مختلفة لتطبيق الظل على العناصر بالـcss فقط دون استعمال اى صور

    انظر الصورة
    LLA38514

    مثال استخدام الاكواد والنتيجة الحية من هنا

    الكود
    رمز PHP:
    /* Shared styles */

    .drop-shadow {
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -    moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }

    .    drop-shadow:before,
    .    drop-shadow:after {



    content:"";
    position:absolute;
    z-index:-2;
    }

    .    drop-shadow p {
    font-size:16px;
    font-weight:bold;
    }

    /* Lifted corners */

    .lifted {
    -    moz-border-radius:4px;
    border-radius:4px;
    }

    .    lifted:before,
    .    lifted:after {
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    -    webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -    moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -    webkit-transform:rotate(-3deg);
    -    moz-transform:rotate(-3deg);
    -    ms-transform:rotate(-3deg);
    -    o-transform:rotate(-3deg);
    transform:rotate(-3deg);
    }

    .    lifted:after {
    right:10px;
    left:auto;
    -    webkit-transform:rotate(3deg);
    -    moz-transform:rotate(3deg);
    -    ms-transform:rotate(3deg);
    -    o-transform:rotate(3deg);
    transform:rotate(3deg);
    }

    /* Curled corners */

    .curled {
    border:1px solid #efefef;
    -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
    border-radius:0 0 120px 120px / 0 0 6px 6px;
    }

    .    curled:before,
    .    curled:after {
    bottom:12px;
    left:10px;
    width:50%;
    height:55%;
    max-width:200px;
    -    webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
    -    moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
    box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
    -    webkit-transform:skew(-8deg) rotate(-3deg);
    -    moz-transform:skew(-8deg) rotate(-3deg);
    -    ms-transform:skew(-8deg) rotate(-3deg);
    -    o-transform:skew(-8deg) rotate(-3deg);
    transform:skew(-8deg) rotate(-3deg);
    }

    .    curled:after {
    right:10px;
    left:auto;
    -    webkit-transform:skew(8deg) rotate(3deg);
    -    moz-transform:skew(8deg) rotate(3deg);
    -    ms-transform:skew(8deg) rotate(3deg);
    -    o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
    }

    /* Perspective */

    .perspective:before {
    left:80px;
    bottom:5px;
    width:50%;
    height:35%;
    max-width:200px;
    -    webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
    -    moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
    box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
    -    webkit-transform:skew(50deg);
    -    moz-transform:skew(50deg);
    -    ms-transform:skew(50deg);
    -    o-transform:skew(50deg);
    transform:skew(50deg);
    -    webkit-transform-origin:0 100%;
    -    moz-transform-origin:0 100%;
    -    ms-transform-origin:0 100%;
    -    o-transform-origin:0 100%;
    transform-origin:0 100%;
    }

    .    perspective:after {
    display:none;
    }

    /* Raised shadow - no pseudo-elements needed */

    .raised {
    -    webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -    moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }

    /* Curved shadows */

    .curved:before {
    top:10px;
    bottom:10px;
    left:0;
    right:50%;
    -    webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
    -    moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
    box-shadow:0 0 15px rgba(0,0,0,0.6);
    -    moz-border-radius:10px / 100px;
    border-radius:10px / 100px;
    }

    .    curved-vt-2:before {
    right:0;
    }

    .    curved-hz-1:before {
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -    moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
    }

    .    curved-hz-2:before {
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -    moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
    }

    /* Rotated box */

    .rotated {
    -    webkit-box-shadow:none;
    -    moz-box-shadow:none;
    box-shadow:none;
    -    webkit-transform:rotate(-3deg);
    -    moz-transform:rotate(-3deg);
    -    ms-transform:rotate(-3deg);
    -    o-transform:rotate(-3deg);
    transform:rotate(-3deg);
    }

    .    rotated > :first-child:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -    moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }

    الكود منقول للامانة من هنا
    توقيع :OMRAN
    ohgod

    look/images/icons/i1.gif [ اضافة ] اجمل مؤثرات الظل قد رايتها .. 9 طرق مختلفة لتطبيق الظل على العناصر بالـcss فقط
      03-10-2011 02:49 مساءً   [1]
    صورة قاهر المستحيل الشخصية
    قاهر المستحيل
    عضو فعال
    rating
    معلومات الكاتب ▼
    تاريخ الإنضمام : 02-11-2010
    رقم العضوية : 43,605
    المشاركات : 149
    الجنس :
    قوة السمعة : 50
    وعليكو السلام هلا اخي
    توقيع :قاهر المستحيل
    335

    745

    اضافة رد جديد اضافة موضوع جديد



    المواضيع المتشابهه
    عنوان الموضوع الكاتب الردود الزوار آخر رد
    [شرح] : وداعا سكربتات الوظائف / JobLine اضافة الوظائف الشهيرة معربة امير النور
    		 1 290 امير النور
    سيرفر LordsOfBattles.V3 باتش 5690 بعد التعديل واضافة كل الحصريات - شارك ولا تتفاجأ , فقط تخيـــل ^_^ عاشق الالعاب
    		 0 93 عاشق الالعاب
    افضل اوبشن فايل للعبة pes 6 : جميع الانتقالات + اضافة الاندية لعام2013 عاشق الالعاب
    		 0 112 عاشق الالعاب
    برنامج Razz.Player.v3.5 لاضافة اصوات متنوعة ومسلية اثناء المكالمة سمية رافت
    		 0 185 سمية رافت
    اهمية اضافة موقعك الالكترونى الى الدلائل لرفع ترتيب الموقع بجوجل ahmed refaat
    		 0 189 ahmed refaat

    الكلمات الدلالية
    لا يوجد كلمات دلالية ..

    « [ كتاب ] مجموعة كتب لتعلم Android من رفعي | [ غير ذلك ] تعريب كامل للنسخة3.1 الكاملة hostvise »








    الساعة الآن 07:03 PM