こんにちは!!

Y.Y Magic(ワイワイマジック)の吉永です。

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

前回の記事はコチラ

今回もちょっと変わった背景パターンをCSSで作成します。

ってかそもそもそれってできるの?できます

CSSを使えば。

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

例えばこんな感じ

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

background-image:

radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%),

radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);

background-size: 110px 110px;

background-color: #C8D3A7;

background-position: 0 0, 55px 55px;

赤字の箇所が背景1の色で、黄色字の箇所が背景2の色で、水色字の箇所が背景3の色で、ピンク字の箇所が背景4の色で、緑字の箇所がマーク1の色で、青字の箇所がマーク2の色で、うぐいす色字の箇所がマーク3の色です。

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

背景色
色1 色2 色3 色4
マーク色
色1 色2 色3
CSSプロパティはここをコピペすると簡単に自分でも使用できますよ。

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

see you

← CSS忘備録#24へ
→ CSS忘備録#26へ

にほんブログ村 IT技術ブログ HTML5/CSS3へ
にほんブログ村

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

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

アンドロイダー公認デベロッパー(https://androider.jp/developer/f8d0c0800a2e980c4d497a58102c00e8/)
吉永 祐太

#########################################################
アンドロイダー公認デベロッパー認証