やりたいこと
左の画像を CSS を使って右のように表示したい。
手順は、
影を付ける
画像をひねる
の順でやっていく。特に、浮いた感じの影を付ける部分は、解説記事があんまり見当たらなかったので、備忘として Step/Step で残しておく。画像のひねりは、おまけだ。
結論だけ欲しいせっかちさんは、kurab/floaatingObjectCSS へ Go!
下準備
html を準備する。こういった要素は、flex box の中に入っていることが多いと思われるので、その前提で。index.html, style.css, newyearcard2021.png はすべて同一階層に配置されている。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Object</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1 class="header">Floating Object</h1>
<div class="floatingContainer">
<div class="floatingObject">
<img class="floatingCard" src="./newyearcard2021.png" alt="">
</div>
</div>
</div>
</body>
</html>
とりあえず、flex box に入れてみる。画像が大きかったので、幅も調整した。分かりやすいように、border と padding が入ってる。
style.css
.headingText,
.floatingContainer,
.floatingObject,
.floatingCard {
border: 1px solid #000;
padding: 10px;
}
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.headingText {
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
}
.floatingContainer {
height: 90vh;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.floatingCard {
max-width: 300px;
}
影を付ける
ひとまず、画像が邪魔なので、一旦、hello とでもしておく。
index.html
<div class="floatingContainer">
<div class="floatingObject">
<!--img class="floatingCard" src="./newyearcard2021.png" alt=""-->
hello
</div>
hello
</div>
(説明に)不要な border を消して、floatingObject に仮で形をつける。影を含めた状態で真ん中あたりに来てほしいので、margin-bottom をつけた。
style.css
/* .headingText,
.floatingContainer, */
.floatingObject,
.floatingCard {
border: 1px solid #000;
padding: 10px;
}
...
.floatingObject {
width: 30%;
height: 300px;
background-color: red;
margin-bottom: 20vh;
}
floatingObject クラスに :after を使い、影を表示する箱を作る。
style.css
...
.floatingObject {
...
position: absolute;
}
.floatingObject:after {
border: 1px solid blue;
content: "";
position: absolute;
width: 100%;
height: 50px;
top: 105%;
left: -1%;
}
margin-bottom が効かなくなっちゃったが、後で調整する。この青い箱に影を描く。
style.css
...
.floatingObject:after {
...
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0) 70%
);
z-index: -1;
}
できた。影の表現方法は色々あると思うので、ご自由に。影は後ろにあるべきなので、z-index を調整した。画像(html を最初のものに)を元に戻して、いらないものを消すと、style.css はこんな感じになっている。margin-bottom 問題は absolute じゃなくて、relative にした。
style.css
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.headingText {
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
}
.floatingContainer {
height: 90vh;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.floatingCard {
max-width: 300px;
}
.floatingObject {
position: relative;
margin-bottom: 10vh
}
.floatingObject:after {
content: "";
position: absolute;
width: 100%;
height: 50px;
top: 105%;
left: -1%;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0) 70%
);
z-index: -1;
}
浮いてる！！牛が浮いてる絵が浮いてる！！これで、影付けはおしまい。
影のサイズを変えたい場合は、.floatingObject:after の width, height を変更すれば良い。位置の調整は、top, left にて。
画像をひねる
まず、回転させて、位置を調整する
style.css
.floatingCard {
max-width: 300px;
transform: rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
transform-origin: 80% 50% 0px;
position: relative;
}
なんだか不自然なので、遠近感を加える。perspective の値は適当に。
style.css
.floatingObject {
position: relative;
margin-bottom: 10vh;
perspective: 600px;
}
もう、これでおしまいでも良さそうだが、あとちょっと微調整する。
仕上げ
浮きをもうちょっと下げて、影の大きさを調整する。全体的な位置を調整する。カードをちょっと丸くしてカードっぽくする。などの調整を加えた。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Object</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1 class="headingText">Floating Object</h1>
<div class="floatingContainer">
<div class="floatingObject">
<img class="floatingCard" src="./newyearcard2021.png" alt="">
</div>
</div>
</div>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.headingText {
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
}
.floatingContainer {
height: 90vh;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.floatingCard {
max-width: 300px;
transform: rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
transform-origin: 80% 50% 0px;
position: relative;
border: 1px solid #fff;
border-radius: 8px;
}
.floatingObject {
position: relative;
margin-bottom: 10vh;
perspective: 600px;
}
.floatingObject:after {
content: "";
position: absolute;
width: 120%;
height: 50px;
top: 100%;
left: -10%;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0) 70%
);
z-index: -1;
}
良いね！
Mac の Safari と Chrome でしか確認していない。実際に使う時は、sass とかで勝手に調整してくれるものと思うので、気にしないことにする。
おしまい
フロントエンドの開発は（どこまでをフロントエンドと呼ぶかは置いといて）、普段あまりやらないので、こういうデザインが上がってくると、ドキっとする。ベトナムではフロントエンドのスペシャリストって、あんまりいなくて、誰か良い人いないかなーと緩く思っている。
↧