こんにちは朱夏です。
今回はCSSの「opacity」を使って、要素を透明にする方法を解説してみたいと思います。
要素を透明にする方法を知りたい。
アニメーションのフェードインやフェードアウトにも使えるかな？
「opacity」の書き方や、「opacity」を使ったフェードイン、フェードアウトの方法などを書いていこうと思います。
それではやっていきます。
opacityの書き方
アニメーションでの使い方
あとがき
opacityの書き方
「opacity」を使うと、要素を透明にする事が出来ます。
サンプルはこんな感じです。
See the Pen
jObEMpq by 朱夏 (@syunatsu1)
on CodePen.
「opacity」の書き方は以下になります。
「透明度」の部分の数値を変更する事で、透明度を変更する事が出来ます。
透過の度合いは以下の様な感じになります。
透明度0.0～1.0を並べてみました。
divに対して透明度を指定していますが、中身のテキストにも透明度が適用されています。
アニメーションでの使い方
「opacity」はマウスを乗せた時のアニメーションなどで使用する事も出来ます。
See the Pen
xxwbgqw by 朱夏 (@syunatsu1)
on CodePen.
マウスを乗せると、divで作った100px * 100pxのブロックが透明になるアニメーションを作ってみました。
マウスを乗せるとフェードイン、マウスを外すとフェードアウトします。
半透明にすると、以下の様な重ね方も出来ます。
See the Pen
mdeyRzX by 朱夏 (@syunatsu1)
on CodePen.
透明度0.5の赤と青のボックスを右回転と左回転で重ねてみました。
これだけでも割とオサレな感じかなと思います。
あとがき
というわけで、「opacity」で要素を透明にする方法を解説してみました。
今回のまとめはこちら。
- 透明度は「透明 0.0 ＜ 1.0 不透明」
- 要素内のテキストにも透過が適用される
「opacity」で画像を半透明にすることや、画像に青の半透明を重ねて表示させるなど、色々な事に活用できます。
今回は以上です。
次回もよろしくお願いします。
