Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
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>
952 Views
