Creating Styled Boxes for Errors, Success, Examples, Notes and Tips | Day 1 | 50 Days of Intermediate HTML + CSS Projects

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">&#128161; 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">&#128683; 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.

1. Red is used for warnings and to indicate danger
2. Orange can be used for cautions as well
3. Notes can be blue
4. Examples can be green
5. 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-

1. Doodleipsum
2. Logoipsum

---

Check out the whole series!
Share it💚 with someone who may benefit from this
❤️ Happy Coding!
Follow for more!

Comments

[devkoustav]

Did this post help you?
Save it for later..

lets_code_together

[devkoustav]

Want to contribute?
Put your suggestions in comments 😄

I'll be happy to add your suggestions!