CSSで作るボックスデザイン

  • 投稿日
  • 著者 しんぺー
  • カテゴリー Code
  • カテゴリー CSS

素敵なデザインのボックスに出会ったので記事にしてみました

下のイメージのようなボックスをコーディングしました。

See the Pen Untitled by shimpei (@shimpei) on CodePen.

記事用に無機質にしています。

こんな感じのボックスをデザイナーさんが作成しましたが、シンプルだけどあまり見たことがない良いボックスだと思ったので記事にしてみました。
多分CSSで書くの手間かかるのであまり見かけないのかも。

疑似要素を使わず実装しました

実装方法について考えると、真っ先に擬似要素が思い浮かびますね。
しかし、疑似要素だとbefore、afterの2つしか使えないので四隅の丸を作るのにdivタグを追加する必要がでてきます。
divタグ追加するの嫌だなぁ〜〜〜〜〜〜って思ったので無理やりbackground-imageで作りました。

HTML

divタグを増やさないようにしたので、HTMLはシンプルです。
CSSは複雑になりますが、、、

<div class="box01">
  <h1>見出し</h1>
  <p>ここにテキストが入ります。</p>
</div>

SCSS

まぁ意味わからなくても、ごにょごにょ数値いじればカスタマイズできるでしょう。ファイトっっ！

.box01 {
  background-color: #ddd;
  padding: 60px;
  position: relative;
  background-image:
    radial-gradient(circle, #fff 50%, transparent 50%),
    radial-gradient(circle, #fff 50%, transparent 50%),
    radial-gradient(circle, #fff 50%, transparent 50%),
    radial-gradient(circle, #fff 50%, transparent 50%);
  background-position: top 27px left 27px, top 27px right 27px, bottom 27px left 27px, bottom 27px right 27px;
  background-repeat: no-repeat;
  background-size: 20px 20px;

  @media only screen and (max-width: 768px) {
    border-radius: 20px;
    background-position: top 17px left 17px, top 17px right 17px, bottom 17px left 17px, bottom 17px right 17px;

    background-size: 15px 15px;
  }
}

radial-gradientで作ったのでグラデーションもできるね。

See the Pen box_bgimg02 by shimpei (@shimpei) on CodePen.

終わり〜。