diff --git a/submissions/examples/ease-tabs/README.md b/submissions/examples/ease-tabs/README.md new file mode 100644 index 00000000..b17bddc5 --- /dev/null +++ b/submissions/examples/ease-tabs/README.md @@ -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 +
+ + + + + + + + + + +
+
+ +
+ +
+ +
+ +
+ +
+
+ +
+``` + +--- + +## 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. diff --git a/submissions/examples/ease-tabs/demo.html b/submissions/examples/ease-tabs/demo.html new file mode 100644 index 00000000..386ae686 --- /dev/null +++ b/submissions/examples/ease-tabs/demo.html @@ -0,0 +1,156 @@ + + + + + + Sliding Glassmorphic Tabs - EaseMotion CSS + + + + + + + + + + + + + + +
+
+ CSS Animation Showcase +

Glassmorphic Sliding Tabs

+

A state-of-the-art interactive component powered entirely by modern CSS. Zero JavaScript dependency.

+
+ +
+
+ + + + + + + + + + +
+ + +
+
+

Performance Overview

+ Active System +
+ +
+
+ Active Users + 1,482 + +12.4% +
+
+ Response Time + 84ms + -4.2% +
+
+ +

+ Welcome back to your workspace. The network is running smoothly. Your daily analytics compilation is finalized and ready to be audited. +

+
+ + +
+
+

Data Metrics & Insights

+ Realtime Sync +
+ +
+ + +
+ +

+ Analyze metrics dynamically across systems. Session durations have surged by fifteen percent, with highest interaction volumes registering during midday intervals. +

+
+ + +
+
+

Account Configuration

+ All Saved +
+ +
+
+
+ Developer Mode + Activate advanced debugging attributes. +
+ +
+
+
+ High Fidelity Animations + Render premium glassmorphism layouts. +
+ +
+
+ +

+ Manage local environment preferences and customize visualization options to align with your ongoing development workflow. +

+
+ +
+ +
+
+ + +
+ + diff --git a/submissions/examples/ease-tabs/style.css b/submissions/examples/ease-tabs/style.css new file mode 100644 index 00000000..05b34971 --- /dev/null +++ b/submissions/examples/ease-tabs/style.css @@ -0,0 +1,561 @@ +/* ========================================================================== + EaseMotion CSS - Pure CSS Sliding Glassmorphic Tabs + Contributed by @Hasini2706 + ========================================================================== */ + +/* -------------------------------------------------------------------------- + 1. Base & Reset + -------------------------------------------------------------------------- */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + min-height: 100vh; + background-color: #030712; + color: #f3f4f6; + font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + overflow-x: hidden; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* -------------------------------------------------------------------------- + 2. Ambient Glassmorphism Background Glows + -------------------------------------------------------------------------- */ +.bg-glow { + position: absolute; + border-radius: 50%; + filter: blur(120px); + z-index: 0; + pointer-events: none; + opacity: 0.6; +} + +.bg-glow-1 { + width: 400px; + height: 400px; + background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, rgba(99, 102, 241, 0.05) 70%, transparent 100%); + top: 10%; + left: 15%; + animation: float-slow 20s ease-in-out infinite alternate; +} + +.bg-glow-2 { + width: 500px; + height: 500px; + background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, rgba(236, 72, 153, 0.05) 70%, transparent 100%); + bottom: 10%; + right: 10%; + animation: float-slow-reverse 25s ease-in-out infinite alternate; +} + +@keyframes float-slow { + 0% { transform: translate(0, 0) scale(1); } + 100% { transform: translate(40px, 60px) scale(1.1); } +} + +@keyframes float-slow-reverse { + 0% { transform: translate(0, 0) scale(1.1); } + 100% { transform: translate(-50px, -40px) scale(0.9); } +} + +/* -------------------------------------------------------------------------- + 3. Demo & Structure Layout + -------------------------------------------------------------------------- */ +.demo-wrapper { + width: 100%; + max-width: 640px; + margin: 2rem auto; + padding: 0 1.5rem; + display: flex; + flex-direction: column; + gap: 2rem; + z-index: 1; +} + +.demo-header { + text-align: center; +} + +.demo-badge { + display: inline-block; + padding: 0.35rem 0.8rem; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: #60a5fa; + background: rgba(59, 130, 246, 0.1); + border: 1px solid rgba(59, 130, 246, 0.2); + border-radius: 9999px; + margin-bottom: 0.75rem; +} + +.demo-header h1 { + font-size: 2.25rem; + font-weight: 700; + letter-spacing: -0.025em; + background: linear-gradient(135deg, #ffffff 30%, #a5b4fc 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-bottom: 0.5rem; +} + +.demo-subtitle { + font-size: 0.95rem; + color: #9ca3af; + max-width: 460px; + margin: 0 auto; + line-height: 1.5; +} + +.demo-container { + width: 100%; +} + +/* -------------------------------------------------------------------------- + 4. Tab Navigation Component Layout + -------------------------------------------------------------------------- */ +.ease-tabs-container { + width: 100%; + display: flex; + flex-direction: column; + position: relative; +} + +/* Visually Hidden Inputs preserving native keyboard accessibility */ +.ease-tab-input { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* Glassmorphic Navigation Wrapper */ +.ease-tabs-nav { + position: relative; + display: flex; + 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); + padding: 6px; + border-radius: 16px; + gap: 4px; + box-shadow: + 0 4px 30px rgba(0, 0, 0, 0.3), + inset 0 1px 1px rgba(255, 255, 255, 0.05); +} + +/* Tab Labels */ +.ease-tab-label { + position: relative; + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 12px 16px; + color: #9ca3af; + font-size: 0.95rem; + font-weight: 600; + text-decoration: none; + cursor: pointer; + border-radius: 12px; + user-select: none; + z-index: 2; + transition: + color 0.3s cubic-bezier(0.4, 0, 0.2, 1), + background-color 0.3s ease; +} + +.ease-tab-label:hover { + color: #ffffff; +} + +/* Tab Icon */ +.ease-tab-icon { + width: 18px; + height: 18px; + color: currentColor; + transition: + transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), + color 0.3s ease; +} + +/* Focus Indicator Styles (for keyboard navigation) */ +.ease-tab-input:focus-visible ~ .ease-tabs-nav { + outline: 2px solid rgba(99, 102, 241, 0.6); + outline-offset: 4px; +} + +.ease-tab-input:focus-visible ~ .ease-tabs-nav .ease-tab-label { + /* Subtle highlight on focused label */ +} + +/* -------------------------------------------------------------------------- + 5. Active State Glider & Highlight Logic (Pure CSS) + -------------------------------------------------------------------------- */ + +/* Glassmorphic Sliding Glider/Pill */ +.ease-tab-glider { + position: absolute; + top: 6px; + bottom: 6px; + left: 6px; + /* Width dynamically computed based on 3 columns and spacing */ + width: calc((100% - 20px) / 3); + background: rgba(255, 255, 255, 0.07); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 12px; + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.25), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + z-index: 1; + transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1); +} + +/* Glider Slider Positioning Matrix */ +#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)); +} + +#tab-settings:checked ~ .ease-tabs-nav .ease-tab-glider { + transform: translateX(calc(200% + 8px)); +} + +/* Active Label Text Colors & Icon Transforms */ +#tab-dashboard:checked ~ .ease-tabs-nav .label-dashboard, +#tab-analytics:checked ~ .ease-tabs-nav .label-analytics, +#tab-settings:checked ~ .ease-tabs-nav .label-settings { + color: #ffffff; +} + +#tab-dashboard:checked ~ .ease-tabs-nav .label-dashboard .ease-tab-icon { + color: #60a5fa; + transform: scale(1.12) rotate(-5deg); +} + +#tab-analytics:checked ~ .ease-tabs-nav .label-analytics .ease-tab-icon { + color: #a78bfa; + transform: scale(1.12) translateY(-2px); +} + +#tab-settings:checked ~ .ease-tabs-nav .label-settings .ease-tab-icon { + color: #f472b6; + transform: scale(1.12) rotate(15deg); +} + +/* -------------------------------------------------------------------------- + 6. Tab Panels Content & Transitions + -------------------------------------------------------------------------- */ + +/* Glassmorphic Panel Container */ +.ease-tabs-content { + margin-top: 1.5rem; + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 20px; + padding: 2rem; + box-shadow: + 0 10px 40px -10px rgba(0, 0, 0, 0.5), + inset 0 1px 1px rgba(255, 255, 255, 0.03); + position: relative; + overflow: hidden; +} + +/* Panels base styling (Hidden by default) */ +.ease-tab-panel { + display: none; + opacity: 0; +} + +/* Display active panels */ +#tab-dashboard:checked ~ .ease-tabs-content .panel-dashboard, +#tab-analytics:checked ~ .ease-tabs-content .panel-analytics, +#tab-settings:checked ~ .ease-tabs-content .panel-settings { + display: block; + animation: tabFadeIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; +} + +@keyframes tabFadeIn { + 0% { + opacity: 0; + transform: translateY(12px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* -------------------------------------------------------------------------- + 7. Demo Content Card Components + -------------------------------------------------------------------------- */ +.panel-header { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + padding-bottom: 1rem; + margin-bottom: 1.25rem; +} + +.panel-header h2 { + font-size: 1.25rem; + font-weight: 700; + letter-spacing: -0.01em; + color: #f9fafb; +} + +/* Indicators */ +.status-indicator { + font-size: 0.75rem; + font-weight: 600; + padding: 0.25rem 0.6rem; + border-radius: 9999px; + display: flex; + align-items: center; + gap: 6px; +} + +.status-indicator::before { + content: ''; + width: 6px; + height: 6px; + border-radius: 50%; + display: inline-block; +} + +.status-indicator.online { + color: #34d399; + background: rgba(52, 211, 153, 0.1); +} +.status-indicator.online::before { background-color: #34d399; } + +.status-indicator.updated { + color: #a78bfa; + background: rgba(167, 139, 250, 0.1); +} +.status-indicator.updated::before { background-color: #a78bfa; } + +.status-indicator.saved { + color: #60a5fa; + background: rgba(96, 165, 250, 0.1); +} +.status-indicator.saved::before { background-color: #60a5fa; } + +.panel-text { + font-size: 0.95rem; + line-height: 1.6; + color: #9ca3af; +} + +/* Dashboard Stats Grid */ +.stats-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + margin-bottom: 1.25rem; +} + +.stat-card { + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 12px; + padding: 1rem; + display: flex; + flex-direction: column; + position: relative; +} + +.stat-label { + font-size: 0.75rem; + font-weight: 500; + color: #6b7280; + margin-bottom: 0.25rem; +} + +.stat-value { + font-size: 1.5rem; + font-weight: 700; + color: #ffffff; +} + +.stat-change { + position: absolute; + right: 12px; + bottom: 12px; + font-size: 0.75rem; + font-weight: 600; + padding: 0.15rem 0.4rem; + border-radius: 4px; +} + +.stat-change.positive { + color: #10b981; + background: rgba(16, 185, 129, 0.1); +} + +/* Analytics Chart Preview */ +.analytics-preview { + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 12px; + padding: 1.25rem; + margin-bottom: 1.25rem; + height: 120px; + display: flex; + align-items: flex-end; +} + +.bar-chart { + display: flex; + justify-content: space-between; + align-items: flex-end; + width: 100%; + height: 100%; + gap: 12px; +} + +.bar { + flex: 1; + background: linear-gradient(180deg, rgba(167, 139, 250, 0.6) 0%, rgba(139, 92, 246, 0.1) 100%); + border: 1px solid rgba(167, 139, 250, 0.2); + border-radius: 6px 6px 0 0; + transition: height 1s ease; + min-height: 10px; +} + +.bar:nth-child(even) { + background: linear-gradient(180deg, rgba(96, 165, 250, 0.6) 0%, rgba(59, 130, 246, 0.1) 100%); + border: 1px solid rgba(96, 165, 250, 0.2); +} + +/* Settings Mock items */ +.settings-list { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin-bottom: 1.25rem; +} + +.settings-item { + display: flex; + justify-content: space-between; + align-items: center; + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + padding: 0.75rem 1rem; + border-radius: 12px; +} + +.settings-info { + display: flex; + flex-direction: column; +} + +.settings-title { + font-size: 0.875rem; + font-weight: 600; + color: #f3f4f6; +} + +.settings-desc { + font-size: 0.75rem; + color: #6b7280; +} + +.pseudo-toggle { + width: 36px; + height: 20px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 999px; + position: relative; + cursor: pointer; +} + +.pseudo-toggle::after { + content: ''; + width: 14px; + height: 14px; + background: #ffffff; + border-radius: 50%; + position: absolute; + top: 2px; + left: 2px; + transition: transform 0.3s; +} + +.pseudo-toggle.active { + background: linear-gradient(135deg, #f472b6, #db2777); + border-color: rgba(244, 114, 182, 0.4); +} + +.pseudo-toggle.active::after { + transform: translateX(16px); +} + +/* -------------------------------------------------------------------------- + 8. Footer Layout + -------------------------------------------------------------------------- */ +.demo-footer { + text-align: center; + font-size: 0.8rem; + color: #4b5563; +} + +/* -------------------------------------------------------------------------- + 9. Mobile Responsiveness + -------------------------------------------------------------------------- */ +@media (max-width: 520px) { + .demo-header h1 { + font-size: 1.75rem; + } + + /* Keep navigation padding consistent for glider coordinates */ + + .ease-tab-label { + padding: 10px 8px; + font-size: 0.85rem; + gap: 4px; + } + + .ease-tab-icon { + width: 15px; + height: 15px; + } + + .ease-tab-glider { + border-radius: 8px; + } + + .ease-tabs-content { + padding: 1.5rem; + } + + .stats-grid { + grid-template-columns: 1fr; + } +}