Barra lateral de Glassmorphism HTML CSS Estilo Apple

1500 zegarkidawida

Abrir en el editor Video Publica tu código

Barra lateral de Glassmorphism HTML CSS Estilo Apple

Recomendado

28 June 2025

Estudio de Diseño de Arquitectura | DIBUJO

6 November 2024

Gradiente del cursor del ratón

23 August 2025

Blog de ingeniería: IA, nube, ciberseguridad y más

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

Recomendado

Estudio de Diseño de Arquitectura | DIBUJO

Gradiente del cursor del ratón

Blog de ingeniería: IA, nube, ciberseguridad y más

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS