Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8764

CSS で画像をひねって浮かせたい

$
0
0
やりたいこと 左の画像を 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 とかで勝手に調整してくれるものと思うので、気にしないことにする。 おしまい フロントエンドの開発は(どこまでをフロントエンドと呼ぶかは置いといて)、普段あまりやらないので、こういうデザインが上がってくると、ドキっとする。ベトナムではフロントエンドのスペシャリストって、あんまりいなくて、誰か良い人いないかなーと緩く思っている。

Viewing all articles
Browse latest Browse all 8764

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>