إضافات صندوق التنبيهات او الملاحظات بشكل اخر مختلفة عن الأولى لا في التصميم ولا طريقة عرضها مبهرة بلونها الأبيض الشفاف مريحة للعين وتظهر مرة واحدة فقط تختفي تلقائيا وكلها بتصميم 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
* المحدد باللون الأصفر غيرهم بكلماتك
http://www.ar1web.co/2014/10/css-box-notification.html
ليست هناك تعليقات:
إرسال تعليق