ツナガルチップス No.23

エレクアライズ 制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き今回もCSSで特定の背景パターンを作成する方法を紹介します。

前回の記事はコチラ

今回もちょっと変わった背景パターンをCSSで作成します。
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

CSSプロパティはこんな感じ。

background:
radial-gradient(circle, transparent 20%, #708090 20%, #708090 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, #708090 20%, #708090 80%, transparent 80%, transparent) 50px 50px,
linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;
background-color: #708090;
background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;

赤字の箇所が背景の色で、青字の箇所がマークの色です。

今回も動作確認用のデモを用意したので、色々設定して遊んでみましょう。

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.22へ
→ ツナガルチップス No.24へ

###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic

吉永　祐太

###########################################