اضافة صندوق الاشعارات والتنبيهات بتقنية css احترافي

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد وعلى ال محمد 

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

راح نقدم لكم صندوق الاشعرات والتنبيهات بشكل احترافي وبتقنية css ورائع 

وبتصميم رائع css

للمعاينة اضغط على صورة

شرح طريقة تركيب

مباشرة تخطيط اضافة اداة 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>

وغيير كلمات بما يتاسبك 




وانتظروا كل جديد من حمزه ويب
في امان الله