Skip to content

feat: Add Pure CSS Sliding Glassmorphic Tabs Component (ease-tabs) #773 #891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hasini2706 wants to merge 1 commit into
base: main
Choose a base branch
from
+877 −0
Open

feat: Add Pure CSS Sliding Glassmorphic Tabs Component (ease-tabs) #773 #891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 160 additions & 0 deletions submissions/examples/ease-tabs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
# Pure CSS Sliding Glassmorphic Tabs (`ease-tabs`)

A pure HTML and CSS tab component designed with a state-of-the-art glassmorphic aesthetic. The component is fully functional without requiring any JavaScript, utilizing radio inputs and CSS sibling selectors for active state tracking and tab-switching animation.

---

## Feature Overview

The Sliding Glassmorphic Tabs (`ease-tabs`) component is a lightweight, responsive navigation element suitable for modern dashboard panels, settings dialogs, or workspace headers. It implements high-fidelity frosted glass rendering (`backdrop-filter`) with custom fluid sliding transitions (`cubic-bezier`), bringing premium operating system style layouts directly to native web interfaces.

---

## Features

- **Pure CSS logic**: No JavaScript overhead. Handles inputs, selection, transitions, and panels entirely with native CSS features.
- **Glassmorphism Theme**: Employs frosted glass backdrop filters, thin translucent high-contrast borders, and soft shadows that blend with active backgrounds.
- **Sliding Glider (Pill) Animation**: Uses CSS transformations with specialized cubic-bezier curves for fluid transitions when moving between tabs.
- **Accessible & SEO-Friendly**: Retains hidden native radio inputs to support screen reader configurations and standard keyboard arrow navigation.
- **Responsive Layout**: Adapts layout, padding, font-scale, and icon bounds for mobile viewports using media queries.
- **Micro-interactions**: Subtle active scaling and unique accent color schemes for icons based on selection state.

---

## Folder Structure

```text
submissions/examples/ease-tabs/
├── demo.html # Interactive component structure & showcase layout
├── style.css # Core glassmorphic rules, positioning, transitions & animations
└── README.md # Comprehensive implementation & reference documentation
```

---

## Usage Instructions

To include the sliding glassmorphic tabs component in your project:

1. Copy the markup in the **HTML Example** below into your body file.
2. Link the core `style.css` (or adapt the rules into your design tokens file).
3. Ensure parent containers have descriptive background images or colorful linear gradients to showcase the backdrop blur effect.

---

## HTML Example

```html
<div class="ease-tabs-container">

<!-- Visually Hidden inputs for selection logic -->
<input type="radio" id="tab-dashboard" name="ease-tabs" class="ease-tab-input" checked>
<input type="radio" id="tab-analytics" name="ease-tabs" class="ease-tab-input">
<input type="radio" id="tab-settings" name="ease-tabs" class="ease-tab-input">

<!-- Accessible Tab Navigation list -->
<nav class="ease-tabs-nav" role="tablist" aria-label="Settings configuration">

<label for="tab-dashboard" class="ease-tab-label label-dashboard" role="tab">
<span>Dashboard</span>
</label>

<label for="tab-analytics" class="ease-tab-label label-analytics" role="tab">
<span>Analytics</span>
</label>

<label for="tab-settings" class="ease-tab-label label-settings" role="tab">
<span>Settings</span>
</label>

<!-- Animated Glass Slider -->
<div class="ease-tab-glider" aria-hidden="true"></div>

</nav>

<!-- Content Panels -->
<div class="ease-tabs-content">
<article id="panel-dashboard" class="ease-tab-panel panel-dashboard" role="tabpanel">
<!-- Content for Dashboard goes here -->
</article>

<article id="panel-analytics" class="ease-tab-panel panel-analytics" role="tabpanel">
<!-- Content for Analytics goes here -->
</article>

<article id="panel-settings" class="ease-tab-panel panel-settings" role="tabpanel">
<!-- Content for Settings goes here -->
</article>
</div>

</div>
```

---

## CSS Highlights

### Dynamic Glider Scaling
The glider width and translation matrix are mathematically calculated to remain fluid regardless of container resizing:

```css
.ease-tab-glider {
position: absolute;
top: 6px;
bottom: 6px;
left: 6px;
width: calc((100% - 20px) / 3); /* Accounts for paddings and margins */
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Sibling selection positions glider */
#tab-dashboard:checked ~ .ease-tabs-nav .ease-tab-glider {
transform: translateX(0);
}
#tab-analytics:checked ~ .ease-tabs-nav .ease-tab-glider {
transform: translateX(calc(100% + 4px)); /* 100% glider width + 4px flex gap */
}
#tab-settings:checked ~ .ease-tabs-nav .ease-tab-glider {
transform: translateX(calc(200% + 8px)); /* 200% glider width + 8px flex gaps */
}
```

### Frosted Backdrop Layout
Provides the characteristic glassmorphic light diffusion and crisp borders:

```css
.ease-tabs-nav {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 4px 30px rgba(0, 0, 0, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.05);
}
```

---

## Browser Support

| Browser | Supported | Features Utilized |
| :--- | :--- | :--- |
| **Google Chrome** | Yes (76+) | Backdrop blur, flexbox, transforms |
| **Mozilla Firefox** | Yes (70+) | Backdrop blur, flexbox, transforms |
| **Apple Safari** | Yes (13+) | `-webkit-backdrop-filter` prefixes |
| **Microsoft Edge** | Yes (79+) | Backdrop blur, flexbox, transforms |

---

## Screenshots

*Place screenshot assets or live mockups illustrating the dark-theme layout with sliding interactions here.*

---

## Contribution Notes

- **Naming Convention**: Classes are structured with the `ease-*` suffix for simple, self-contained integration.
- **Styling Standards**: Custom style overrides should avoid hardcoded device dimensions. Use fluid values like percentages, `em`/`rem` scopes, and flex bounds.
- **Zero JavaScript Rule**: Any upgrades to this structure must respect pure HTML+CSS architecture, utilizing native pseudo-classes and selectors.
156 changes: 156 additions & 0 deletions submissions/examples/ease-tabs/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sliding Glassmorphic Tabs - EaseMotion CSS</title>

<!-- Google Fonts for modern typography -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Link to the CSS demo stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Ambient background glow blobs to showcase backdrop-blur -->
<div class="bg-glow bg-glow-1" aria-hidden="true"></div>
<div class="bg-glow bg-glow-2" aria-hidden="true"></div>

<div class="demo-wrapper">
<header class="demo-header">
<span class="demo-badge">CSS Animation Showcase</span>
<h1>Glassmorphic Sliding Tabs</h1>
<p class="demo-subtitle">A state-of-the-art interactive component powered entirely by modern CSS. Zero JavaScript dependency.</p>
</header>

<main class="demo-container">
<div class="ease-tabs-container">

<!-- Tab Inputs (Visually Hidden but Accessibly Focusable) -->
<input type="radio" id="tab-dashboard" name="ease-tabs" class="ease-tab-input" checked>
<input type="radio" id="tab-analytics" name="ease-tabs" class="ease-tab-input">
<input type="radio" id="tab-settings" name="ease-tabs" class="ease-tab-input">

<!-- Navigation Bar (Role Tablist) -->
<nav class="ease-tabs-nav" role="tablist" aria-label="Main settings tabs">

<label for="tab-dashboard" id="label-dashboard" class="ease-tab-label label-dashboard" role="tab">
<svg class="ease-tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-4zM14 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2v-4z"></path>
</svg>
<span>Dashboard</span>
</label>

<label for="tab-analytics" id="label-analytics" class="ease-tab-label label-analytics" role="tab">
<svg class="ease-tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
<span>Analytics</span>
</label>

<label for="tab-settings" id="label-settings" class="ease-tab-label label-settings" role="tab">
<svg class="ease-tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span>Settings</span>
</label>

<!-- Sliding Glider/Pill -->
<div class="ease-tab-glider" aria-hidden="true"></div>

</nav>

<!-- Tab Panels (Display mapped by checked radio using sibling selectors) -->
<div class="ease-tabs-content">

<!-- Dashboard Panel -->
<article id="panel-dashboard" class="ease-tab-panel panel-dashboard" role="tabpanel" aria-labelledby="label-dashboard">
<div class="panel-header">
<h2>Performance Overview</h2>
<span class="status-indicator online">Active System</span>
</div>

<div class="stats-grid">
<div class="stat-card">
<span class="stat-label">Active Users</span>
<span class="stat-value">1,482</span>
<span class="stat-change positive">+12.4%</span>
</div>
<div class="stat-card">
<span class="stat-label">Response Time</span>
<span class="stat-value">84ms</span>
<span class="stat-change positive">-4.2%</span>
</div>
</div>

<p class="panel-text">
Welcome back to your workspace. The network is running smoothly. Your daily analytics compilation is finalized and ready to be audited.
</p>
</article>

<!-- Analytics Panel -->
<article id="panel-analytics" class="ease-tab-panel panel-analytics" role="tabpanel" aria-labelledby="label-analytics">
<div class="panel-header">
<h2>Data Metrics & Insights</h2>
<span class="status-indicator updated">Realtime Sync</span>
</div>

<div class="analytics-preview">
<!-- Visual demonstration using CSS shapes -->
<div class="bar-chart" aria-hidden="true">
<div class="bar" style="height: 60%"></div>
<div class="bar" style="height: 85%"></div>
<div class="bar" style="height: 45%"></div>
<div class="bar" style="height: 95%"></div>
<div class="bar" style="height: 70%"></div>
</div>
</div>

<p class="panel-text">
Analyze metrics dynamically across systems. Session durations have surged by fifteen percent, with highest interaction volumes registering during midday intervals.
</p>
</article>

<!-- Settings Panel -->
<article id="panel-settings" class="ease-tab-panel panel-settings" role="tabpanel" aria-labelledby="label-settings">
<div class="panel-header">
<h2>Account Configuration</h2>
<span class="status-indicator saved">All Saved</span>
</div>

<div class="settings-list">
<div class="settings-item">
<div class="settings-info">
<span class="settings-title">Developer Mode</span>
<span class="settings-desc">Activate advanced debugging attributes.</span>
</div>
<div class="pseudo-toggle active" aria-hidden="true"></div>
</div>
<div class="settings-item">
<div class="settings-info">
<span class="settings-title">High Fidelity Animations</span>
<span class="settings-desc">Render premium glassmorphism layouts.</span>
</div>
<div class="pseudo-toggle active" aria-hidden="true"></div>
</div>
</div>

<p class="panel-text">
Manage local environment preferences and customize visualization options to align with your ongoing development workflow.
</p>
</article>

</div>

</div>
</main>

<footer class="demo-footer">
<p>EaseMotion CSS &bull; Contributed by @Hasini2706</p>
</footer>
</div>
</body>
</html>
Loading