How to Create Color Boxes with Simple CSS

Hello Blogger's how are you. I hope you are doing well. Have you ever wondered to add some quotes in beautiful boxes for writing.

Yes you heard it right. So today we are going to learn How to Create Color Boxes with Simple CSS for your blog.

With this color boxes you can give beautiful notification to your website visitors.

Demo

Now let's start the adding process.

Adding Color Boxes with CSS

Adding CSS

1. Go to your Blogger dashboard.
2. Then click on theme section and then Edit HTML.
3. Now search for the </style> tag.
4. Copy the below given CSS and paste it just above the </style> tag.

/* notification colorbox */
.ta-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
}
.ta-colorbox.blue {
background: #03a9f4
}
.ta-colorbox.green {
background: #4CAF50
}
.ta-colorbox.red {
background: #F44336
}
.ta-colorbox.orange {
background: #ff9800
}
.ta-colorbox.purple {
background: #673ab7
}
.ta-colorbox.black {
background: #1e272e
}

Now don't forget to save the theme

Using HTML codes for Creating color boxes.

You can use the below given HTML codes for creating the color boxes where you want to use it.

Hello this is example of black box

<p class="ta-colorbox black">Hello this is black box</p>

Hello this is example of green box

<p class="ta-colorbox green">Hello this is green box</p>

Hello this is example of orange box

<p class="ta-colorbox orange">Hello this is orange box</p>

Hello this is example of purple box

<p class="ta-colorbox purple">Hello this is purple box</p>

Hello this is example of blue box

<p class="ta-colorbox blue">Hello this is blue box</p>

Hello this is example of red box

<p class="ta-colorbox red">Hello this is red box</p>

Now after following the above steps I hope you have successfully added the color boxes code in your blog. If you got any error kindly contact us.

Conclusion

So today we have learnt about How to Add Color Boxes with Simple CSS. I hope you like this post and please do like and follow this blog for more this types of post. If you have any query kindly comment below.

Go to Link