Material Design Box Shadows

サンプル

ソースコード

.card,
.card-1,
.card-2,
.card-3,
.card-4,
.card-5 {
    background: #fff;
    padding: 1em 1em;
    margin: 0.4em 0;
    border-radius: 2px;
}
.card-1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-1:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
        0 3px 6px rgba(0, 0, 0, 0.23);
}
.card-3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23);
}
.card-4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-5 {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3),
        0 15px 12px rgba(0, 0, 0, 0.22);
}

実装

[[module css]]
@import url(//scp-jp-research.wikidot.com/material-design-box-shadows/code/1);
[[/module]]
特に指定がない限り、このサイトのすべてのコンテンツはクリエイティブ・コモンズ 表示 - 継承3.0ライセンス の元で利用可能です。