إضافة تأثير التموج لمدونات بلوجر

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

شرح اليوم يعلمك كيف تضيف ذاك الافكت و التعامل معه ايضا

إبحث على </head> وضع الكود التالي فوقه

<style>

.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;z-index:1;will-change:opacity, transform;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out}
.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;opacity:0;background:rgba(0,0,0,0.2);-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;-ms-transition:all 0.7s ease-out;transition:all 0.7s ease-out;-webkit-transition-property:-webkit-transform, opacity;-moz-transition-property:-moz-transform, opacity;-o-transition-property:-o-transform, opacity;transition-property:transform, opacity;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);pointer-events:none}
.waves-effect.waves-light .waves-ripple{background-color:rgba(255,255,255,0.45)}
.waves-notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none !important;transition:none !important}
.waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle, white 100%, black 100%)}
.waves-input-wrapper{border-radius:0.2em;vertical-align:bottom;width:100%}
.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}
.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%;-webkit-mask-image:none}
.waves-block{display:block}
a.waves-effect .waves-ripple{z-index:-1}
.ripple{display:inline-block;text-decoration:none;overflow:hidden;position:relative;z-index:0}
.ink{display:block;position:absolute;background:rgba(255,255,255,0.4);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.animate{-webkit-animation:ripple .55s linear;-moz-animation:ripple .55s linear;-ms-animation:ripple .55s linear;-o-animation:ripple .55s linear;animation:ripple .55s linear}
@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5)}}
@-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5)}}
@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5)}}
@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}
</style>

الان إبحث على </body> وضع هذا الكود فوقه

الان في مكان تريد ظهور فيه التموج تضيف هذا في كلاص waves-effect
مثال

<a class="waves-effect" href="https://www.abdoutech.org" title="تجربة"><span>تجربة</span></a>

الان لو تريد ان يضهر التموج في مكان يكون لونه ابيض او لون فاتح اضف هذا class='waves-effect'

واذا كان للون غامق مثل الاسود ضف هذا class='waves-effect waves-light'

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

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع

جيك برو | Geek Pro
12 يونيو 2018 في 9:49 م

شكـرررررررررا جدا اخي عبدو و الله انك شخص رائع:)8-)(p)(y)x-)(h)

رد حذف
- جيك برو | Geek Pro
  12 يونيو 2018 في 10:08 م
  
  بس دلوقتي انا اريد ان تظهر عند الضغط علي الطور كيف اخي عبدو
  
  رد حذف
جيك برو | Geek Pro
12 يونيو 2018 في 9:53 م

(k)

رد حذف
جيك برو | Geek Pro
13 يونيو 2018 في 5:40 م

بس دلوقتي انا اريد ان تظهر عند الضغط علي الصور كيف اخي عبدو

رد حذف
- عبدو تكنولوجي
  13 يونيو 2018 في 9:51 م
  
  <div class="waves-effect waves-light"><img src="رابط صورة" /></div>
  
  او اذا كان الصورة مضمنة في رابط هكذا
  
  <a href='هنا مثال لرابط' class="waves-effect waves-light"><img src="رابط صورة" /></a>
  
  رد حذف
Unknown
6 سبتمبر 2018 في 10:14 ص

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

رد حذف

Forms

عبدو تكنولوجي

إضافة تأثير التموج لمدونات بلوجر | waves effect & ripple

قد تُعجبك هذه المشاركات

تعليقات