背景画像を複数設定する
昨日の記事でbackground-sizeについて書きましたが、本日は背景画像を複数設定する方法について書いていきます。
といっても、実際にすることはbackgroundにカンマ区切りで追加していくだけで複数設定が可能になります。
html
<div class="box"></div>
css
.box {
background:url('http://tvit.main.jp/blog/wp-content/uploads/2017/05/9869260ce6920c13c2fc78ef2adee9d0_s-300x200.jpg') no-repeat 0 0,
url('http://tvit.main.jp/blog/wp-content/uploads/2017/05/d0749a71d946d1f81ff6b7f5367bf999_s-300x200.jpg') no-repeat 30px 30px;
width:100%;
height:300px;"
}
というhtmlとcssを用意しました。このように表示されます。
後から追加したデータは後ろに配置されていきます。
グラデーション
グラデーションには線形グラデーションと円形グラデーションがあるのでそれぞれについて設定方法を書いていきます。
線形グラデーション
線形グラデーションはlinear-gradient()を使って設定します。
linear-gradient()で生成されるのは画像になります。そのため、backgroundで使うときなどは
background-colorではなく、background-imageプロパティを設定していくことになります。
ではまずグラデーションを使って背景を黄色から赤にしていきましょう。
.box{
width:300px;
height:300px;
background-image:linear-gradient(yellow,red);
}
こうすることで黄色から赤のグラデーションを背景にもつボックスができます。
2色以上指定する
.box{
width:300px;
height:300px;
background-image:linear-gradient(yellow,blue,red);
}
と指定することで色の追加が可能です。
グラデーションの向き
色の指定だけをしたとき、グラデーションの向きは上から下になります。
グラデーションの向きを指定したい場合、
.box{
width:300px;
height:300px;
background-image:linear-gradient(to top left, yellow,red);
}
のように最初にtoをつけてその後top bottom left rightで方向を指定する方法
.box{
width:300px;
height:300px;
background-image:linear-gradient(30deg, yellow,red);
}
のように最初に角度を指定する方法があります。
グラデーションの割合
黄色の割合を増やして赤の割合を減らしたいなど、それぞれの色の割合を決めたいときにはpxや%を指定します。
.box{
width:300px;
height:300px;
background-image:linear-gradient(yellow 80%,red);
}
とすると黄色が80%、赤が20%のグラデーションができます。
グラデーションを繰り返す
グラデーションを繰り返したい場合、repeating-linear-gradient()を使います。
例えば、黄色と赤のグラデーションを30pxずつ繰り返したい場合
.box{
width:300px;
height:300px;
background-image:repeating-linear-gradient(yellow,red 30px);
}
とするとこのようになります。
円形グラデーション
円形グラデーションはradial-gradient()を使って設定します。
ではまず背景を内側が黄色、外側が赤の円形グラデーションにしていきましょう。
.box{
width:300px;
height:300px;
background-image:radial-gradient(yellow,red);
}
グラデーションの中心を指定する
先ほどのではボックスの真ん中がグラデーションの中心になっていましたが、
最初にatをつけてcenter top bottom left rightやpxを指定することで中心の位置を指定することができます。
.box{
width:300px;
height:300px;
background-image:radial-gradient(at 10px 30px,yellow,red);
}
こうするとボックスの左上を起点として横に10px、縦に30pxの位置に中心が指定されます。
グラデーションを繰り返す
線形グラデーションと同様に円形グラデーションでもグラデーションを繰り返すことができます。
repeating-radial-gradient()を使います。
.box{
width:300px;
height:300px;
background-image:repeating-radial-gradient(yellow,red 30px);
}
と指定すると
となります。
影をつける
ボックスとテキストそれぞれに影をつけることができるのでそれぞれについて書いていきます。
box-shadow
ボックスに影をつけたい場合はbox-shadowを使います。
.box{
background-color:yellow;
width:200px;
height:100px;
box-shadow: 10px 20px #000;
}
とすることでボックスの右に10px下に20pxの位置にある影がつきます。
影をぼかす
影をぼかしたい場合はbox-shadowに3つ数値を指定します。
.box{
background-color:yellow;
width:200px;
height:100px;
box-shadow: 10px 20px 5px #000;
}
影を大きくする
影のサイズだけを大きくしたい場合はbox-shadowに4つ数値を指定します。
.box{
background-color:yellow;
width:200px;
height:100px;
box-shadow: 10px 20px 5px 10px #000;
}
こうすることで10px分影が大きくなります。
影を内側につける
影を内側につけるにはinsetを使います。
.box{
background-color:yellow;
width:200px;
height:100px;
box-shadow: 10px 20px 5px #000 inset;
}
影を複数つける
影を複数つけるには、カンマ区切りで値を指定します。
.box{
background-color:yellow;
width:200px;
height:100px;
box-shadow: 10px 20px 5px #000 inset,
10px 20px 5px red ;
}
text-shadow
テキストに影をつける場合も基本的にはbox-shadowと同じように指定します。
ただし、box-shadowと違って、4つ目の値で影の大きさを指定することとinsetを使って影を内側にすることはできません。
.text{
font-size:32px;
text-shadow: 10px 20px 5px #ccc;
}
サンプルテキスト
要素を変形させる
transformプロパティを使うことで要素を変形させることが出来ます。
transformプロパティはいくつか値をとれるので下のhtmlを例にそれぞれ見ていきましょう。
<body>
<div class="box"></div>
</body>
translate
要素を移動をさせることができます。
.box {
transform:translate(100px, 30px);
}
とすることで右に100px、左に30px移動します。
横方向だけ移動させたい場合はtranslateX(100px)、縦方向だけ移動させたい場合はtranslateY(30px)というふうに指定します。
scale
要素の大きさを変えることができます。
.box {
transform:scale(0.5, 1.5);
}
とすることで横幅が0.5倍、縦が1.5倍になります。
横幅だけ大きくしたい場合はscaleX(0.5)、縦幅だけ大きくしたい場合はscaleY(1.5)というふうに指定します。
rotate
要素を回転させることができます。
.box {
transform:rotate(45deg);
}
とすることで要素が時計回りに45度回転します。
skew
要素を傾斜をつけることができます。
.box {
transform:skew(20deg, 10deg);
}
とすることでX方向に20度、Y方向に10度傾斜がつきます。
X方向だけ傾けたい場合はskewX(20deg)、縦方向だけ傾けたい場合はskewY(30deg)というふうに指定します。
ということで今回はグラデーションや影の付け方、要素の変形の仕方についてまとめていきました。
