サイト模写
今回は最近模写したWEBページを紹介します。
カードエフェクトがあったり少し難易度が高かったですが解説動画を参考に作ってみました。
今回模写したサイト
今回作成したのはこちらのサイトです。
前回同様Bootstrapを使用し、レスポンシブサイトになっています。
個人的に苦労したのがページ全体にちりばめられているカードエフェクト。カーソルがあたると影ができたり、カードの色が変わったりします。
cardefect作り方
具体的にはHTMLでcardefectというクラスを作り、CSSでbox-shadowで影を作成。transformでカードが拡大するようにしました。
またこの動作がカーソルが当たっている際のみに発生させたいエフェクトの為、.card-effect:hoverを作成。こちらで box-shadow: none;とtransform: translateY(5px);を記入しました。これでカードにカーソルがあうと影が消え,上に5px移動するため、浮き上がって見えるようになります。
カードの色変化作り方
ページ上部ではカーソルがあうと上から青色の背景が下りてくるエフェクトを作りました。こちらは対象のカードのクラスにserviseを追加し、CSSでservice::after記入し、top:-100%;、background-color:、opacity: 0;を追加しました。
その後、.service:hover::afterにて opacity: 1;を記入しtop: 0;を入力します。これで上から青色の背景が下りてくる状態を作成することができました。
しかし、そのままでは青色の背景がカードから上にはみ出しているのでこれを隠すために.serviceにoverflow:hiddenを追加しました。これで背景がカードからはみ出ることがなくなりました。
最後に
今回、参考にさせてもらったのはプログラミングチュートリアルのshinさんの動画です。とても参考になるので興味のある方はぜひご覧ください。
今回の模写を通して動きのあるCSSの使い方を学ぶことができました。より動きのあるサイトを作るにはJavaScriptなどを勉強していく必要があると思いますので、そちらの勉強も頑張ります。
コメント