[CSS]アイコンフォントとCSSでFCバ○セロナ風のユニフォームを表現する（画像未使用）

メジャーなアイコンフォントであるFontAwesome（以降、FA）とCSSのみで、サッカー好きなら誰でも知ってるあの有名なチームのユニフォームを表現してみました。

モチーフは2019/20シーズンのホームとアウェーのユニフォームです。クラブ史上初のチェック柄ということで話題となったものです。和風な表現ではあの特別な刀で鬼を退治する大ヒットアニメでもおなじみの市松模様というやつです。フォント扱いなので拡大縮小してもデザインは崩れませんし、シャギーが出ることもないです。

技術的な話

今回、ベースのユニフォームはFAのTshirtsアイコンを使用しています。単色の色変更なら、CSSのcolorで簡単に設定できます。では、ユニフォームの柄を描くにはどうするのか。端的に説明すれば、backgroundに複数の背景を描画しレイヤー状に重ね、ユニフォームの形でマスクするという具合です。

・background-imageにて複数のグラデーションを指定しレイヤー状に重ねる

・linear-gradientでチェック柄（市松模様）を描画

・radial-gradientでボディと袖の切替部分を描画

・background-clipで背景をマスク処理（ユニフォーム内のみ柄が表示される）

・background-position、background-sizeで各々微調整

・ドロップシャドウ用のユニフォームを別に用意し、重ねて表示させる

ちなみに使用色は日本語公式サイトを解析しました。気が向けば他にも作成してみようかと思います。

なお、今回紹介した内容について、ソースコードを含めた詳細解説をQiitaにて公開しています。よろしければ訪問してみてください。

CSSを含めたフロントエンドの表示不具合の解析も行います

以下サービスよりご相談受付けております。