東京都府中市のWEB制作会社Maromaroのブログです

スタイリッシュなボックス

  • RESULT
  • HTML
  • CSS
  • コピー
    <div class="msr_box05">
      <a href="#">
        <img src="/stylerecipe_img/dummy_img03.png" width="230" height="110" alt="img"/>
        <h3 class="ttl">box</h3>
        <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </a>
    </div>
  • コピー
    .msr_box05 {
      width: 232px;
    }
    .msr_box05 a{
      border:1px solid #999999;
      box-sizing: border-box;
      color: #333333;
      display:block;
    }
    .msr_box05 a *{
      transition: 0.2s opacity ease-in-out;
      -o-transition: 0.2s opacity ease-in-out;
      -moz-transition: 0.2s opacity ease-in-out;
      -webkit-transition: 0.2s opacity ease-in-out;
    }
    .msr_box05 p {
      font-size: 14px;
      line-height: 1.6;
      padding: 8px;
    }
    .msr_box05 .ttl {
      font-size: 18px;
      line-height: 1.6;
      padding: 8px 8px 0;
    }
    .msr_box05 a:hover *{
      opacity: 0.8;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

その他のボックス

ボックスの一覧をもっと見る

要素一覧