How to Create Callout Messages using CSS?

How To Create an Alert Message Box using CSS?

Callout messages are used to highlight important information, tips, warnings, or notes in a visually distinctive way. They help in drawing attention to specific parts of a document or webpage. We will explore how to create various types of callout messages using CSS.

Preview Image

Preview

Approach

First create the basic structure using different HTML elements. Callout messages are styled to be fixed at the bottom right of the page with distinct headers and containers for different message types.
Messages start hidden with opacity and visibility transitions for smooth appearance and disappearance.
JavaScript functions showCallout and hideCallout control the display of messages, with automatic hiding after 3 seconds and manual closing via a button.
Buttons trigger the display of specific callout messages, each styled with appropriate colors and content for info, success, warning, and error notifications.

Example: The example below shows how to create callout messages using CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" 
          name="viewport">
    <title>Simple Website with Callout Message</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
        }

        .nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #2e2e2e;
            padding: 10px 20px;
            color: #fff;
        }

        .nav-bar img {
            max-width: 200px;
            display: block;
            margin: 0 auto;
        }

        .main-content {
            padding: 20px;
        }

        .alert-box {
            visibility: hidden;
            position: fixed;
            bottom: 35px;
            right: 20px;
            max-width: 300px;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.5s, visibility 0.5s, 
                          bottom 0.5s;
        }

        .alert-header {
            padding: 15px;
            background: #555;
            font-size: 20px;
            color: white;
            position: relative;
        }

        .alert-container {
            padding: 15px;
            background-color: #ccc;
            color: rgb(21, 20, 20);
        }

        .close-button {
            position: absolute;
            top: 5px;
            right: 15px;
            color: white;
            font-size: 20px;
            cursor: pointer;
        }

        .close-button:hover {
            color: lightgrey;
        }

        .alert-box.info .alert-header {
            background-color: #1e90ff;
        }

        .alert-box.show {
            visibility: visible;
            opacity: 1;
            bottom: 50px;
        }

        .alert-box.hide {
            opacity: 0;
            visibility: hidden;
            bottom: 35px;
            transition: opacity 0.5s, visibility 0.5s, 
                          bottom 0.5s;
        }
    </style>
</head>

<body>
    <nav class="nav-bar">
        <img src=
"https://media.w3wiki.net/gfg-gg-logo.svg" 
             alt="Logo">
    </nav>

    <div class="main-content">
        <h2>Welcome to GFG</h2>
        <p>w3wiki is a leading online platform that
           provides computer science and programming 
           resources to millions of developers and 
           technology enthusiasts worldwide with a vast 
           library of courses, offline classroom programs,
           tutorials, articles, coding challenges, practice
           problems, & much more.
          </p>
        <p>Our goal is to provide you with the best content 
           and user experience. We hope you enjoy your time
           here and find everything you're looking for.
          </p>
    </div>

    <div id="callout" class="alert-box info">
        <div class="alert-header">
          Information
          </div>
        <span class="close-button" 
              onclick="hideCallout(this)">
          &times;
          </span>
        <div class="alert-container">
            <p>This is an informational message to 
               keep you updated with the latest news.
            </p>
        </div>
    </div>

    <script>
        function showCallout(type) {
            const callout = document.getElementById('callout');
            callout.classList.remove('hide');
            callout.classList.add(type);
            callout.classList.add('show');

            setTimeout(() => {
                hideCallout(callout);
            }, 3000);
        }

        function hideCallout(element) {
            const callout = element.closest('.alert-box');
            callout.classList.add('hide');
            setTimeout(() => {
                callout.classList
                         .remove('show', 'info', 'success',
                               'warning', 'error');
            }, 500);
        }

        // Automatically show callout on page load for demonstration
        window.onload = () => {
            showCallout('info');
        }
    </script>
</body>

</html>

Output:

Tags:

#CSS #Web Technologies

How To Create an Alert Message Box using CSS?