こんにちは!!

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

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

前回の記事はコチラ

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

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

CSSを使えば。

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

例えばこんな感じ

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

background:

radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,

radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,

linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,

linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,

linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,

linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;

background-size:40px 60px;

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

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

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

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

see you

← CSS忘備録#28へ
→ CSS忘備録#30へ

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

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

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

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

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