Buy Plus UI v2.5! Demo Buy Now!

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.

How to Create Color Boxes with Simple CSS

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

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.

Read also :

Rate this article

Getting Info...

About Post Author

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Plus UI, you agreed to use cookies in agreement with the Plus UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.