画像ブロック|画像リンク(影&ふわっと)

111 views

構造詳細

クラス名
bf-img-link--shadow-up
CSS
.bf-img-link--shadow-up img {
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);
    transition: .3s ease-out;
}
.bf-img-link--shadow-up img:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 12px -2px rgba(0 0 0 / 10%);
}

使い方

導入方法

  1. コピーボタンをクリック
  2. 投稿画面(エディタ)で右クリックしてプレーンテキストとして貼り付け

ー動画(予定)ー

オリジナルスタイルのルール

クラス名の付け方

  • 原則として使用するクラス名は1つとする
  • クラス名からは役割がわかるものとする
  • クラス名からはデザインのイメージがわかるものとする
  • 接頭語はbf-とする
  • デザインを意味する部分は–で繋ぐ
  • 詳細度は高め(ただしbodyなど広範囲に影響するのはNG)

CSSの書き方

  • 余白の値はできるだけremまたはpx
  • デフォルトカラー(うすめ)は#eee
  • デフォルトカラー(こいめ)は#333
  • colorとbackgroundは色設定から変更できることを頭に入れておく
  • 疑似要素をテキストの後ろにしたい場合は、親にzindex 0、疑似要素にzindex -1にしておく
  • importantは最低限なら使ってもいいと思う
関連記事