Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>
Idioma: En

3 Steps Simple CSS Error Messages

INTRODUCTION
ELEGANT ERRORS

Welcome to a tutorial on how to create simple CSS error messages and notification boxes. Yes, the default Javascript alert box is very intrusive and not at all elegant – Every time you show that alert box, people get scared away, and that is not a good design. So in this guide, we will walk through how to create “alternative” error notification bars that are elegant and not as intrusive. Read on!

I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

Related Articles

CONFESSION
AN HONEST DISCLOSURE

Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!

NAVIGATION
TABLE OF CONTENTS

Step 1
The Basics

Step 2
Close Button

Step 3
Icon Animation

Extra
Download

Closing
What’s Next?

STEP 1
THE BASICS

Let us start with the raw basics by creating the notification bars with just pure CSS and HTML.

THE HTML

1-basics.html

  Plain Message




  ℹ Information message




  ✔ Successful message




  ⚠ Warning message




  ☓ Error message

Yep, that is actually all you need for the custom error message – An HTML

and just put whatever message you want inside it. For those who are unsure about those XXX; things – Those are HTML symbols, and you can check them out here.

THE CSS

1-basic.css
/* [THE BASE] */
.bar {
  padding: 10px;
  margin: 10px;
  color: #333;
  background: #fafafa;
  border: 1px solid #ccc;
}

/* [THE VARIATIONS] */
.info {
  color: #204a8e;
  background: #c9ddff;
  border: 1px solid #4c699b;
}
.success {
  color: #2b7515;
  background: #ecffd6;
  border: 1px solid #617c42;
}
.warn {
  color: #756e15;
  background: #fffbd1;
  border: 1px solid #87803e;
}
.error {
  color: #ba3939;
  background: #ffe0e0;
  border: 1px solid #a33a3a;
}

The CSS is straightforward as well – We are literally just styling the 

 boxes with padding, margin, and setting various different colors. Feel free to changes these to fit your own website’s theme.

THE RESULT

Plain message
ℹ Information message
✔ Successful message
⚠ Warning message
☓ Error message

STEP 2
ADDING THE CLOSE BUTTON

Actually, the above notification boxes should work sufficiently well. But a message that cannot be removed is still kind of intrusive. So for you guys who are looking to improve it a little, here is how we add a close button to the message box.

THE HTML

2-close.html

  X
  Plain message




  X
  ℹ Information message




  X
  ✔ Successful message




  X
  ⚠ Warning message




  X
  ☓ Error message

Not much of a difference here, except that we now add a  that will act as the close button.

THE CSS

2-close.css
/* [CLOSE BUTTON] */
span.close {
  float: right;
  cursor: pointer;
  font-weight: bold;
}

There is not much added to the CSS as well. We simply float the close button to the right of the notification bar, and that’s about it.

THE JAVASCRIPT

2-close.js
window.addEventListener("load", function () {
  var all = document.querySelectorAll('span.close');
  for (var btn of all) {
    btn.addEventListener("click", function () {
      var bar = this.parentElement;
      bar.parentElement.removeChild(bar);
    });
  }
});

This is kind of the irritating part where we just have to use this bit of Javascript. It simply seeks out all the close buttons and attaches an onclick event that will remove the error message.

THE RESULT

X Plain message
X ℹ Information message
X ✔ Successful message
X ⚠ Warning message
X ☓ Error message

STEP 3
ANIMATING THE ICON

For this final step, it is kind of reserved for you perfectionist code ninjas – Let us add some animation to the icons and add on to the “wow factor”.

THE HTML

3-animate.html

  ℹ
  X
  Information message




  ✔
  X
   Successful message




  ⚠
  X
  Warning message




  ☓
  X
  Error message

We put the HTML symbol into a  so that we can properly add the CSS animation to it.

THE CSS

3-animate.css
/* [ANIMATED ICON] */
@keyframes spring { 
  0% {
    transform: scale(1) translateY(0); 
  }
  10% {
    transform: scale(1.2, 0.6); 
  }
  30% { 
    transform: scale(0.8, 1.1) translateY(-10px); 
  }
  50% { 
    transform: scale(1) translateY(0); 
  }
  100% { 
    transform: translateY(0); 
  }
}
span.aico {
  display: inline-block;
  font-size: 22px;
  margin-right: 5px;
  animation: spring 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

Some of you guys should be thinking that animation should be a lot more complicated than this, well, it’s not.

  • Simply define the keyframes of the animation first.
  • Then attach the animation to the element.
  • A small note to take that I have set the span to display: inline-block here, as the animation will not work with an inline element.

THE RESULT

ℹ X Information message
✔ X Successful message
⚠ X Warning message
☓ X Error message

EXTRA
DOWNLOAD

That’s it for all the code and examples. Here is the download link as promised.

DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

CLOSING
WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope that this has helped you in your project, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!


The post 3 Steps Simple CSS Error Messages appeared first on Code Boxx.



This post first appeared on Xxxxxxxxx, please read the originial post: here

Share the post

3 Steps Simple CSS Error Messages

×

Subscribe to Xxxxxxxxx

Get updates delivered right to your inbox!

Thank you for your subscription

×