Creating Styled Boxes for Success, Errors, Notes, Warnings, Examples, and Tips
👉🏻 Want to make boxes like-
This is a box from GitHub
🎯 OBJECTIVE
Making-
👉🏻 We will make a parent div of class outside, giving us the background and a child div of class inside having the content.
👉🏻 We will style it by CSS to get attractive boxes.
🎯 Process 1
HTML
<div class="outside outside-tip">
<div class="inside inside-tip">
<div id="head">💡 Tip : </div>
<ul>
<li>Try this on your own.</li>
<li>Try playing with the CSS.</li>
</ul>
</div>
</div>
CSS
body
{
color: #000000;
font-size: 19px;
font-family: 'Nunito Sans', sans-serif;
}
#head
{
font-weight: 700;
font-family: 'Chivo', sans-serif;
font-size: 20px;
color: #987a00;
}
.outside-tip
{
border: solid 2px #ffd500;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
line-height: 25px;
overflow: hidden;
padding: 15px 60px;
background-color: rgb(255, 249, 208);
margin: 60px;
}
It will come up as...
🎯 Process 2
HTML
<div class="outside outside-warning">
<div class="inside inside-warning">
<div id="head">🚫 Warning : </div>
Stay away from frauds..
</div>
</div>
CSS
body
{
color: #ff4444;
font-size: 19px;
font-family: 'Nunito Sans', sans-serif;
}
#head
{
font-weight: 700;
font-family: 'Chivo', sans-serif;
font-size: 20px;
color: #ff0a0a;
}
.outside-warning
{
border: solid 2px #ff4444;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
line-height: 28px;
overflow: hidden;
padding: 10px 60px;
background-color: rgb(255, 235, 235);
margin: 60px;
}
.inside-warning
{
border-left: solid 3px #ff4444;
padding-left: 20px;
}
It will come up as...
🎯 Process 3
HTML
<div class="outside outside-note">
<div class="inside inside-note">
<div id="head">Note : </div>
<ul>
<li>This is HTML code.</li>
<li>It is styled by CSS.</li>
</ul>
</div>
</div>
CSS
body
{
color: #000000;
font-size: 19px;
font-family: 'Nunito Sans', sans-serif;
}
#head
{
font-weight: 700;
font-family: 'Chivo', sans-serif;
font-size: 20px;
color: #0078c2;
}
.outside-note
{
background-color: #f0f7fb;
border-left: solid 4px #3498db;
line-height: 25px;
overflow: hidden;
padding: 12px;
margin: 60px;
}
It will come up as...
Give a Shadow Effect 💡
Give a shadow effect around the boxes to give it a 3D look. Use the css to the parent div -
CSS
{
box-shadow: 0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07);
}
Colors and their Visual Symbols 💡
Keep in mind the accessibility while choosing your colors.
- Red is used for warnings and to indicate danger
- Orange can be used for cautions as well
- Notes can be blue
- Examples can be green
- Tips can be yellow
🎯 Try these by Yourself --
1.
2.
3.
📢 Tip of the Day 💡
Want free images and logos for your next project?
Use-
Check out the whole series!
Share it💚 with someone who may benefit from this
❤️ Happy Coding!
Follow for more!
Top comments (2)
Did this post help you?
Save it for later..
lets_code_together
Want to contribute?
Put your suggestions in comments 😄
I'll be happy to add your suggestions!