Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8652

BootstrapVueのダサいイメージコンポーネントをクールなデザインにカスタマイズしてみた

$
0
0

スクリーンショット 2020-05-29 16.25.36.png

Vueバージョン確認

npm list vue

まずは上記コマンドでバージョンの確認

twinzlabo@0.1.0 /Users/twinzlabo

── vue@2.6.11

BootstrapVueの導入

BootstrapVueの導入がまだの方のために念のため導入方法書いときますね

とりあえずコピペして環境を整えてください

main.js
importBootstrapVuefrom'bootstrap-vue'import'bootstrap/dist/css/bootstrap.css'import'bootstrap-vue/dist/bootstrap-vue.css'Vue.use(BootstrapVue)
npm install vue bootstrap-vue bootstrap

以上でBootstrapVueの導入は完了です

BootstrapVueのダサいイメージをクールなデザインにカスタマイズ

すでに上の方で確認してもらったかと思いますが、

BootstrapVueの非常にダサいImageコンポーネントをスタイル修正を行うことでクールなデザインに編集していきましょう
スクリーンショット 2020-05-29 16.13.19.png

デフォルトの上の画像をhoverしたら下の画像のように色がつくようにカスタマイズしていきます
スクリーンショット 2020-05-29 16.13.11.png

この感じなかなかクールですよね

では早速コードをコピペしていきましょう

<template>
  <div>
    <b-img src="https://picsum.photos/300/150/?image=41" fluid alt="Fluid image"></b-img>
  </div>
</template>
<style>
img {
  margin-right: 10px;
  margin-bottom: 30px;
  display: inline-block;
  width: 500px;
  height: 400px;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 200ms ease-in;
  filter: grayscale(1) opacity(.8);
}

img:hover {
  filter: grayscale(0) opacity(1);
}
</style>

これだけです

いかがでしたでしょうか?ちゃんと同じようなデザインになりましたか?

今回も超簡単にカスタマイズできましたね

以上です

参考記事(より応用的な実装が希望の方)

【Vueデザイン/コピペだけ】白黒画像一覧でhoverすると色がつくCSSアニメーション実装を徹底解説
←トップ画像のような実装ができます
【Vue/BootstrapVueコピペのみ】Bootstarap導入からシンプルな画像一覧画面の実装方法までを徹底解説


Viewing all articles
Browse latest Browse all 8652

Trending Articles