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

マテリアルなボックス

  • RESULT
  • HTML
  • CSS
  • コピー
    <div class="msr_box03">
      <a href="#">
        <h3 class="ttl">box</h3>
        <img src="/stylerecipe_img/dummy_img03.png" width="230" height="110" alt="img"/>
        <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </a>
    </div>
  • コピー
    .msr_box03 {
      background-color: #1B73BA;
      width: 230px;
    }
    .msr_box03 a{
      box-sizing: border-box;
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      color: #000000;
      display:block;
      position: relative;
      transition: 0.2s ease-in-out;
      -o-transition: 0.2s ease-in-out;
      -moz-transition: 0.2s ease-in-out;
      -webkit-transition: 0.2s ease-in-out;
    }
    .msr_box03 img {
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      display: block;
    }
    .msr_box03 p {
      background-color: #FFFFFF;
      font-size: 13px;
      line-height: 1.6;
      padding: 8px;
    }
    .msr_box03 .ttl {
      background-color: #1B73BA;
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      color: #FFFFFF;
      font-size: 16px;
      line-height: 1.6;
      padding: 8px;
      position: relative;
    }
    
    /* 青の三角形 */
    .msr_box03 .ttl:before {
      border: 7px solid transparent;
      border-top: 7px solid #1B73BA;
      box-sizing: border-box;
      content: "";
      height: 7px;
      left: 50%;
      margin:0 0 0 -7px;
      position: absolute;
      top: 100%;
      width: 14px;
    }
    .msr_box03 a:hover{
      opacity: 0.8;
    }

検証済みブラウザ

  • IE9
  • IE10
  • Edge
  • FF
  • chrome
  • Safari

その他のボックス

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

要素一覧