Barre latérale Glassmorphism HTML CSS Style Apple

1502 zegarkidawida

Ouvrir dans l'éditeur Video Publiez votre code

Barre latérale Glassmorphism HTML CSS Style Apple

Recommandé

22 June 2025

Exemple de formulaire de connexion HTML

17 February 2026

Jeu Basket Bros : Intégration HTML plein écran

31 July 2025

Exemple de bouton néon HTML

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

Recommandé

Exemple de formulaire de connexion HTML

Jeu Basket Bros : Intégration HTML plein écran

Exemple de bouton néon HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS