フレックスボックスを使ってカードデザインを作る

スポンサーリンク
カードデザインアイキャッチ プログラミング

こんにちは!セミマサです。

今回はフレックスボックスを使って↓のようなカードデザインを作ってみました。HTMLとCSSをまとめていきたいと思います。

今日もwebでセミが鳴く
瀬見マサキのブログです。自作ゲームを公開したりしています。

デモサイト

今回のデモサイトはこちらになります。

HTML

カード部分のHTMLです。

CSS

今回のCSSです。メインとなる.card-boxの要点を解説します!

.card-boxは横並びのフレックスボックスです。

align-itemsの指定をflex-startにして中身(画像と.card-text)を上に寄せています。

box-shadowtransform: translateYを利用してマウスホバー時にフワッとした動きをつけています。

・time要素を絶対配置するためにpositionrelativeを指定しています。※time要素の時計はfontawesomeを使っています。

おわりに

フレックスボックスを使うことでお洒落なカードデザインも簡単に作ることができますね!

タイトルとURLをコピーしました