こんにちは!!

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background-color:#282463;
background-image:
radial-gradient(#01cc1f 9px, transparent 10px),
repeating-radial-gradient(#01cc1f 0, #01cc1f 4px, transparent 5px, transparent 20px, #01cc1f 21px, #01cc1f 25px, transparent 26px, transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;

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

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


背景色

マーク色

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

← ツナガルチップス No.15へ
→ ツナガルチップス No.17へ

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

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

吉永 祐太

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