[CSS3,影]よく使う影(box-shadow)をまとめてメモっとく ※オレ用に

css, Webデザイン

久しぶりの更新ですがな。
今回はbox-shadowでよく使うものをメモっておこうと思います。
ググれば似たようなものがたくさん出てきますけど、オレルールでプロパティを整理してメモっとこってお話です。

まずはbox-shadowのブラウザ対応はどうなってるかを見てみましょう。
box-shadow
はい。IE9位上ですね。はい。

では早速。

下に四角でサイズちょっと小さめ

box-shadow
htmlは共通なんですけど一応
html

Default
1
2
3
<div class="shadow01">
<p>shadow01</p>
</div>

SASS

Sass
1
2
3
.shadow01 {
    @include box-shadow(0 10px 6px -6px #888);
}

CSS

CSS
1
2
3
4
5
.shadow01 {
  -moz-box-shadow: 0 10px 6px -6px #888;
  -webkit-box-shadow: 0 10px 6px -6px #888;
  box-shadow: 0 10px 6px -6px #888;
}

下の角が両方ともめくれた感じ

box-shadow
html

Default
1
2
3
<div class="shadow02">
<p>shadow02</p>
</div>

SASS

Default
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@mixin shadow02 {
    position: absolute;
    content: "";
    top: 80%;
    bottom: 15px;
    left: 10px;
    width: 50%;
    @include box-shadow(0 15px 10px #888);
    @include transform(rotate(-3deg));
    z-index: -1;
}
.shadow02 {
    position: relative;
    &:before {
        @include shadow02;
    }
    &:after {
        @include shadow02;
        @include transform(rotate(3deg));
        left: auto;
        right: 10px;
    }
}

@mixinを使ってますん。
CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.shadow02 {
  position: relative;
}
.shadow02:before {
  position: absolute;
  content: "";
  top: 80%;
  bottom: 15px;
  left: 10px;
  width: 50%;
  -moz-box-shadow: 0 15px 10px #888;
  -webkit-box-shadow: 0 15px 10px #888;
  box-shadow: 0 15px 10px #888;
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: -1;
}
.shadow02:after {
  position: absolute;
  content: "";
  top: 80%;
  bottom: 15px;
  left: 10px;
  width: 50%;
  -moz-box-shadow: 0 15px 10px #888;
  -webkit-box-shadow: 0 15px 10px #888;
  box-shadow: 0 15px 10px #888;
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: -1;
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  left: auto;
  right: 10px;
}

ゲロ長いけどコピペでいけるはずですん。

右下がめくれた感じ

box-shadow
html

Default
1
2
3
<div class="shadow03">
<p>shadow03</p>
</div>

SASS

Sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.shadow03 {
    position: relative;
    &:before {
        position: absolute;
        content: "";
        top: 80%;
        bottom: 15px;
        left: 10px;
        width: 50%;
        @include box-shadow(0 15px 10px #888);
        @include transform(rotate(-3deg));
        z-index: -1;
    }
}

CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.shadow03 {
  position: relative;
}
.shadow03:before {
  position: absolute;
  content: "";
  top: 80%;
  bottom: 15px;
  left: 10px;
  width: 50%;
  -moz-box-shadow: 0 15px 10px #888;
  -webkit-box-shadow: 0 15px 10px #888;
  box-shadow: 0 15px 10px #888;
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: -1;
}

右下がめくれた感じ

box-shadow
html

Default
1
2
3
<div class="shadow04">
<p>shadow04</p>
</div>

SASS

Sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.shadow04 {
    position: relative;
    &:after {
        position: absolute;
        content: "";
        top: 80%;
        right: 10px;
        bottom: 15px;
        left: auto;
        width: 50%;
        @include box-shadow(0 15px 10px #888);
        @include transform(rotate(3deg));
        z-index: -1;
    }
}

CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.shadow04 {
  position: relative;
}
.shadow04:after {
  position: absolute;
  content: "";
  top: 80%;
  right: 10px;
  bottom: 15px;
  left: auto;
  width: 50%;
  -moz-box-shadow: 0 15px 10px #888;
  -webkit-box-shadow: 0 15px 10px #888;
  box-shadow: 0 15px 10px #888;
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  z-index: -1;
}

真下にまるっこい影

box-shadow
html

Default
1
2
3
<div class="shadow05">
<p>shadow05</p>
</div>

SASS

Sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@mixin shadow05 {
    position: absolute;
    content: "";
    top: 50%;
    right: 10px;
    bottom: 0;
    left: 10px;
    @include border-radius(100px 100px 100px 100px/10px 10px 10px 10px);
    @include box-shadow(0 0 20px #888);
    z-index: -1;
}
.shadow05 {
    position: relative;
    &:before {
        @include shadow05;
    }
    &:after {
        @include shadow05;
        @include transform(skew(8deg) rotate(3deg));
        left: auto;
        right: 10px;
    }
}

@mixin使ってますん。
CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.shadow05 {
  position: relative;
}
.shadow05:before {
  position: absolute;
  content: "";
  top: 50%;
  right: 10px;
  bottom: 0;
  left: 10px;
  -moz-border-radius: 100px 100px 100px 100px/10px 10px 10px 10px;
  -webkit-border-radius: 100px;
  border-radius: 100px 100px 100px 100px/10px 10px 10px 10px;
  -moz-box-shadow: 0 0 20px #888;
  -webkit-box-shadow: 0 0 20px #888;
  box-shadow: 0 0 20px #888;
  z-index: -1;
}
.shadow05:after {
  position: absolute;
  content: "";
  top: 50%;
  right: 10px;
  bottom: 0;
  left: 10px;
  -moz-border-radius: 100px 100px 100px 100px/10px 10px 10px 10px;
  -webkit-border-radius: 100px;
  border-radius: 100px 100px 100px 100px/10px 10px 10px 10px;
  -moz-box-shadow: 0 0 20px #888;
  -webkit-box-shadow: 0 0 20px #888;
  box-shadow: 0 0 20px #888;
  z-index: -1;
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -webkit-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
  left: auto;
  right: 10px;
}

これもゲロ長いけどコピペね。

まとめ

ボクがよく使うのはこの5つです。ウソです。5つ目はあまり使わないです。てか使ったことないです。ごめんなさい。
とりあえずメモなので、どれもコピペで使えるはずです。

それはそうと、明日は市内に用事を作って直帰しまーすのノリでレイトショー行きたいんだけどどうでしょー。
恐竜がガブガブするやつ見たいのよね。←ジュラシックワールド

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

, , 下山 光揮

スポンサーリンク