radial-gradient

本年も宜しくお願い申し上げます。

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

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

前回の記事はコチラ

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

CSSを使えば。

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

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

background:
radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #167acb 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #167acb 10px, rgba(96, 16, 48, 0) 11px),
#404040;
background-size: 20px 20px;

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

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

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

← ツナガルチップス No.10へ
→ ツナガルチップス No.12へ

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

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

吉永　祐太

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

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

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

前回の記事はコチラ

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

CSSを使えば。

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

パターン1のCSSプロパティはこんな感じ。

background-color: #cc6081;
background-image: radial-gradient(closest-side, transparent 98%, #ffc753 100%), radial-gradient(closest-side, transparent 98%, #ffc753 100%);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

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

続いてパターン2

パターン2のCSSプロパティはこんな感じ。

background-color: #ee5e97;
background-image:
linear-gradient( 30deg, #c5b66d 12%, transparent 12.5%, transparent 87%, #c5b66d 87.5%, #c5b66d),
linear-gradient(150deg, #c5b66d 12%, transparent 12.5%, transparent 87%, #c5b66d 87.5%, #c5b66d),
linear-gradient( 30deg, #c5b66d 12%, transparent 12.5%, transparent 87%, #c5b66d 87.5%, #c5b66d),
linear-gradient(150deg, #c5b66d 12%, transparent 12.5%, transparent 87%, #c5b66d 87.5%, #c5b66d),
linear-gradient( 60deg, #f5f5f5 25%, transparent 25.5%, transparent 75%, #f5f5f5 75%, #f5f5f5),
linear-gradient( 60deg, #f5f5f5 25%, transparent 25.5%, transparent 75%, #f5f5f5 75%, #f5f5f5);
background-position: 0 0, 0 0, 25px 50px, 25px 50px, 0 0, 25px 50px;
background-size: 50px 100px;

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

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

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

← ツナガルチップス No.8へ
→ ツナガルチップス No.10へ

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

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

吉永　祐太

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