Skip to main content

Alert Strip Design | Rustcode

by Rustcode
Alert-Strip-Design-html-css-javascript

"Alert Strip" is almost used in every website which shows the alert or message to the users. This extra element addition improves the website interaction and makes a reliable user experience. Another animation is also used to create this effect that is "Snackbar". Snackbar is a modern concept to create a notification bar you can check out this effect on this website.

To create "Alert Strip" html, css and javascript are used. css is used to beautify design and javascript is used to close the alert.

You can read our interesting articles on web development. The link is given below.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Alert Strip Design | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<body>
  <div class="content">
    <h2>Alert Message</h2>
    <p>Click on the "x" symbol to close the alert message.</p>
    <p>We use different colored strips to show different messages.</p>
  </div>
  <div class="strip success">
    <span class="closebtn" onclick="closeAlert(this)">&times;</span>
    <strong>Success!</strong> Indicates a successful or positive action.
  </div>
  <script src="script.js"></script>
</body>



03. css

body{
  padding: 0px;
  margin: 0px;
  font-family: arial ,helvetica, sans-serif;
  color: white;
  background: #2d3142;
}
.content{
  width: 60%;
  margin: auto;
  text-align: center;
}
.strip{
  width: 60%;
  margin: auto;
  padding: 24px;
  background-color: black;
  color: white;
  border-radius: 4px;
  letter-spacing: 1px;
  opacity: 1;
  transition: opacity .8s;
}
.closebtn{
  color: white;
  float: right;
  font-weight: bold;
  font-size: 24px;
  cursor: pointer;
}



04. JavaScript

function closeAlert(self){
  var i = self.parentElement;
  i.style.opacity = "0";
  setTimeout(function(){
    i.style.display = "none";
  },800);
}


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.




Comments

Post a Comment