CSSでカードローディングのスタイリングをしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、CSSでカードローディングのスタイリングをしましょう。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

JavaScript版

HTML&JavaScript

スタイリング

これからCSSでスタイリングをしていきます。

項目に登場するbodyやimgはHTMLの要素です。

全体の設定

bodyの設定

imgの設定

cardの設定

card-headerの設定

card-contentの設定

card-titleの設定

card-excerptの設定

authorの設定

profile-imgの設定

author-infoの設定

smallの設定

アニメーションの設定

これで、完成です。ページをリロードしてみましょう。

おわりに

CSSのanimationタグを全然使いこなせていません^^;

動きのあるUIを実装するためには、習得が欠かせない技術ですね。
頑張って覚えましょう。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す