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

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

<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>