Simple Morph CSS Framework - Advanced Features

Interactive Glass Effects

Glass Effect Variants

Click the buttons below to see different glass effects applied to the demo card:

Demo Card

This card demonstrates the selected glass effect against the colorful background.

Current: Standard Glass (60px blur)

Show Code Example

<!-- Glass Effect Classes -->
<div class="card glass-subtle">Subtle glass effect</div>
<div class="card glass">Standard glass effect</div>
<div class="card glass-strong">Strong glass effect</div>
<div class="card glass-intense">Intense glass effect</div>

Interactive Card Effects

Enhanced Cards with Effects

Hover & Tilt

This card has hover glow effect with smooth tilt animations on mouse movement!

Shimmer Effect

This card demonstrates the shimmer animation effect with tilt enabled!

Strong Glass

Enhanced glassmorphism effect with stronger blur and opacity. Try moving the mouse!

Image Card with Tilt

Flexible card with header image and tilt effect applied!

Show Code Example

<!-- Interactive Card Effects -->
<div class="card tilt hover-glow">
    <h4>Hover & Tilt</h4>
    <p>Card with hover glow and tilt effects</p>
</div>

<div class="card tilt shimmer">
    <h4>Shimmer Effect</h4>
    <p>Card with shimmer animation</p>
</div>

<div class="card tilt glass-strong">
    <h4>Strong Glass</h4>
    <p>Enhanced glassmorphism with tilt</p>
</div>

Loading States

Show Code Example

<div class="card card--loading">
    <div class="loading-skeleton">
        <div class="skeleton-line skeleton-title"></div>
        <div class="skeleton-line"></div>
        <div class="skeleton-line skeleton-short"></div>
    </div>
</div>

Advanced Interactive Components

Dropdown Menus

Show Code Example

<div class="dropdown">
    <button class="dropdown-trigger">Options ▼</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Profile Settings</a></li>
        <li><a class="dropdown-item" href="#">Account</a></li>
        <hr class="dropdown-divider">
        <li><a class="dropdown-item" href="#">Help & Support</a></li>
        <li><a class="dropdown-item" href="#">Sign Out</a></li>
    </ul>
</div>

Tooltips

Show Code Example

<!-- Tooltip Examples -->
<button class="tooltip" data-tooltip="Helpful message">Hover for tooltip</button>
<span class="tooltip" data-tooltip="Works on any element">Hover this text</span>
<button class="tooltip button-primary" data-tooltip="Primary tooltip">Button with tooltip</button>

Advanced Modals

Show Code Example

<!-- Modal Variants -->
<div class="modal modal--small" id="modal-small">
    <div class="modal-content glass-intense tilt">
        <header class="modal-header">
            <h2>Small Modal</h2>
            <button class="modal-close">×</button>
        </header>
        <div class="modal-body">
            <p>Compact modal for quick confirmations</p>
        </div>
    </div>
</div>

<div class="modal modal--large" id="modal-large">
    <div class="modal-content glass-intense tilt">
        <!-- Large modal content -->
    </div>
</div>

Advanced Data Components

Data Table with Pagination

Feature	Status	Priority	Progress
Glassmorphism Effects	Complete	High	100%
Mobile Responsive	Complete	High	100%
Dark Theme	Complete	Medium	100%
Advanced Animations	In Progress	Medium	75%
Accessibility Improvements	Complete	High	100%

Page 1 of 1

Show Code Example

<div class="table-container">
    <table id="data-table">
        <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Data 1</td>
            <td><span class="badge badge-success">Status</span></td>
            <td>Data 3</td>
        </tr>
        </tbody>
    </table>
</div>

<div class="table-pagination">
    <button class="pagination-btn" onclick="previousPage()">← Previous</button>
    <span class="pagination-info">Page 1 of 5</span>
    <button class="pagination-btn" onclick="nextPage()">Next →</button>
</div>