Dialog / 24 クレイモーフィズム

デザイン見本

Claymorphism Dialog

粘土のようにふっくらとした3D感のあるデザインです。

内側に向かうシャドウ（インナーシャドウ）を複数重ねることで、粘土のように丸みのあるふっくらとした立体感を演出するクレイモーフィズムデザインです。パステルカラーとの相性が良く、親しみやすい印象を与えます。

実装コード

HTML

<button id="dialog-btn-24">Claymorphism<br>Dialog</button>
<div id="dialog-24" class="dialog">
    <div class="dialog-content-24">
        <div class="claymorphism-header">
            <span>Claymorphism Dialog</span>
        </div>
        <div class="claymorphism-body">
            <p>粘土のようにふっくらとした3D感のあるデザインです。</p>
        </div>
        <div class="claymorphism-footer">
            <button class="close-btn-24">Cancel</button>
            <button class="close-btn-24 primary">Accept</button>
        </div>
    </div>
</div>

CSS

#dialog-btn-24 {
    background-color: #ff9a9e;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    min-width: 200px;
    min-height: 60px;
    display: block;
    margin: 0 auto;
    text-align: center;
    box-shadow: 
        10px 10px 20px rgba(0,0,0,0.1),
        inset 5px 5px 10px rgba(255,255,255,0.6),
        inset -5px -5px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
#dialog-btn-24:hover {
    transform: scale(1.03);
    box-shadow: 
        12px 12px 24px rgba(0,0,0,0.15),
        inset 6px 6px 12px rgba(255,255,255,0.7),
        inset -6px -6px 12px rgba(0,0,0,0.15);
}

#dialog-24 {
    display: none;
    position: fixed;
    z-index: 2147483647;
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(250, 240, 245, 0.8);
    backdrop-filter: blur(8px);
    animation: fadeIn-24 0.3s;
}

.dialog-content-24 {
    background: #fdfbfb;
    border-radius: 30px;
    width: 80%;
    max-width: 450px;
    margin: 8% auto;
    position: relative;
    padding: 30px;
    text-align: center;
    box-shadow: 
        20px 20px 50px rgba(0,0,0,0.08),
        inset 10px 10px 20px rgba(255,255,255,0.8),
        inset -10px -10px 20px rgba(0,0,0,0.05);
    animation: floatIn-24 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.claymorphism-header {
    margin-bottom: 20px;
}
.claymorphism-header span {
    font-size: 24px;
    font-weight: 800;
    color: #4a4a4a;
}
.claymorphism-body p {
    font-size: 16px;
    color: #777;
    line-height: 1.6;
    margin-bottom: 30px;
}
.claymorphism-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.close-btn-24 {
    background: #e0eaf5;
    color: #555;
    border: none;
    padding: 12px 24px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 
        5px 5px 15px rgba(0,0,0,0.05),
        inset 3px 3px 8px rgba(255,255,255,0.7),
        inset -3px -3px 8px rgba(0,0,0,0.05);
    transition: all 0.2s;
}
.close-btn-24.primary {
    background: #a1c4fd;
    color: #fff;
    box-shadow: 
        5px 5px 15px rgba(161,196,253,0.3),
        inset 3px 3px 8px rgba(255,255,255,0.5),
        inset -3px -3px 8px rgba(0,0,0,0.1);
}
.close-btn-24:active {
    box-shadow: 
        2px 2px 5px rgba(0,0,0,0.05),
        inset 5px 5px 10px rgba(0,0,0,0.1),
        inset -5px -5px 10px rgba(255,255,255,0.4);
    transform: scale(0.95);
}

@keyframes fadeIn-24 {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes floatIn-24 {
    from { transform: translateY(40px) scale(0.9); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
@media (max-width: 768px) {
    .dialog-content-24 { width: 90%; padding: 25px 20px; }
}

(function () {
    var btn = document.getElementById('dialog-btn-24');
    var dialog = document.getElementById('dialog-24');
    var closeBtns = dialog.querySelectorAll('.close-btn-24');

    if (!btn || !dialog) return;

    function openDialog() {
        dialog.style.display = 'block';
        document.body.style.overflow = 'hidden';
    }

    function closeDialog() {
        dialog.style.display = 'none';
        document.body.style.overflow = 'auto';
    }

    btn.addEventListener('click', openDialog);
    
    closeBtns.forEach(function(b) { b.addEventListener('click', closeDialog); });

    dialog.addEventListener('click', function (e) {
        if (e.target === dialog) {
            closeDialog();
        }
    });

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && dialog.style.display === 'block') {
            closeDialog();
        }
    });
})();