CSS Project: Crafting a Simple, Pure CSS Animated Notification Bell

Written by

FixTechToday

in

In the digital landscape, grabbing a user’s attention is paramount. Whether it’s a new message, an update, or a critical alert, a well-designed notification system can significantly enhance user experience. While complex notification systems often rely on JavaScript and backend technologies, a surprisingly effective and visually appealing notification bell can be created using pure CSS. This project offers a fantastic opportunity for beginners and intermediate web developers to sharpen their CSS skills, learn about animations, and create a reusable component that can be easily integrated into any website.

Why Build a CSS Notification Bell?

Why choose a CSS notification bell over other methods? Here’s why:

  • Performance: CSS animations are generally hardware-accelerated, making them performant and smooth, even on less powerful devices.
  • Simplicity: No JavaScript is required, leading to cleaner code and easier maintenance.
  • Accessibility: With proper implementation, a CSS notification bell can be made accessible to users with disabilities.
  • Learning Opportunity: This project provides hands-on experience with key CSS concepts like transitions, transforms, and keyframe animations.
  • Reusability: Once created, the component can be easily reused across multiple projects.

Project Goals

Our goal is to create a notification bell with the following features:

  • A bell icon.
  • A notification bubble with a counter.
  • An animation to indicate a new notification (e.g., a subtle shake or bounce).
  • Responsiveness to ensure it looks good on different screen sizes.

Step-by-Step Implementation

1. HTML Structure

Let’s start with the HTML structure. We’ll use a simple structure with a container, the bell icon, and the notification bubble. We’ll use a div element as a container for styling and positioning, an i tag for the bell icon (using Font Awesome or similar), and another div for the notification bubble.

<div class="notification-container">
  <i class="fas fa-bell notification-icon"></i>
  <div class="notification-bubble">3</div>
</div>

In this code:

  • notification-container: This div holds the entire component.
  • fas fa-bell notification-icon: This is the bell icon. Make sure you have Font Awesome (or a similar icon library) linked in your HTML. If you prefer, you can use an SVG icon here instead.
  • notification-bubble: This div contains the notification count.

2. Basic CSS Styling

Now, let’s add some basic CSS to style the bell and bubble. We’ll start with the container and icon, setting up the basic layout.


.notification-container {
  position: relative; /*  Needed for absolute positioning of the bubble */
  display: inline-block; /* Allows the bell to be inline with text */
  cursor: pointer; /* Indicates it's clickable */
}

.notification-icon {
  font-size: 2em; /* Adjust the size as needed */
  color: #333; /* Icon color */
}

This CSS does the following:

  • notification-container: Sets the container’s position to relative, which will be essential for positioning the notification bubble. It also sets the display to inline-block to allow the icon to sit inline with text. The cursor property changes the cursor to a pointer, indicating that the bell is interactive.
  • notification-icon: Sets the font size and color of the bell icon.

3. Styling the Notification Bubble

Next, let’s style the notification bubble. This involves positioning it, giving it a circular shape, and adding a background color and text color.


.notification-bubble {
  position: absolute; /* Positions the bubble relative to the container */
  top: -10px; /* Adjust as needed */
  right: -10px; /* Adjust as needed */
  background-color: #f00; /* Red background */
  color: #fff; /* White text */
  border-radius: 50%; /* Creates a circle */
  width: 20px; /* Adjust as needed */
  height: 20px; /* Adjust as needed */
  font-size: 0.8em; /* Adjust as needed */
  text-align: center; /* Centers the text */
  line-height: 20px; /* Vertically centers the text */
  font-weight: bold; /* Makes the text bold */
  /*  Hide the bubble by default */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

Key points here:

  • position: absolute;: This is crucial. It positions the bubble relative to the notification-container, which is set to position: relative;.
  • top and right: These properties position the bubble in the top-right corner of the bell. Adjust these values to fine-tune the positioning.
  • border-radius: 50%;: This creates a perfect circle.
  • text-align: center; and line-height: These center the notification count both horizontally and vertically.
  • opacity: 0; and transition: opacity 0.3s ease-in-out;: The bubble is initially hidden. We’ll use JavaScript (or a class added dynamically) to make it visible later. The transition adds a smooth fade-in effect.

4. Adding the Animation

Now, let’s add the animation. We’ll create a simple shake animation using CSS keyframes. This is what will draw the user’s attention to the bell when a new notification arrives.


@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-3px, -3px) rotate(-5deg); }
  20% { transform: translate(3px, 3px) rotate(5deg); }
  30% { transform: translate(-3px, 3px) rotate(-5deg); }
  40% { transform: translate(3px, -3px) rotate(5deg); }
  50% { transform: translate(-3px, 0) rotate(-5deg); }
  60% { transform: translate(3px, 0) rotate(5deg); }
  70% { transform: translate(-3px, 3px) rotate(-5deg); }
  80% { transform: translate(3px, -3px) rotate(5deg); }
  90% { transform: translate(-3px, -3px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

This keyframe animation defines the shake effect. The bell will move slightly in different directions and rotate a little to create a visual shake effect. The animation goes through several keyframes, which define the state of the element at different points in time.

Now, let’s apply this animation to the bell icon. We’ll add a class to the container when a new notification arrives. This can be triggered by a JavaScript function or based on some other event in your application. For example, in JavaScript:


// Assuming you have a reference to the notification container
const notificationContainer = document.querySelector('.notification-container');

function showNotification() {
  notificationContainer.classList.add('new-notification');
  // Optional: Remove the class after a certain time to stop the animation
  setTimeout(() => {
    notificationContainer.classList.remove('new-notification');
  }, 2000); // Remove after 2 seconds
}

// Call showNotification() when a new notification arrives

Now, add the following CSS to apply the animation:


.notification-container.new-notification .notification-icon {
  animation: shake 0.5s ease-in-out;
}

.notification-container.new-notification .notification-bubble {
  opacity: 1;
}

Here’s what this CSS does:

  • .notification-container.new-notification .notification-icon: This targets the bell icon *only* when the new-notification class is present on the container.
  • animation: shake 0.5s ease-in-out;: This applies the shake animation we defined earlier, sets a duration, and specifies an easing function for a smoother effect.
  • .notification-container.new-notification .notification-bubble { opacity: 1; }: This makes the notification bubble visible when the new-notification class is present.

5. Making it Responsive

To ensure the notification bell looks good on different screen sizes, consider these points:

  • Font Sizes: Use relative units like em or rem for font sizes to allow them to scale with the user’s browser settings or device size.
  • Icon Size: Use a relative unit (e.g., font-size) or consider using an SVG icon that scales well.
  • Media Queries: Use media queries to adjust the size and positioning of the bell and bubble on smaller screens. For example:

@media (max-width: 768px) {
  .notification-icon {
    font-size: 1.5em; /* Reduce the size on smaller screens */
  }
  .notification-bubble {
    top: -5px; /* Adjust positioning */
    right: -5px; /* Adjust positioning */
    width: 15px; /* Adjust bubble size */
    height: 15px; /* Adjust bubble size */
    line-height: 15px; /* Adjust text centering */
  }
}

This media query reduces the icon size and adjusts the bubble’s position and size on screens with a maximum width of 768px.

6. Accessibility Considerations

Making your notification bell accessible ensures that all users can understand and interact with it. Here are some accessibility best practices:

  • Semantic HTML: Use semantic HTML elements. While we use an i tag for the icon, consider using a button element with an appropriate ARIA attribute (e.g., aria-label="Notifications") for the container if it’s meant to be interactive.
  • ARIA Attributes: Use ARIA attributes to provide additional information to screen readers. For example, you could add aria-label="You have 3 new notifications" to the container when notifications are present. Dynamically update this label to reflect the number of notifications.
  • Color Contrast: Ensure sufficient color contrast between the icon, bubble background, bubble text, and the background of the page. Use a color contrast checker to verify this.
  • Keyboard Navigation: If the bell is interactive (e.g., opens a panel), ensure it is focusable with the keyboard and that users can navigate to and interact with it using the Tab key.
  • Alternative Text for Icon: Although in this case the icon is for decorative purposes, if it conveys meaning, provide alternative text (e.g., using aria-label or title attributes).
  • Avoid Excessive Animations: While animations can be engaging, they can also be distracting or even cause issues for users with certain conditions. Provide a way for users to disable animations if necessary (e.g., through a user preference or a CSS media query like prefers-reduced-motion).

7. Complete Code Example

Here’s the complete code, combining the HTML and CSS:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Notification Bell</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    .notification-container {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }

    .notification-icon {
      font-size: 2em;
      color: #333;
    }

    .notification-bubble {
      position: absolute;
      top: -10px;
      right: -10px;
      background-color: #f00;
      color: #fff;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 0.8em;
      text-align: center;
      line-height: 20px;
      font-weight: bold;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    @keyframes shake {
      0% { transform: translate(0, 0) rotate(0deg); }
      10% { transform: translate(-3px, -3px) rotate(-5deg); }
      20% { transform: translate(3px, 3px) rotate(5deg); }
      30% { transform: translate(-3px, 3px) rotate(-5deg); }
      40% { transform: translate(3px, -3px) rotate(5deg); }
      50% { transform: translate(-3px, 0) rotate(-5deg); }
      60% { transform: translate(3px, 0) rotate(5deg); }
      70% { transform: translate(-3px, 3px) rotate(-5deg); }
      80% { transform: translate(3px, -3px) rotate(5deg); }
      90% { transform: translate(-3px, -3px) rotate(-5deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }

    .notification-container.new-notification .notification-icon {
      animation: shake 0.5s ease-in-out;
    }

    .notification-container.new-notification .notification-bubble {
      opacity: 1;
    }

    /* Media query for responsiveness */
    @media (max-width: 768px) {
      .notification-icon {
        font-size: 1.5em;
      }
      .notification-bubble {
        top: -5px;
        right: -5px;
        width: 15px;
        height: 15px;
        line-height: 15px;
      }
    }
  </style>
</head>
<body>
  <div class="notification-container">
    <i class="fas fa-bell notification-icon"></i>
    <div class="notification-bubble">3</div>
  </div>

  <script>
    // Assuming you have a reference to the notification container
    const notificationContainer = document.querySelector('.notification-container');

    function showNotification() {
      notificationContainer.classList.add('new-notification');
      // Optional: Remove the class after a certain time to stop the animation
      setTimeout(() => {
        notificationContainer.classList.remove('new-notification');
      }, 2000); // Remove after 2 seconds
    }

    // Example: Call showNotification() when a new notification arrives
    // showNotification(); // Uncomment to test
  </script>
</body>
</html>

This is a complete, working example. Remember to include Font Awesome (or your preferred icon library) in the <head> section.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect Positioning: The notification bubble not appearing in the correct position. This is usually due to incorrect use of position: absolute; on the bubble and/or the container not being set to position: relative;. Double-check your positioning values (top, right, bottom, left) and ensure the container has the correct positioning context.
  • Bubble Not Visible: The notification bubble is not visible. This is often because the initial opacity is set to 0 and the class to trigger the animation is not being applied correctly. Verify your JavaScript (or the mechanism that adds the class) and ensure the class is being added when a new notification arrives. Also, check that you have the right CSS selectors to target the bubble when the class is added.
  • Animation Not Working: The animation doesn’t play. Make sure you’ve included the @keyframes rule and that you’re applying the animation to the correct element with the correct class. Also, check for any CSS conflicts that might be overriding your animation styles. Use your browser’s developer tools to inspect the element and see if the animation properties are being applied.
  • Incorrect Icon Import: The bell icon doesn’t show up. This usually means the icon library (e.g., Font Awesome) isn’t linked correctly in your HTML. Double-check the <link> tag in your <head> section and make sure the path to the CSS file is correct. Also, verify that the icon class (e.g., fas fa-bell) is spelled correctly.
  • Responsiveness Issues: The bell looks bad on smaller screens. Remember to use relative units (em, rem, percentages) for font sizes and sizes, and use media queries to adjust the styling for different screen sizes.

Summary / Key Takeaways

Creating a CSS notification bell is a rewarding project that combines fundamental CSS skills with the power of animations. You’ve learned how to structure the HTML, style the elements, implement a simple animation, and make the component responsive and accessible. Remember these key takeaways:

  • Positioning is Key: Understanding position: relative; and position: absolute; is crucial for positioning the notification bubble.
  • Master the Animation: Keyframe animations allow you to create engaging visual effects.
  • Accessibility Matters: Consider accessibility from the start to ensure your component is usable by everyone.
  • Responsiveness is Essential: Use media queries and relative units to make your component look great on all devices.
  • Clean Code is Best: Well-organized and commented code makes maintenance easier.

Optional FAQ

Here are a few frequently asked questions:

1. Can I use a different icon library?

Yes, absolutely! You can use any icon library you prefer (e.g., Bootstrap Icons, Material Icons, or custom SVG icons). Just make sure you link the library’s CSS file in your HTML and use the correct icon classes in your HTML.

2. How do I change the notification count dynamically?

You’ll need to use JavaScript to update the text content of the notification-bubble element. Get a reference to the element using document.querySelector() or similar, and then set its textContent property to the new notification count. For example:


const notificationBubble = document.querySelector('.notification-bubble');
function updateNotificationCount(count) {
  notificationBubble.textContent = count;
}

// Example:  updateNotificationCount(5);

3. How can I make the animation more complex?

You can experiment with more complex animations using CSS keyframes. Try adding different transforms (e.g., scale, rotate), transitions, and timing functions to create more sophisticated effects. You can also explore using CSS animations in combination with CSS transitions for even more flexibility. Consider using a CSS animation library like Animate.css to simplify the process.

4. How can I make the notification bell interactive (e.g., open a panel)?

You can add an event listener to the notification-container element (or the icon itself) and trigger a JavaScript function when the bell is clicked. This function could then show or hide a notification panel, display a list of notifications, or perform any other action you desire. Remember to consider accessibility when implementing this functionality (e.g., providing keyboard navigation and ARIA attributes).

5. How can I improve the performance of the animation?

CSS animations are generally performant, but you can optimize them further. Avoid using complex animations that require a lot of calculations. Use the will-change property to tell the browser which properties are going to be animated, which can help with performance. For example, you could add will-change: transform; to the .notification-icon style. Also, keep the animation duration and easing functions relatively simple.

Building a CSS notification bell is a great way to improve your CSS skills and create a reusable component for your web projects. By following these steps and understanding the underlying concepts, you can create a visually appealing and functional notification system that enhances the user experience. Experiment with different animations, styles, and features to make it your own and adapt it to your specific needs. From basic styling to advanced animations, the possibilities are endless. Keep learning, keep experimenting, and keep building!

More posts