CSSで使えるカード【複数】のデザインをまとめてみました。
codepenから引用しています。
カード 複数 コピペで実装
今回は複数のカード表示デザインを集めました！
どこかでみたことあるようなデザインもありますが
自分好みのカード表示デザインをコピペで実装してみてください！
８０年代なカード
昔懐かしのこの感じ！紙芝居スタイルのカード表示
See the Pen
Flying cards tabs by Biliana (@interstellar)
on CodePen.
チケットカード
カーソルを合わせて！色が変化
See the Pen
Info Cards Concept by Yancy Min (@yancy)
on CodePen.
影をつけよう！
クリックするとくるっと回転！
See the Pen
Google Now Inspired Flip Cards by Ettrics (@ettrics)
on CodePen.
のびーる詳細付きカード
写真がついててわかりやすい！
See the Pen
Article Card UI – Read More CSS Animation by Valentine (@wintr)
on CodePen.
重ねるカード
白いカードをタップすると・・・
See the Pen
Pure CSS Cards Against Developers(Tap to choose!) 😈😅 #CodePenChallenge by Jhey (@jh3y)
on CodePen.
拡大詳細カード！
順番をつけて並べよう！
See the Pen
Mobile Cards by Ettrics (@ettrics)
on CodePen.
飛び出す！
カードのイラストが飛び出す！
See the Pen
Clash of Clans Cards by Andre Madarang (@drehimself)
on CodePen.
カードが折りたたまれてる？
折り畳みタイプのカード！
See the Pen
Delivery Card Animation by Nikolay Talanov (@suez)
on CodePen.
ぱたっと表示
カーソルを合わせて上からパタッと！
See the Pen
Material Cards Design by Viraj Trivedi (@inf3cti0n95)
on CodePen.
なにもないところからの
詳細が出現！
See the Pen
Cards by Carlos Salgado (@salgadosomoza)
on CodePen.
ロゴのアニメーション
クリックするとロゴが動く！
See the Pen
Environment Impact Cards (GSAP) by Anton Mudrenok (@mudrenok)
on CodePen.
どのカードを取り出す？
書類を取り出すように出てくる！
See the Pen
Pure CSS Card Deck by Miro Karilahti (@miroot)
on CodePen.
重ねあわせカードデザイン！
めくるタイプで出現する！
See the Pen
Comment Card Animation by Shaw (@shshaw)
on CodePen.
万能カード
詳細カードもビデオもつけられる！
See the Pen
Week #2 :: Movie Card :: RV Code Challenge by Alex Fernandez (@LegendAF)
on CodePen.
どこかでみたことある機能…？
×か♡で選択して！
See the Pen
Flipping Card by mario s maselli (@mariosmaselli)
on CodePen.
どこかで見たことある….？②
写真付きでおしゃれに！
See the Pen
Tinder swipe cards by Rob Vermeer (@RobVermeer)
on CodePen.
検索のトップ表示にできます！
Googleの新機能を堪能しませんか？
いままでの様に、求人広告やリスティング広告に多額の費用を支払う時代はもう終わりました
2019年から始まった新しいサービス「Googleしごと検索」を活用することで、誰でも簡単にGoogleの巨大プラットフームを利用できるようになったのです！
『すべて無料』で始められます！
