Material Design Box Shadows

サンプル

card-1

card-2

card-3

card-4

card-5

ソースコード

CSS

.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(.25,.8,.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.30), 0 15px 12px rgba(0,0,0,0.22);
}

実装例

[[div class="card card-1"]]
card-1
[[/div]]

[[div class="card card-2"]]
card-2
[[/div]]

[[div class="card card-3"]]
card-3
[[/div]]

[[div class="card card-4"]]
card-4
[[/div]]

[[div class="card card-5"]]
card-5
[[/div]]

[[module css]]
@import url(//scp-jp-research.wikidot.com/technology:material-design-box-shadows/code/1);

.card {
    background: #f4f4f4;
    margin: 1em 40px;
    padding: 0 1em;
    border: solid 1px transparent;
}
[[/module]]
特に指定がない限り、このサイトのコンテンツには次のライセンスが適用されます: Creative Commons Attribution-ShareAlike 3.0 License