DEV Community

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

Posted on • Edited on

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

#html #css #tutorial #beginners

Creating Styled Boxes for Success, Errors, Notes, Warnings, Examples, and Tips

👉🏻 Want to make boxes like-
GitHub Tip Box
This is a box from GitHub

🎯 OBJECTIVE
Making-

Styled Box
👉🏻 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>
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

It will come up as...

Styled Box for Tip

🎯 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>
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

It will come up as...

Styled Box For Warning

🎯 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>
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

It will come up as...

Styled Box For Note

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); }
Enter fullscreen mode Exit fullscreen mode

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.
Styled Box
2.
Styled Box
3.
Styled Box

📢 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!

Top comments (2)

Collapse
 
koustav profile image
devkoustav •

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

lets_code_together

Collapse
 
koustav profile image
devkoustav •

Want to contribute?
Put your suggestions in comments 😄

I'll be happy to add your suggestions!