はじめに
アプリの開発段階で作成したパーツの一部を抜粋し、Qiita用に編集して紹介します。今回はメジャーなアイコンフォントである**FontAwesome(以降、FA)とCSS**のみで、サッカー好きなら誰でも知ってるあの有名なチームのユニフォームを表現してみました。
モチーフは2019/20シーズンのホーム・ユニフォームです。クラブ史上初のチェック柄ということで話題となったもので、和風な表現ではあの特別な刀で鬼を退治する大ヒットアニメでもおなじみの市松模様というやつです。フォント扱いなので拡大縮小してもデザインは崩れませんし、シャギーが出ることもないです。
FAの読み込み
CDN前提で、以下のコードを<head></head>
に記述します。FAにメールアドレスを登録すれば、読み込み用のコードが発行されますので、{your_key}
部分は環境に合わせて変更してください。1
<script src="https://kit.fontawesome.com/{your_key}.js"></script>
##CSSの設定
ユニフォームのベースとなるアイコンはFAのTshirts
を使用しています。フォント扱いなので単色の色変更なら、color: 色設定;
で簡単に設定できます。結果がわかりやすいよう、便宜的にwhite
で設定しています。
<div class="preview">
<i class="fas fa-tshirt clip-others-barca-01"></i>
</div>
body {
margin: 0;
padding: 0;
font-size: 16px;
color: #444;
background-color: #fafafa;
}
.preview{
padding: 10px 0;
font-size: 25em;
display: flex;
justify-content: center;
}
.clip-others-barca-01 {
color: white;
}
では、ユニフォームの柄を描くにはどうするのか。端的に説明すれば、backgroundに複数の背景を描画しレイヤー状に重ね、ユニフォームの形でマスクするという具合です。
1-linear-gradientで市松模様を描画
background-image
の最下層に市松模様を描画します。なお、市松模様の描画方法は7noteさんの記事を参考にしました。
.clip-others-barca-01 {
color: white;
background-color: #154284;
background-image:
linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d),
linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d);
background-position: 0 0,30px 30px;
background-size: 60px 60px;
}
2-background-clipで背景をマスク処理
後の作業がしやすいように、background-clip
で背景をマスク処理します。これによりユニフォーム内のみ柄が表示されるようになります。この際、clip-others-barca-01
のcolor: white;
は削除します。
<i class="fas fa-tshirt clip-others-barca-01 text-clip"></i>
.text-clip {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.clip-others-barca-01 {
background-color: #154284;
/* 省略 */
}
3-市松模様のサイズと位置を調整
このままでは模様が小さすぎますし、拡大縮小に耐えられませんので、その辺りの修正をします。
.clip-others-barca-01 {
/* 省略 */
background-position: 0.25em 0.1em,0.1em 0.25em;
background-size: 0.3em 0.3em;
}
4-ボディと袖の切替部分を描画
ボディと袖の切替部分は微妙にカーブを描いていますので、radial-gradient
で楕円を描きます。中心を透過させ、周囲を青にして、市松模様の上に配置すればボディ部分に市松模様が残るイメージです。ユニフォームの下部を中心にしてサイズ調整します。
.clip-others-barca-01 {
background-color: #154284;
background-image:
radial-gradient(ellipse at 50% 100%, transparent 50%, #154284 50%),
linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d),
linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d);
background-position: 50% 67%,0.25em 0.1em,0.1em 0.25em;
background-size: 100% 175%,0.3em 0.3em,0.3em 0.3em; /* ←背景ごとの記述に修正 */
}
5-ドロップシャドウの追加と微調整
上記でほぼ完成ですが、襟部分に赤が少し見えていますので、これを隠します。2
次に、ドロップシャドウを当てたユニフォームを別に用意し、背景として重ねて表示させます。なお、FA公式のスタッキング指定ではbackground-clip
の効果が消えてしまいましたので、自前のものを当てています。
<div class="preview">
<span class="stack">
<i class="fas fa-tshirt dropshadow"></i>
<i class="fas fa-tshirt clip-others-barca-01 stack-chld text-clip"></i>
</span>
</div>
.stack {
margin: 0 0.5rem;
height: 1em;
line-height: 1em;
position: relative;
}
.stack-chld {
position: absolute;
top: 0;
left: 0;
}
.dropshadow {
text-shadow:
rgba(6, 24, 44, 0.4) 0px 0px 0px,
rgba(6, 24, 44, 0.65) 0px 4px 6px,
rgba(255, 255, 255, 0.08) 0px 1px 0px;
}
.clip-others-barca-01 {
background-color: #154284;
background-image:
linear-gradient(#154284 10%, transparent 10%),
radial-gradient(ellipse at 50% 100%, transparent 50%, #154284 50%),
linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d),
linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d);
background-position: 0, 50% 67%, 0.25em 0.1em, 0.1em 0.25em;
background-size: 100%, 100% 175%, 0.3em 0.3em, 0.3em 0.3em;
}
以上で完成です。
最後に
ちなみに使用色は日本語公式サイトを解析しました。気が向けば他にも作成してみようかと思います。
なお、アウェー・ユニフォームを加えたものをJSFiddle及びCODEPENにて公開しています。
[参考]
- 複数の背景画像の利用 - CSS: カスケーディングスタイルシート | MDN
- 背景画像の拡大縮小 - CSS: カスケーディングスタイルシート | MDN
- CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN
- background-clip - CSS: カスケーディングスタイルシート | MDN
- 【初心者でもわかる】市松模様(いちまつもよう)やチェック柄をCSSで再現
- 背景に文字の切り抜きができるbackground-clipの使い方