サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
WWDC25
commonsense-design.com
あちこちで見かけるカードUI、ブログなどにも使いやすいですよね！そこで、カードUIにぴったりなサムネイルのhoverエフェクトをいくつか作ってみました。 CSSをコピペすれば何となく使えると思うので、CSS初心者の方や実装が面倒な方はサクッとお使いください！hoverエフェクトとかPCでしか恩恵には預かれませんが…そこはご愛嬌。 ではいってみましょうー！ 目次 基本のエフェクト Type1. シンプルオーバーレイ コード構成 基本の仕組み hoverエフェクトアイディア Type2. モノクロ+ぼかし+ズーム Type3. モノクロからカラーに Type4. カラーオーバーレイ+ワイプイン Type5. モノクロ+ライン Type6. 波動+ズーム Type7. グラデーションアニメーション Type8. ぼかし+枠線アニメーション Type9. ひし形ワイプイン Type10. 透かし+
モバイルファーストやらフラットデザインやらで、画像で装飾するよりも、チャチャッとCSSで装飾することが多くなりましたよね！というわけで、よく使いそうなもの（じゃないのも混じってますが）をいつでも簡単にコピペできるようにまとめてみました。 目次 CSSで飾りを作るポイント 見出し系の装飾 クラシック系二重線 クラシック系飾り罫 丸付き罫線 マルチボーダー風 パワポ風装飾 リスト系の装飾 チェックマーク プラスマーク 矢印 矢印付きリンク 矢印１ 矢印２ アイコン風 そのほかの装飾 NEW!リボン 紙を重ねた風の表現 ふきだし色々 CSSで飾りを作るポイント CSSで飾りを作るのに欠かせないのは、疑似要素とposition、transformの扱い。逆にココさえ押さえておけば、自分なりに色々な飾りが作れると思います！ 疑似要素:before & :after CSS装飾にとっても便利な疑似要素
このページを最初にブックマークしてみませんか？
『commonsense-design.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
