Iris Tips
Iris TipsNotifications Simple with CSS3
Đôi lúc các admin blogger muốn thông báo cho độc giả của mình một điều gì đó. Widget sau sẽ giúp bạn điều đó, bằng cách sử dụng 1 hiệu ứng CSS đó là Tạo khung thông báo sẽ tự ẩn sau 1 khoản thời gian nhất định (mặc định là 10s).
Tạo khung thông báo ẩn/hiện đơn giản bằng CSS3
Bước 1: Vào Mẫu >> Chỉnh sửa HTML thêm đoạn code sau trước thẻ ]]></b:skin> #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: left;
float: left;
}
#notifjo span h2 {
font-size: 12px;
line-height: 21px;
color: #222;
font-weight: normal;
letter-spacing: 0px;
}
/* iris-tips.blogspot.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;}
} <div id = 'notifjo'>
<span>
<h2> <b> Notifications: </b>
<p> 1. Ghi thông báo của bạn tại đây. </p>
<p> 2. Thông báo sẽ tự mất sau vài giây. </p>
<p> 3. Chúc bạn thành công. ^^ </p>
<p> 4. Iris-Tips.blogspot.com. </p>
</h2>
</span>
</div> Chỉnh sửa right: 10px; , top: 10px; trong bước 1 thành vị trí mà bạn muốn khung thông báo hiển thị.
Chúc bạn thành công
Created by Johanes/Iris Tips
Mẹo nhỏ khi bình luận