Hướng Dẫn Tạo Toast Notifications Với CSS và JavaScript
🎯 Tạo Toast Notification Cực Chất Với CSS & JS "Thông báo đẹp thì UX mới 'so deep' được chứ nhỉ?" 😉 2. Code CSS "Chất Lừ" Đầu tiên, chúng ta cần style cho các thông báo trông thật "xịn sò": {css}@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
.notifications {
position: fixed;
top: 30px;
right: 20px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 10px;
}
.toast {
position: relative;
padding: 15px;
color: #fff;
display: grid;
grid-template-columns: 50px 1fr 30px;
align-items: center;
border-radius: 10px;
--color: #0abf30;
background-image: linear-gradient(to right, #0abf3055, #22242f 30%);
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
animation: slideIn 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
overflow: hidden;
width: 350px;
}
.toast i {
color: var(--color);
font-size: 24px;
}
.toast .title {
font-size: 16px;
font-weight…
