LoginSignup
2

More than 1 year has passed since last update.

posted at

updated at

Organization

緑と黒のチェック柄の羽織りアイコンをCSSで作る

できたもの

こういうものを作ります。

スクリーンショット 2020-12-05 1.17.06.png

作り方

作り方を3ステップで解説していきます。

Step1. チェック柄の背景を作る

様々な方法がありますが、今回はconic-gradient( )を使用しました。

conic-gradient()は円周状のグラデーションを得るための関数ですが、色経由点を明確に定義することでグラデーションなしの背景を得ることもできます。例えば、

.four {
  background-image: conic-gradient(blue 90deg, red 90deg 180deg, yellow 180deg 270deg, green 270deg);
}

であれば、

  • 0度から90度までは青
  • 90度から180度までは赤
  • 180度からは240度までは黄
  • 240度から360度までは緑

の背景が得られます(0度は時計の12時の位置)。

スクリーンショット 2020-12-05 0.44.58.jpeg

そのためこれの、①対角にある色を同じ色にして②background-repeat: repeatで繰り返せばチェック模様が作れることになります。簡単ですね。

コードは以下のような感じです。

緑と黒のチェック
:root {
  --green: #25A27F;
  --black: #271818;
}

.background {
  background-image: conic-gradient(var(--black) 90deg, var(--green) 90deg 180deg, var(--black) 180deg 270deg, var(--green)  270deg);
  background-size: calc(100% / 4.5) calc(100% / 4.5);
  background-repeat: repeat; /* 初期値がrepeatなので書かなくても良い */
  width: 100px; /* 縦横比は 1:1 にする */
  height: 100px;

スクリーンショット 2020-12-05 13.03.28.png

Step2. 羽織りの形状を作る

羽織りはFont Awesomeのアイコンを用いました。

ただし羽織りアイコンはもちろん、前開きの服のアイコンもなかったため、代わりにTシャツを使用しました。そのため成果物も半袖となっています。

スクリーンショット 2020-12-05 1.04.46.png

これにposition: absoluteで黒い領域を重ねることにより前開きに見えるようにしています。
(襟の丸みのある部分はborderで作った三角形で作っています)

スクリーンショット 2020-12-05 1.56.27.png

Step3. 羽織りを透過させてチェック柄の背景を映す

Font Awesomeアイコンも当然フォントなので、background-clip: textにより透過させ背景を映すことが可能です。

.background {   
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: conic-gradient(var(--black) 90deg, var(--green) 90deg 180deg, var(--black) 180deg 270deg, var(--green)  270deg);
 (以下省略)
}
.fa-tshirt {
  font-size: 6rem;
}
<div class="background">
  <i class="fas fa-tshirt fa-5x"></i> 
</div>

※ IEはbackground-clipに対応していません。
※ SafariやIPhoneの各ブラウザもアイコンフォントの透過には対応していない?ようです。

コード

以上を組み合わせることでCSS羽織(半袖)が完成します。

See the Pen JjRGmVd by Masa-Shin (@POPOPON) on CodePen.

※ 恐らくSafariやIEからは見えない服となっています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2