画像ブロック|画像リンク(拡大)

134 views

構造詳細

クラス名
bf-img-link--scale
CSS
.bf-img-link--scale {
    overflow: hidden;
}
.bf-img-link--scale img {
    transition: .3s ease-out;
}
.bf-img-link--scale img:hover {
    transform: scale(1.25);
}

使い方

導入方法

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

ー動画(予定)ー

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

クラス名の付け方

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

CSSの書き方

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