エレクアライズ 制作技術局 ハイパーメディアクリエイター(HMC)の吉永です。
前回に引き続き今回もCSSで特定の背景パターンを作成する方法を紹介します。
前回の記事はコチラ
今回もちょっと変わった背景パターンをCSSで作成します。
ってかそもそもそれってできるの？できます。
CSSを使えば。
CSSって何？って方はこちら
CSSプロパティはこんな感じ。
background-color:#c0c0c0;
background-image:
radial-gradient(circle at 100% 150%, #c0c0c0 24%, #ffffff 25%, #ffffff 28%, #c0c0c0 29%, #c0c0c0 36%, #ffffff 36%, #ffffff 40%, transparent 40%, transparent),
radial-gradient(circle at 0 150%, #c0c0c0 24%, #ffffff 25%, #ffffff 28%, #c0c0c0 29%, #c0c0c0 36%, #ffffff 36%, #ffffff 40%, transparent 40%, transparent),
radial-gradient(circle at 50% 100%, #ffffff 10%, #c0c0c0 11%, #c0c0c0 23%, #ffffff 24%, #ffffff 30%, #c0c0c0 31%, #c0c0c0 43%, #ffffff 44%, #ffffff 50%, #c0c0c0 51%, #c0c0c0 63%, #ffffff 64%, #ffffff 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, #ffffff 5%, #c0c0c0 6%, #c0c0c0 15%, #ffffff 16%, #ffffff 20%, #c0c0c0 21%, #c0c0c0 30%, #ffffff 31%, #ffffff 35%, #c0c0c0 36%, #c0c0c0 45%, #ffffff 46%, #ffffff 49%, transparent 50%, transparent),
radial-gradient(circle at 0 50%, #ffffff 5%, #c0c0c0 6%, #c0c0c0 15%, #ffffff 16%, #ffffff 20%, #c0c0c0 21%, #c0c0c0 30%, #ffffff 31%, #ffffff 35%, #c0c0c0 36%, #c0c0c0 45%, #ffffff 46%, #ffffff 49%, transparent 50%, transparent);
background-size:100px 50px;
赤字の箇所が背景の色で、青字の箇所がマークの色です。
今回も動作確認用のデモを用意したので、色々設定して遊んでみましょう。
マーク色
ではまた次回のネタを探して見つかり次第ウプします。
see you
← ツナガルチップス No.25へ
→ ツナガルチップス No.27へ
###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム
iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic
吉永 祐太
###########################################
人気ブログランキングに投票
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m