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

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

裏返るカードデザイン

 
  
  
 

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

Canyons

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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

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

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

裏返るデザイン

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

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

Related post

  1. Zoomでミーティングをやろう

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

  3. Zoomでミーティングに参加

  4. 久しぶりのエントリー

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

  6. 短縮URLを作ってクリック回数など見てみよう

  7. SeleniumとVBAでググってみる

  8. サイト工事中

Comment

  1. No comments yet.

  1. No trackbacks yet.

スポンサーリンク

最近の記事

  1. 何これ?

    2020.01.27

スポンサーリンク