ग्लासमोर्फिज्म साइडबार HTML CSS एप्पल स्टाइल

1317 zegarkidawida

संपादक में खोलें Video अपना कोड प्रकाशित करें

ग्लासमोर्फिज्म साइडबार HTML CSS एप्पल स्टाइल

अनुशंसित

16 September 2025

3D कार्ड कैरोसेल HTML CSS JavaScript

29 June 2025

पावर जिम: फिटनेस, प्रशिक्षण और कक्षाएं HTML टेम्पलेट

11 October 2025

CSS लोडिंग एनिमेशन: सर्कल लोडर

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple-Style Glassmorphism Sidebar</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <aside class="sidebar">
            <div class="logo">
                <i class="fab fa-apple"></i>
            </div>
            <nav class="menu">
                <ul>
                    <li class="active">
                        <a href="#">
                            <i class="fas fa-home"></i>
                            <span>Home</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-compass"></i>
                            <span>Explore</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-chart-simple"></i>
                            <span>Analytics</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-message"></i>
                            <span>Messages</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-folder"></i>
                            <span>Projects</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fas fa-bookmark"></i>
                            <span>Bookmarks</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="profile">
                <div class="avatar">
                    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Profile">
                </div>
                <div class="user-info">
                    <h3>Alex Morgan</h3>
                    <p>Designer</p>
                </div>
            </div>
        </aside>
        <main class="content">
            <header>
                <h1>Welcome Back, Alex</h1>
                <p>Check out your project statistics for today</p>
            </header>
            <div class="card-container">
                <div class="card">
                    <div class="card-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="card-info">
                        <h3>12</h3>
                        <p>Completed Tasks</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="card-info">
                        <h3>5</h3>
                        <p>Pending Tasks</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="card-info">
                        <h3>7</h3>
                        <p>Active Projects</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600&display=swap');

:root {
    --primary-color: #0066ff;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --transition-speed: 0.3s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #2a2a72 0%, #009ffd 74%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
}

.container {
    display: flex;
    width: 90%;
    height: 85vh;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.sidebar {
    width: var(--sidebar-width);
    height: 100%;
    padding: 30px 15px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    transition: width var(--transition-speed) ease;
    position: relative;
}

.logo {
    text-align: center;
    margin-bottom: 40px;
}

.logo i {
    font-size: 36px;
    color: #fff;
    opacity: 0.9;
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu li {
    margin-bottom: 8px;
    border-radius: 16px;
    transition: all 0.2s ease;
    position: relative;
}

.menu li:hover {
    background: rgba(255, 255, 255, 0.2);
}

.menu li.active {
    background: rgba(255, 255, 255, 0.25);
}

.menu li.active::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 0 4px 4px 0;
}

.menu a {
    display: flex;
    align-items: center;
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.menu a i {
    font-size: 20px;
    margin-right: 14px;
    min-width: 22px;
    text-align: center;
}

.profile {
    margin-top: auto;
    display: flex;
    align-items: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info h3 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 2px;
}

.user-info p {
    font-size: 12px;
    opacity: 0.8;
}

.content {
    flex: 1;
    padding: 40px;
    overflow-y: auto;
}

header {
    margin-bottom: 30px;
}

header h1 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 8px;
}

header p {
    font-size: 16px;
    opacity: 0.8;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.card-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.card-icon i {
    font-size: 22px;
}

.card-info h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 4px;
}

.card-info p {
    font-size: 14px;
    opacity: 0.8;
}

/* Apple-style liquid effects */
.menu li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);
    transition: box-shadow 0.3s ease;
}

.menu li:hover::after {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

@media (max-width: 1024px) {
    .sidebar {
        width: var(--sidebar-collapsed-width);
    }
    
    .menu a span, 
    .user-info {
        display: none;
    }
    
    .profile {
        justify-content: center;
    }
    
    .avatar {
        margin-right: 0;
    }
    
    .content {
        padding: 30px;
    }
    
    .card-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .container {
        width: 95%;
        height: 90vh;
    }
    
    .card-container {
        grid-template-columns: 1fr;
    }
}

JS

अनुशंसित

3D कार्ड कैरोसेल HTML CSS JavaScript

पावर जिम: फिटनेस, प्रशिक्षण और कक्षाएं HTML टेम्पलेट

CSS लोडिंग एनिमेशन: सर्कल लोडर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS