Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create callout messages with CSS?
A callout messages are like notification visible on the bottom of the page. Set the offers or coupons here for the users. With that, if a user is not interested in these messages, then a cross sign to close it is also place on the top of the callout message. Let us see how to create callout messages with HTML and CSS.
Create a container for the callout
A div container is set for the callout that includes the callout heading, message, close button, etc −
<div class="callout">
<div class="calloutHeading">Check our offers</div>
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
<div class="calloutMessage">
<p>Before you leave this page don't forget to check our other offers <a href="#">Check Them</a></p>
</div>
</div>
Closeable callout
The closeable button i.e., the close symbol is set to display none when clicked. That means, it will close the parent element i.e., the callout −
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
The position of the close symbol is the key. We have set it absolute and on top-right −
.close {
position: absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
Style the callout heading
The callout heading is placed at the correct position using the padding property −
.calloutHeading {
padding: 25px 15px;
background: rgb(68, 93, 235);
font-size: 30px;
color: white;
}
The callout message
The message for the callout is set in a child container. A link is also added using the <a> element −
<div class="calloutMessage"> <p>Before you leave this page don't forget to check our other offers <a href="#">Check Them</a></p> </div>
Style the callout message. Place it properly using the padding property −
.calloutMessage {
padding: 15px;
background-color: #ccc;
color: black
}
Example
To create callout messages with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif}
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}
.calloutHeading {
padding: 25px 15px;
background: rgb(68, 93, 235);
font-size: 30px;
color: white;
}
.calloutMessage {
padding: 15px;
background-color: #ccc;
color: black
}
.close {
position: absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
.close:hover {
color: lightgrey;
}
</style>
</head>
<body>
<h1>Callout Message Example</h1>
<h3>Product 2</h3>
<h3>Product 3</h3>
<h3>Product 4</h3>
<div class="callout">
<div class="calloutHeading">Check our offers</div>
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
<div class="calloutMessage">
<p>Before you leave this page don't forget to check our other offers <a href="#">Check Them</a></p>
</div>
</div>
</body>
</html>
434 Views
