Forem: Sohrab zia

Build a Beautiful Animated Accordion with Just HTML, CSS & JS , No Libraries Needed!

Sohrab zia — Thu, 17 Jul 2025 05:22:41 +0000

Ever wanted to create a gorgeous accordion UI that feels premium without using heavy frameworks or libraries? Let's build one from scratch that’s responsive, elegant, and buttery smooth.

DEMO

See the Pen Fun & Funky School Notebook Accordion | Bounce Animation + Handwritten Style by Sohrab zia (@sohrabzia) on CodePen.

🧠 What We'll Cover

✅ Clean HTML structure
✅ CSS animations and transitions
✅ JavaScript for interaction
✅ Advanced UI touches like hover states, shadows, and responsive tweaks
✅ Bonus: Custom clip-path and handwriting-style content area

🔧 The HTML Structure

We start with a simple, semantic layout:

<div class="accordion-container">
  <div class="accordion-item">
    <button class="accordion-header">
      Accordion Title 1
      <i class="fa-solid fa-chevron-down icon"></i>
    </button>
    <div class="accordion-content">
      <div class="accordion-body">
        <p>This is the content for the first accordion.</p>
      </div> 
    </div>
  </div>
  <!-- Add more items as needed -->
</div>

🎨 The CSS Magic

We give this accordion some real flair — a mix of shadows, gradients, animations, and subtle hover effects:

Key Highlights:

Smooth max-height transitions
clip-path for a ribbon effect
@keyframes for a "slide-up" bounce feel
Handwritten font + paper-style lines for a whimsical twist

:root {
  --accordion-duration: 0.3s;
  --icon-rotate-open: 180deg;
}

/* Accordion Header */
.accordion-header {
  background: #f7d794;
  border-radius: 10px;
  padding: 15px 20px;
  font-weight: bold;
  cursor: pointer;
  transition: background var(--accordion-duration);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  position: relative;
}

/* Decorative Ribbon */
.accordion-header:before {
  content: "";
  position: absolute;
  top: -14px;
  right: 17px;
  width: 91px;
  height: 15px;
  background-color: #f7d794;
  clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
  transition: all 0.3s ease;
}

🚀 The JavaScript That Powers It

Here's the JS logic that adds the open/close functionality and ensures only one accordion stays open:

document.addEventListener("DOMContentLoaded", () => {
  const headers = document.querySelectorAll(".accordion-header");

  headers.forEach((header) => {
    header.addEventListener("click", () => {
      const openHeader = document.querySelector(".accordion-header.active");
      const content = header.nextElementSibling;

      if (openHeader && openHeader !== header) {
        openHeader.classList.remove("active");
        openHeader.nextElementSibling.style.maxHeight = null;
      }

      const isActive = header.classList.contains("active");
      header.classList.toggle("active", !isActive);
      content.style.maxHeight = !isActive ? content.scrollHeight + "px" : null;
    });
  });
});

📱 Responsive Design Ready

@media (max-width: 600px) {
  .accordion-header {
    font-size: 15px;
    padding: 12px 16px;
  }

  .accordion-content {
    padding: 0 16px;
  }
}

💡 Pro Tips

Swap out the font with Google Fonts like 'Patrick Hand' for playful aesthetics.
Adjust the animation timing/distance to match your brand feel.
Replace icons with SVGs if you want more control.

🎁 Bonus: Style Variants You Can Add

Dark mode: Easily tweak with a few color variables.
FAQ style: Pre-load the first item open with a class.
Accordion inside cards: Wrap with .card for extra flair

Bonus Accordion

Creating a Mesmerizing Particle Animation with JavaScript

Sohrab zia — Tue, 01 Oct 2024 05:41:35 +0000

This is what we are going to create, move you mouse over the particles to see the effect.

In this article, I'll walk you through the process of creating a captivating particle animation using JavaScript and HTML5 canvas. This project not only enhances your web page's aesthetics but also serves as a fantastic opportunity to delve into some interesting coding concepts. Let’s dive in!

Project Overview

The animation features particles that move in a circular pattern around a center point. When the mouse hovers over the canvas, the particles are attracted to the cursor, creating a dynamic and engaging effect. We’ll utilize the Simplex Noise library to introduce some randomness and make the motion of particles more organic and visually appealing.

Technologies Used

HTML5 Canvas: For rendering the animation.
JavaScript: For managing the animation logic.
CSS: For styling and layout.
Simplex Noise: To add randomness to the particle movement.

Setting Up the Environment

To get started, create an HTML file and include the Simplex Noise library using the following script tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>

JavaScript Implementation

Here’s the core part of our animation in JavaScript. We'll define the configuration for the particles and set up the canvas to draw them.

'use strict'; // Enables strict mode to enforce stricter parsing and error handling in JavaScript

// Configuration object for particle system
const config = {
    particleCount: 100,                  // Total number of particles in the system
    particlePropCount: 9,                // Number of properties each particle has
    baseTTL: 1,                          // Base time-to-live for each particle (in seconds)
    rangeTTL: 2,                         // Range of time-to-live variation (in seconds)
    baseSpeed: 0.001,                    // Base speed of particle movement
    rangeSpeed: 0.002,                   // Variation in particle speed
    circularSpeed: 0.001,                // Speed of particles' circular motion
    baseRadius: 2,                       // Minimum radius of particles
    rangeRadius: 3,                      // Maximum variation in particle radius
    baseHue: 220,                        // Base hue (color) of particles
    rangeHue: 120,                       // Variation in hue for particle colors
    backgroundColor: '#111827',          // Color of the background
    circleRadius: 250,                   // Radius of the circular area in which particles move
    glowStrength: 10,                    // Strength of the glow effect around particles
    randomnessFactor: 4,                 // Factor to introduce randomness in particle behavior
    trailLength: 10.2,                   // Length of the trail left by particles
    mouseForce: 2,                       // Increased mouse attraction force to pull particles
    mouseRadius: 200                      // Radius within which mouse influence affects particles
};

// Additional JavaScript code goes here...

In the above code, we configure various properties for our particles, including their count, speed, radius, color (hue), and the background color of the canvas.

Initializing Particles

We initialize the particles in a circular pattern and assign them random properties:

function initParticles() {
    particleProps = new Float32Array(config.particleCount * config.particlePropCount);
    const angleIncrement = TAU / config.particleCount;

    for (let i = 0; i < config.particleCount; i++) {
        initParticle(i * config.particlePropCount, i * angleIncrement);
    }
}

function initParticle(i, angleOffset) {
    const radius = config.baseRadius + rand(config.rangeRadius);
    const hue = config.baseHue + rand(config.rangeHue);

    particleProps.set([
        Math.cos(angleOffset) * config.circleRadius + canvas.a.width / 2,
        Math.sin(angleOffset) * config.circleRadius + canvas.a.height / 2,
        0, 0, 0,
        config.baseTTL + rand(config.rangeTTL),
        config.baseSpeed + rand(config.rangeSpeed),
        radius, hue
    ], i);
}

Drawing Particles

The core animation logic is handled in the draw function, where we update and render the particles continuously:

function draw() {
    tick++;
    ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);
    ctx.b.fillStyle = config.backgroundColor;
    ctx.b.fillRect(0, 0, canvas.a.width, canvas.a.height);

    drawParticles();
    renderGlow();
    renderToScreen();
    requestAnimationFrame(draw);
}

CSS Styling

To ensure our animation looks polished, we’ll use some CSS for styling the body and canvas:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    margin: 0;
    background: #000; /* Optional: background color */
}

.content--canvas {
    position: absolute; 
    top: 0;
    z-index: 1;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
}

canvas {
    display: block; 
}

Feel free to experiment with the particle properties in the configuration object to create your unique animation! Check out the live demo on CodePen and share your thoughts or enhancements in the comments below.

Building a Resizable and Sortable HTML Table with Ease

Sohrab zia — Wed, 06 Dec 2023 05:18:05 +0000

Are you tired of static, non-flexible tables that refuse to adapt to your needs? In this tutorial, we'll explore how to transform a standard HTML table into a dynamic and user-friendly powerhouse using a combination of HTML, CSS, and JavaScript.

The Setup

Let's begin with the HTML structure. We have a simple table containing some data about individuals:

<div class="container mt-3">
  <table id="resizeMe" class="resizable-table table table-hover">
    <thead>
       <tr id="header-row">
        <th class="draggable-table" data-column="0">No.</th>
        <th class="draggable-table" data-column="1">First name</th>
        <th class="draggable-table" data-column="2">Last name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Andrea</td>
        <td>Ross</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Penelope</td>
        <td>Mills</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Sarah</td>
        <td>Grant</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Vanessa</td>
        <td>Roberts</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Oliver</td>
        <td>Alsop</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Jennifer</td>
        <td>Forsyth</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Michelle</td>
        <td>King</td>
      </tr>
      <tr>
        <td>8</td>
        <td>Steven</td>
        <td>Kelly</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Julian</td>
        <td>Ferguson</td>
      </tr>
      <tr>
        <td>10</td>
        <td>Chloe</td>
        <td>Ince</td>
      </tr>
    </tbody>
  </table>
</div>

And the accompanying CSS to style our table:

.table {
  border-collapse: collapse;
  width: 100%;
}

.table,
.table th,
.table td {
  border: 1px solid #ccc;
}

.table th,
.table td {
  padding: 0.5rem;
}

.table th {
  position: relative;
   cursor: grab;
      user-select: none;
}   
   .table th:active {
      cursor: grabbing;
    }

.resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  cursor: col-resize;
  user-select: none;
}

.resizer:hover,
.resizing {
  border-right: 2px solid blue;
}

.dragging {
  background-color: #f0f0f0;
}

The Magic of JavaScript

Now, the real magic happens when we inject JavaScript into the mix. We're using two different approaches here: one with the fantastic interact.js library for dragging and resizing columns and another using a custom implementation.

document.addEventListener('DOMContentLoaded', function () {
  const makeTableResizableAndSortable = function (table) {
    const tableBody = table.querySelector('tbody');

    // Make rows sortable
    const rowsSortable = new Sortable(tableBody, {
      animation: 150,
    });

    // Make columns and table header cells draggable using interact.js
    const headers = table.querySelectorAll('th');
    interact(headers).draggable({
      // Enable both left and right edges for dragging
      edges: { left: true, right: true, bottom: false, top: false },
      listeners: {
        start(event) {
          const target = event.target;
          target.classList.add('dragging');
        },
        move(event) {
          const target = event.target;
          const dx = event.dx;
          target.style.transform = `translate(${dx}px)`;
        },
        end(event) {
          const target = event.target;
          target.style.transform = '';
          target.classList.remove('dragging');
        },
      },
    }).resizable({
      // Enable right edge for resizing
      edges: { right: true },
      restrictEdges: {
        outer: 'parent',
      },
      restrictSize: {
        min: { width: 50 },
      },
      listeners: {
        move(event) {
          const target = event.target;
          const width = parseFloat(target.style.width) || 0;
          target.style.width = width + event.dx + 'px';
        },
      },
    });
  };

  const tables = document.querySelectorAll('.resizable-table');
  tables.forEach(function (table) {
    makeTableResizableAndSortable(table);
  });
});



document.addEventListener('DOMContentLoaded', function () {
const createResizableTable = function (table) {
const cols = table.querySelectorAll('th');
[].forEach.call(cols, function (col) {
// Add a resizer element to the column
const resizer = document.createElement('div');
resizer.classList.add('resizer');


// Set the height
resizer.style.height = `${table.offsetHeight}px`;


col.appendChild(resizer);


createResizableColumn(col, resizer);
});
};


const createResizableColumn = function (col, resizer) {
let x = 0;
let w = 0;


const mouseDownHandler = function (e) {
x = e.clientX;


const styles = window.getComputedStyle(col);
w = parseInt(styles.width, 10);


document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);


resizer.classList.add('resizing');
};


const mouseMoveHandler = function (e) {
const dx = e.clientX - x;
col.style.width = `${w + dx}px`;
};


const mouseUpHandler = function () {
resizer.classList.remove('resizing');
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};


resizer.addEventListener('mousedown', mouseDownHandler);
};


createResizableTable(document.getElementById('resizeMe'));
});

How It Works

Sorting Rows
The rows become sortable with the help of the Sortable library, allowing you to effortlessly rearrange your data.
Dragging Columns
Thanks to interact.js, column headers become draggable. A simple visual transformation occurs while dragging, making the experience intuitive.
Resizing Columns
Resizing columns is made easy by placing a resizer at the right edge of each column. A smooth resizing effect is achieved with the interact.js library.

Wrapping Up

And there you have it! A brief yet powerful guide on creating a resizable and sortable HTML table. Whether you prefer the simplicity of interact.js or a custom implementation, the end result is a table that bends to your will.

Creating a Dynamic Date and Time Picker with Bootstrap 4 and jQuery DateTimePicker

Sohrab zia — Thu, 31 Aug 2023 05:10:22 +0000

In this tutorial, we'll walk through the process of creating a dynamic date and time picker using Bootstrap 4 and the jQuery DateTimePicker plugin. This picker will not only allow users to select dates and times but will also dynamically adjust the available times based on whether it's a weekday or a weekend. By the end of this tutorial, you'll have a powerful booking tool that you can integrate into your web applications.

Here is what we will be building

1. Setting Up the Environment:

To get started, you'll need to have Bootstrap 4 and the jQuery DateTimePicker plugin integrated into your project. You can include the necessary CSS and JavaScript files via CDN or by downloading them and linking locally.

2. Designing the User Interface:

we'll design the user interface for the date and time picker. We'll use Bootstrap's classes to create a simple and responsive layout that incorporates the picker input field and a trigger button.

<div class="container mt-3">

  <div class="input-group">
    <input type="text" id="datetimepicker_unixtime" class="form-control" placeholder="Select Date" aria-label="Username" aria-describedby="basic-addon1">
    <a href="#/" class="input-group-text text-decoration-none btn-primary" id="CalendarBtn"><svg xmlns="http://www.w3.org/2000/svg" class="calendarIcon" viewBox="0 0 20 20" fill="#ffffff">
        <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
      </svg></a>
  </div>

</div>

3. Customizing Styles:

The jQuery DateTimePicker comes with default styles, but you might want to customize them to match your application's design. In this part, we'll go over the process of overwriting plugin styles to create a visually appealing and consistent user interface.

.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
  color: #fff !important;
  background: #049087 !important;
  box-shadow: none !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker
  .xdsoft_timepicker
  .xdsoft_time_box
  > div
  > div.xdsoft_current {
  background: #0060a9;
  box-shadow: #0060A90 1px 3px 0 inset;
  color: #fff;
  font-weight: 700;
}
.calendarIcon {
  width: 20px;
  height: 20px;
}

4. Implementing Dynamic Time Selection:

The highlight of this tutorial is the dynamic time selection feature. By utilizing JavaScript, we'll make sure that the available times are different for weekends and weekdays. We'll set up the initial list of times for both scenarios and update them dynamically when the user selects a date. This is perfect for booking appointments or events.

// Get the current date and time
var d = new Date();

// Define available times for weekends and weekdays
var weekendTimes = [
  "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", 
  "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", 
  "17:00", "17:30"
];
var weekdayTimes = [
  "7:00", "7:30", "8:00", "8:30", "9:00", "9:30", 
  "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", 
  "13:00", "13:30", "14:00", "14:30"
];

// Determine which set of times to use based on the current day
var times;
if (d.getDay() == 6 || d.getDay() == 0) { // 0: Sunday, 6: Saturday
  times = weekendTimes;
} else {
  times = weekdayTimes;
}

// Function to dynamically set allowed times based on selected date
var datePickerTime = function (currentDateTime) {
  // 'this' refers to the jQuery DateTimePicker object
  var day = currentDateTime.getDay();

  // Set allowed times based on weekdays or weekends
  if (day === 0 || day === 6) {
    this.setOptions({
      allowTimes: weekendTimes
    });
  } else {
    this.setOptions({
      allowTimes: weekdayTimes
    });
  }
};

// Initialize the DateTimePicker
jQuery("#datetimepicker_unixtime").datetimepicker({
  inline: false,
  minDate: 0,
  onSelectDate: datePickerTime,
  defaultDate: d,
  allowTimes: times,
  formatTime: "h:i a",
  step: 60,
  format: "d/m/y h:i a",
  onGenerate: function (hu) {
    // Disable selection of a specific weekday (Friday)
    jQuery(this)
      .find(".xdsoft_date.xdsoft_day_of_week5")
      .addClass("xdsoft_disabled");
  }
});

// Show the DateTimePicker when the button is clicked
jQuery("#CalendarBtn").click(function () {
  jQuery("#datetimepicker_unixtime").datetimepicker("show"); // Supports hide, show, and destroy commands
});

Congratulations! You've successfully created a dynamic date and time picker using Bootstrap 4 and the jQuery DateTimePicker plugin. This tutorial covered everything from environment setup to building a user-friendly interface and implementing advanced functionality. You now have a versatile tool that can enhance user experiences in your web applications by providing appropriate time options based on weekdays or weekends.

Creating Animated SVG Morph Transitions with TweenMax and MorphSVGPlugin

Sohrab zia — Wed, 30 Aug 2023 04:45:21 +0000

In this tutorial, we're going to explore how to create captivating SVG animations using the TweenMax library and the MorphSVGPlugin. We'll walk through the process of morphing between different SVG shapes to create a visually appealing animation. The example we'll cover involves transforming a simple set of shapes representing buildings into each other seamlessly.

Prerequisites

Basic understanding of HTML, CSS, and JavaScript.
Familiarity with SVG (Scalable Vector Graphics) syntax.

Setting Up the HTML and CSS

Start by creating an HTML file that includes link to the TweenMax and MorphSVGPlugin libraries and the SVG markup for the initial set of shapes. You can place this code within the <body> of your HTML file. Additionally, set up some basic CSS rules to style and position the SVG appropriately:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>SVG Morph Animation</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 800 600" class="svg">
    <!-- SVG paths representing buildings -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="0 0 800 600" class="svg">
<path id="hamra" fill="#22B573" d="M370.599,502.002c0,0-13.599-110.921-13.599-152.335S357,148,357,148l53-18.44V68l26,34.192V502
    l-63.401-0.818L370.599,502.002z"/>
<path id="ktowerbig" fill="#FC3030" d="M470.565,337.748c0-33.663-22.392-62.081-53.088-71.212l-2.652-24.19
    c16.421-7.166,27.903-23.537,27.903-42.599c0-22.62-16.166-41.455-37.573-45.605l-8.895-81.146l-8.895,81.147
    c-21.404,4.152-37.566,22.986-37.566,45.604c0,19.06,11.48,35.43,27.899,42.597l-2.652,24.193
    c-30.694,9.133-53.083,37.549-53.083,71.21c0,27.914,15.402,52.47,38.163,65.167L349.292,502h93.943L432.4,402.916
    C455.163,390.219,470.565,365.663,470.565,337.748z"/>
<path id="ktowersmall" fill="#4D4D4D" d="M467.98,257.748c0-35.339-25.566-64.686-59.207-70.607L396.26,72.997l-12.512,114.145
    c-33.638,5.923-59.201,35.27-59.201,70.606c0,29.859,18.251,55.697,44.202,66.49L349.292,502h93.943l-19.46-177.762
    C449.729,313.446,467.98,287.607,467.98,257.748z"/>
<polygon id="ltower" fill="#3FA9F5" points="436.899,358 443.235,341.963 437.494,328 422.645,328 418.783,287.318 437,279 
    437,225.424 408.727,216.38 400.029,72.991 396.208,72.997 392.292,72.991 383.044,216.38 354,225.424 354,279 372.981,287.318 
    369.883,328 355.034,328 349.292,341.963 355.628,358 366.01,358 349.292,502 393.981,502 398.685,502 443.235,502 426.518,358 "/>
</svg>

    <!-- Add your path elements here -->
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<!-- get the js plugin from https://gist.github.com/rikvermeer/3a9ad7a7ee3f3f917673dfb06c9f800a -->
</body>
</html>

In the CSS file, we'll apply some basic styles to the SVG and hide all shapes except the first one:

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

body {
  text-align: center;
  padding: 20px;
}

.svg {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  display: block;
}

/* Hide all shapes except the first one */
#ktowerbig, #ktowersmall, #ltower {
  visibility: hidden;
}

Creating the SVG Morph Animation

Now, let's set up the JavaScript to handle the animation using TweenMax and MorphSVGPlugin. Create a JavaScript file named script.js and add the following code:

// Select the starting shape element
var start = document.getElementById("hamra");

// Duration for each morphing animation
var eachDuration = 1.5;

// Create a timeline for the animation with repeat
var morph = new TimelineMax({ repeat: -1 });

// Define the sequence of morphing animations
morph
  .to(start, eachDuration, { morphSVG: "#ktowerbig", fill: "#FC3030", ease: Elastic.easeInOut })
  .to(start, eachDuration, { morphSVG: "#ktowersmall", fill: "#4D4D4D", ease: Elastic.easeInOut })
  .to(start, eachDuration, { morphSVG: "#ltower", fill: "#3FA9F5", ease: Elastic.easeInOut })
  .to(start, eachDuration, { morphSVG: start, fill: "#22B573", ease: Elastic.easeInOut });

Here is the codepen

In this tutorial, we've learned how to create an engaging SVG animation using the TweenMax library and the MorphSVGPlugin. By combining the power of JavaScript, SVG, and animation libraries, you can create impressive visual effects that enhance user experiences on the web. Feel free to experiment with different SVG shapes, colors, and durations to customize the animation to your liking.

Creating Stylish HTML Tables with Hover Effects Using CSS and JavaScript

Sohrab zia — Tue, 29 Aug 2023 05:19:23 +0000

Tables are a fundamental part of web development, often used to display data in a structured and organized manner. However, tables can sometimes appear dull and lackluster. In this article, we'll explore how to enhance your HTML tables with stylish hover effects using CSS and JavaScript. The end result will be visually appealing tables that engage users and make data presentation more interactive.

Prerequisites

Before we dive into the implementation, make sure you have a basic understanding of HTML, CSS, and JavaScript. This article assumes you're familiar with these technologies.

Building the HTML Structure

Let's start by setting up the HTML structure for our table. We'll create a simple table with three columns: Name, Description, and Year. Here's the basic HTML code:

<!-- HTML -->
<table border="0" class="table" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table rows with data -->
  </tbody>
</table>

Styling the Table with CSS

Now, let's style the table using CSS to achieve the desired appearance. We'll apply a border, set font sizes, and align content. Here's the CSS code:

body {
  margin: 20px;
  margin-top:100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table {
  width: 700px;
  border: 1px solid black;
}
.table th {
  text-transform: uppercase;
  font-size: 10px;
}
.table tr th:last-child,
.table tr td:last-child{
  text-align:center;
}
.table th,
.table td {
  padding: 10px;
  text-align: left;
  padding: 15px;
  border-bottom: 1px solid black;
}
.table tr:last-child td {
  border-bottom: 0px solid black;
}
.effect {
  display: inline-block;
  transition: all 250ms ease;
  position: relative;
  padding: 5px;
  transition: all 0.3s ease;
}
.effect:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background-color: black;
  border-radius: 5px;
  z-index: -1;
  transition: all 0.3s ease;
}
.table tr:hover .effect:before {
  width: 100%;
}
.table tr:not(:hover) .effect:before {
  right: 0;
  left: initial;
  opacity: 0.7;
}
.table tr:hover .effect {
  color: white;
}

Implementing the JavaScript

To achieve the hover effect, we'll use JavaScript to wrap the content of each table cell in a div element with the class "effect". This allows us to manipulate the styles of these elements when the user hovers over a row and keep the HTML clean. Here's the JavaScript code:

// JavaScript
// Get all the table elements with the class ".table"
const tables = document.querySelectorAll('.table');

// Loop through each table
tables.forEach(table => {
  // Get all the td elements within the current table
  const tds = table.querySelectorAll('td');

  // Loop through each td element
  tds.forEach(td => {
    // Create a new div element with the class "effect"
    const tdText = document.createElement('div');
    tdText.classList.add('effect');

    // Move the content of the td element into the div element
    while (td.firstChild) {
      tdText.appendChild(td.firstChild);
    }
    // Append the div element back into the td element
    td.appendChild(tdText);
  });
});

By combining HTML, CSS, and JavaScript, we've successfully created visually appealing tables with hover effects. The hover effect engages users and adds interactivity to an otherwise static table, making data presentation more enjoyable and user-friendly. You can further customize the styles and animations to match your website's design theme. Feel free to experiment and enhance these techniques to create even more dynamic table designs.

Here is the codepen

Responsive Data Grid with Sliding and Fading Cards

Sohrab zia — Mon, 28 Aug 2023 05:00:04 +0000

In this interactive demo, we showcase a responsive data grid with cards that elegantly slide in from the bottom while simultaneously fading in on page load. Each card is dynamically animated with a slight delay to create a visually engaging sequential effect. This effect adds a touch of elegance to your user interface, capturing attention and providing a smooth user experience.

Features:

Utilizes Tailwind CSS for responsive grid layout and styling.
Custom animation classes for sliding and fading effects.
JavaScript for applying animation delays to achieve a sequential entrance.

Experience the animation sequence as each card gracefully emerges into view, making your content presentation visually appealing and modern.

tailwindcss: scroll to div horizontally:

Sohrab zia — Sun, 27 Aug 2023 05:55:53 +0000

HTML Structure:

The HTML structure defines a simple web page layout with two div elements placed side by side within a flex container. Each div represents a content section and contains a link for scrolling to the other div. The layout is achieved using Tailwind CSS classes and flexbox properties.

Div Layout:

The parent container is given the flex class, which sets up a flexbox layout, allowing its child divs to be displayed side by side.

Each child div is assigned a unique id (e.g., div1 and div2) for targeting with the links.

Styling and Positioning:

The flex-shrink-0 and flex-grow-0 classes prevent the divs from shrinking or growing to fit their content, ensuring they maintain their specified widths.

The bg-red-300 and bg-green-300 classes provide background colors to the divs. You can replace these with your desired colors.

The w-screen and h-screen classes set each div's width and height to match the full viewport size, ensuring the divs cover the entire screen.

The overflow-y-scroll class enables vertical scrolling within each div if the content exceeds the viewport height.

The flex justify-center items-center flex-col classes are applied to center the link both vertically and horizontally within each div. The flex-col class stacks the content vertically.

The links within each div are styled using the block text-center text-blue-600 underline classes. They appear as block elements, are centered horizontally, have a blue color, and are underlined for visibility.

Interactivity:

The links within each div use href attributes with values corresponding to the id of the target div. This allows users to click the links to scroll smoothly to the other div.
Customization:

The provided code is a starting point that you can customize to match your design preferences. You can adjust colors, fonts, spacing, and other styling elements to create a unique look for your webpage.
Overall, this HTML and CSS layout showcases the flexibility and power of Tailwind CSS and modern web design techniques. It offers an engaging user experience by enabling seamless navigation between two content sections with centered links for easy interaction.

Tailwind, HALT AND CATCH FIRE animated logo

Sohrab zia — Wed, 23 Aug 2023 09:43:12 +0000

Halt and catch fire intro logo with glitch effect.

This JavaScript code creates an animated glitch effect on an HTML5 Canvas element. The glitch effect consists of lines that appear to be distorted, similar to a digital glitch. The glitch lines are drawn randomly from the center of the canvas.

The colors used for the glitch lines alternate between red and black. The displacement of the lines is randomly adjusted to create the glitchy appearance. The animation updates at regular intervals, producing a dynamic and visually interesting effect.

Windows setting with bootstrap

Sohrab zia — Sat, 01 Jan 2022 07:57:16 +0000

Material design nav

Sohrab zia — Fri, 09 Jul 2021 21:03:07 +0000

Mouse Hover the Red Circle it will open Menu. I have the one which works on click in my CodePen Profile.

SVG Animation | Kuwait Buildings

Sohrab zia — Fri, 09 Jul 2021 21:02:40 +0000

Sohrab's animated SVG kuwait building

Forem: Sohrab zia

Build a Beautiful Animated Accordion with Just HTML, CSS & JS , No Libraries Needed!

DEMO

🧠 What We'll Cover

🔧 The HTML Structure

🎨 The CSS Magic

Key Highlights:

🚀 The JavaScript That Powers It

📱 Responsive Design Ready

💡 Pro Tips

🎁 Bonus: Style Variants You Can Add

Bonus Accordion

Creating a Mesmerizing Particle Animation with JavaScript

Project Overview

Technologies Used

Setting Up the Environment

JavaScript Implementation

Initializing Particles

Drawing Particles

CSS Styling

Building a Resizable and Sortable HTML Table with Ease

The Setup

The Magic of JavaScript

How It Works

Wrapping Up

Creating a Dynamic Date and Time Picker with Bootstrap 4 and jQuery DateTimePicker

Table of Contents:

1. Setting Up the Environment:

2. Designing the User Interface:

3. Customizing Styles:

4. Implementing Dynamic Time Selection:

Creating Animated SVG Morph Transitions with TweenMax and MorphSVGPlugin

Prerequisites

Setting Up the HTML and CSS

Creating the SVG Morph Animation

Here is the codepen

Creating Stylish HTML Tables with Hover Effects Using CSS and JavaScript

Prerequisites

Building the HTML Structure

Styling the Table with CSS

Implementing the JavaScript

Here is the codepen

Responsive Data Grid with Sliding and Fading Cards

Features:

tailwindcss: scroll to div horizontally:

HTML Structure:

Div Layout:

Styling and Positioning:

Interactivity:

Tailwind, HALT AND CATCH FIRE animated logo

Windows setting with bootstrap

Material design nav

SVG Animation | Kuwait Buildings