ホームページにカードっぽいものを置いてみよう

どうも、他社のホームページカスタマイズ案で見つけた面白いデザインは自分のところにも取り入れたくなる杉山です。
今回はタイトルとサムネ通り、カードっぽいデザイン入れてみました。

裏返るカードデザイン

 
  
  
 

マウスオーバーで動くカードデザイン

Canyons

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

1つ目はCSSの定義のみで実現可能です。
2つ目はCSSとjavascriptを使って実現しています。PCで閲覧してもらった時専用になっちゃいますが

どちらも参考サイトからコードをコピーして、
ちょっと調整しただけですが動くものがあると目をひきませんか?

参考サイトのリンク貼っておきますので、
色々いじってみてください。

裏返るデザイン

マウスオーバーで動くデザイン

2つ目のサイトで紹介されているコードは
vue.jsを利用しているのと、SCSSでスタイルシートが書かれているのでそのあたりの対応が必要になります。

コメント