【頻出Webデザイン】カードのホバーエフェクトを作ってみよう【mix-blend-mode】

แชร์
ฝัง
  • เผยแพร่เมื่อ 9 ก.พ. 2025
  • 画像素材と完成版のコードはこちら↓
    drive.google.c...
    関連動画はこちら↓
    translateについて: • 脱コピペ!CSSのpositionで重ね合わ...
    WebサイトやアプリのUIデザインにおいて、カードレイアウトは頻繁に使用されるパターンの一つです。
    そのカードに動きを加える「ホバーエフェクト」は、ユーザーエクスペリエンスを向上させ、デザインに魅力とインタラクティブ性をプラスします。
    今回はそんなカードデザインに個性を持たせるための「ホバーエフェクト」を、CSSのmix-blend-modeプロパティを使って実装する方法を解説します。
    この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。
    学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。
    また僕自身がreactの予備知識は必要ありませんので、
    同じような初心者の方はもちろん、
    「Web制作でコーディングは出来るけどReactもやってみたい」という方に見て頂けると嬉しいです。
    ブログ:lorem-co-ltd.com/
    引用元: • Cursor Move + Card Hov...
    Twitter: / rubyprogram
    #頻出Webデザイン #css
    #web制作 #webデザイン #webデザイナー #javascript #コーディング

ความคิดเห็น •