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

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

裏返るカードデザイン

 
  
  
 

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

Canyons

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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

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

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

裏返るデザイン

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

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

Related post

  1. Excel-VBAとSeleniumでChrome操作 【コントロール…

  2. Excel-VBAとSeleniumでChrome操作 【キー操作】

  3. 質問の答えが返ってきません

  4. Let’s Encryptの自動更新に失敗?

  5. ウェブサイトのSSL化進んでいますか?

  6. ScrollMagicが想定外の所で発火してしまう

  7. Webページを自動操作してみた

  8. WordPress備忘録 問い合わせフォーム、メール送信

Comment

  1. No comments yet.

  1. No trackbacks yet.

スポンサーリンク

最近の記事

スポンサーリンク