If you're a web developer or simply an internet content creator, notifications are probably a regular thing. Today, we will share with you the code of multicolored message frames with simple CSS.
With a few steps below you will make your own notifications more prominent and eye-catching. If you haven't tried it yet, what are you waiting for?
Create a notification frame
Step 1: Create CSS for the notification frame.
.anand-colorbox {
overflow: hidden;
position: relative;
margin: .5rem 0 1rem;
transition: box-shadow.25 s;
border-radius: 10px;
color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 20px;
font-size: 16px
}
.anand-colorbox.blue {
background: #03a9f4
}
.anand-colorbox.green {
background: #4CAF50
}
.anand-colorbox.red {
background: #F44336
}
.anand-colorbox.orange {
background: #ff9800
}
.anand-colorbox.purple {
background: #673ab7
}
Step 2: Usage → call to the class corresponding to each color, for example:
<p class="anand-colorbox blue">Insert message here</p><p class="anand-colorbox green">Insert message here</p><p class="anand-colorbox red">Insert message here</p><p class="anand-colorbox orange">Insert message here</p><p class="anand-colorbox purple">Insert message here</p>