إضافات صندوق التنبيهات او الملاحظات بشكل اخر مختلفة عن الأولى لا في التصميم ولا طريقة عرضها مبهرة بلونها الأبيض الشفاف مريحة للعين وتظهر مرة واحدة فقط تختفي تلقائيا وكلها بتصميم Css مما يجعلها خفيفة سريعة كليا
شرح طريقة تركيب الإضافة
1. مباشرة من التخطيط أضف أداة Html/JavaScript وضع الكود التالي بها
<style>
#notifjo {
right: 10px;
top: 10px;
width: 320px;
height: auto;
overflow: hidden;
background: rgba(255,255,255,0.9);
border-radius: 5px;
border: 1px solid #ddd;
z-index: 999999;
position: fixed;
-webkit-animation: fadeOutnotif 10s linear forwards;
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: right;
float: right;
}
#notifjo span h2 {
font-size: 12px;
line-height: 21px;
color: #222;
font-family: Electrolize,ge_dinar_oneregular;
font-weight: normal;
letter-spacing: 0px;
}
/* www.ar1web.com */
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
</style>
<div id='notifjo'>
<span>
<h2><b>مذهل ويب | الأفضل لكم :</b> <p>1. اهلا وسهلا.</p>
<p>2. كيف حالك.</p>
<p>3. أسعد الله أوقاتك.</p>
<p>4. نشكرك لزيارتك لموقعنا.</p>
</h2>
</span>
</div>
* المحدد باللون الأحمر لتغيير الإتجاه ضع : left
* المحدد باللون الأخضر لوضع الصندوق بالأسفل ضع : bottom
* المحدد باللون الأصفر غيرهم بكلماتك
حسام تفاحي 21سنة مدير المدونة, كافة أعمال و خدمات مدونة المحترف الجزائري تخضع لقوانين حقوق الملكية ولا يجوز بأي حال من الأحوال انتهاك هذه الحقوق بأية شكل من الأشكال,ونعدكم بتحسين وتطوير الخدمة ومتابعتها وتقديم ماهو الأفضل لكم دائما
اعلن معنا مجانا
ليست هناك تعليقات :
إرسال تعليق