منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.

انشاء منتدى مجاني شبيه بهذا المنتدى
أحلى الشبكات الإجتماعية

انشاء منتدى مجاني



 انشاء منتدى مجاني

أقسام الدعم

دعم الخدمات العامة:
مشاكل كلمة السر
مشاكل فتح المنتدى
مشاكل لوحة الإدارة
مشاكل تنسيق المظهر
المشاكل الأخرى

----------------------

دعم الخدمات التكميلية :
مشاكل النطاقات
مشاكل التومبلايت

----------------------

مراسلة الإدارة :

طلب كلمة السر
إرسال أكواد أو شروحات
أتصل بنا
كيفية طلب كلمة سر جديدة
> طريقة طلب كلمة سر

تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
المواضيع الأخيرة
» شفرة اعلان فى نسجة الجوال
أمس في 18:30 من طرف zeewab

» هل يقبل احلى منتدى ان
أمس في 17:39 من طرف JAR7

» شفرة اعلان
أمس في 14:15 من طرف ahd allah

» ايكونه محذوفه اسفل التعليق ..
أمس في 14:06 من طرف zaydoon

» لغة المنتدى
أمس في 12:15 من طرف ahd allah

» طلب سلايد بسيط*
أمس في 7:33 من طرف meme.99

» سؤال بغاية الاهمية
أمس في 1:32 من طرف وهبة الساحر

» طلب كود البيانات
الأحد 25 سبتمبر 2016 - 20:26 من طرف ahd allah

» اريد مود خدمات الموضوع
الأحد 25 سبتمبر 2016 - 20:11 من طرف ahd allah

أفضل 10 أعضاء في هذا الأسبوع
ahd allah
 
zaydoon
 
احزان القلب
 
JAR7
 
MeZoHiTs
 
zeewab
 
body14145
 
وهبة الساحر
 
meme.99
 
elbarawy
 

أفضل الأعضاء الموسومين
@الزعيم
 
@@
 
@stones
 
@Mohamed Nsr
 
@JAR7
 

عمل منتدى

كود تأثير على الاعلان

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

كود تأثير على الاعلان

مُساهمة من طرف AmEr-Dz في الثلاثاء 2 ديسمبر 2014 - 13:33

بسم الله الرحمن الرحيم
والصلاة والسلام على افضل الخلق سيدنا محمد عليه افضل الصلاة والسلام
اما بعد




اليوم جب معي
كود حصري  تأثيرات  
CSS
عند اقتراب الفأرة نحوه


صورة للكود




الشرح

نأتي الي اول طريقة

ندخل على لوحة التحكم / مظهر المنتدى / تشكيلات عامة

شرح بصور


ونضع الكود



الكود


الرمز:
  <div class="infobulle">
                          
 <!--
             Illustration de l'infobulle             -->    <img
src="http://i59.servimg.com/u/f59/19/05/30/99/1111110.png" alt="من طرف AmEr-Dz" />                
 <!--             Contenu de l'infobulle             -->              
 <div>
                              
 <div class="fleche">
                    
 </div>
                              
 <div class="bouh">
                                  
 <h1>
        هنا اعنوان الاعلان          
 </h1>
                                  
 <hr />
                            هذه طريقة ظهور الاعلان . (:                                              
 <p>
  
                        بالطبع يمكنك وضع كل ما تريد في أي اعلان، مثل
رابط وصلة تأخد  لمو ضوع الاعلان <a href="" title="اضغط هنا
للمزيد">help.ahlamontada.com</a>                      
 </p>
                              
 </div>
                          
 </div>
</div>



نأتي للكود الآخر

يتم وضعه في css




ندخل على لوحة التحكم / مظهر المنتدى /الوان/ ورقة تصميم css






الكود


الرمز:
======by AmEr-Dz ======
.infobulle {
      display: inline-block;
    }

    .infobulle > div {
      position: absolute;
      margin-top: -20px;
      opacity: 0;
      visibility: hidden;

      -webkit-transform: scale(0.3) rotate(-45deg);
      -moz-transform: scale(0.3) rotate(-45deg);
      -o-transform: scale(0.3) rotate(-45deg);
      transform: scale(0.3) rotate(-45deg);

      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      transition: all 0.3s linear;
    }

    .infobulle:hover > div {
      opacity: 1;
      visibility: visible;

      -webkit-transform: scale(1) rotate(0deg);
      -moz-transform: scale(1) rotate(0deg);
      -o-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
    }

    .bouh {
      width: 300px;
      padding: 25px;
      margin: auto;
      background-color: #000000;
      color: #ffffff;
      text-align: center;

      -webkit-box-shadow: 0 0 5px #212121;
      -moz-box-shadow: 0 0 5px #212121;
      -o-box-shadow: 0 0 5px #212121;
      box-shadow: 0 0 5px #212121;

      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
    }

    .bouh a {
      padding: 5px;
      margin: 5px 0 0 0;
      display: inline-block;
      background-color: #000000;
      color: #666666;
      text-decoration: none;

      -webkit-box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
      -moz-box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
      -o-box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
      box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;

      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
    }

    .bouh a:hover {
      color: #ffffff;
    }

    .bouh h1 {
      -webkit-text-shadow: 0 0 5px #ffffff;
      -moz-text-shadow: 0 0 5px #ffffff;
      -o-text-shadow: 0 0 5px #ffffff;
      text-shadow: 0 0 5px #ffffff;
    }

    .bouh p {
      text-align: justify;
    }

    .bouh hr {
      -webkit-box-shadow: 0 0 3px #666666;
      -moz-box-shadow: 0 0 3px #666666;
      -o-box-shadow: 0 0 3px #666666;
      box-shadow: 0 0 3px #666666;
    }

    .fleche {
      width: 0;
      margin-left: 70px;
      border: 5px solid transparent;
      border-bottom: 10px solid #000000;
    }

======by AmEr-Dz ======


وبهذا انتهينا من شرح عمل سجل
بالتوفيق ليكم
 

تحياتي ليكم
AmEr-Dz

AmEr-Dz
 
 

ذكر
عدد المساهمات : 506
معدل النشاط : 2626

http://www.vivaalgeria.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى