linear-gradient

ツナガルチップス No.14

2017年1月30日 CSS, HTML, Web CSS背景, linear-gradient, ツナガルチップス, 吉永 2 by 吉永祐太

こんにちは！！

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background:
linear-gradient(135deg, #5f6324 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #5f6324 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #5f6324 25%, transparent 25%),
linear-gradient(45deg, #5f6324 25%, transparent 25%);
background-size: 100px 100px;
background-color: #cccc29;

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

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

色

背景色

マーク色

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

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

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

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

吉永　祐太

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

人気ブログランキングに投票

にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.13

2017年1月23日 CSS, HTML, Web CSS背景, linear-gradient, ツナガルチップス, 吉永 2 by 吉永祐太

こんにちは！！

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background:
linear-gradient(45deg, #2f2061 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #2f2061 45px, transparent 45px,transparent 91px, #79cc2b 91px, #79cc2b 135px, transparent 135px),
linear-gradient(-45deg, #2f2061 23px, transparent 23px, transparent 68px,#2f2061 68px,#2f2061 113px,transparent 113px,transparent 158px,#2f2061 158px);
background-color:#79cc2b;
background-size: 128px 128px;

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

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

色

背景色

マーク色

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

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

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

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

吉永　祐太

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

人気ブログランキングに投票

にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.12

2017年1月16日 CSS, HTML, Web CSS背景, linear-gradient, ツナガルチップス, 吉永 2 by 吉永祐太

こんにちは！！

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background:
linear-gradient(63deg, #2f2061 23%, transparent 23%) 7px 0,
linear-gradient(63deg, transparent 74%, #2f2061 78%),
linear-gradient(63deg, transparent 34%, #2f2061 38%, #2f2061 58%, transparent 62%),
#79cc2b;
background-size: 16px 48px;

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

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

色

背景色

マーク色

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

← ツナガルチップス No.11へ
 → ツナガルチップス No.13へ

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

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

吉永　祐太

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

人気ブログランキングに投票

にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.10

2016年11月2日 CSS, HTML, Web CSS背景, linear-gradient, ツナガルチップス, 吉永 2 by 吉永祐太

こんにちは！！

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background-color: #cc6081;
background-image:
linear-gradient(115deg, transparent 75%, #ffc753 75%),
linear-gradient(245deg, transparent 75%, #ffc753 75%),
linear-gradient(115deg, transparent 75%, #ffc753 75%),
linear-gradient(245deg, transparent 75%, #ffc753 75%);
background-position: 0 0, 0 0, 10px -20px, 10px -20px;
background-size: 20px 40px;

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

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

色

背景色

マーク色

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

← ツナガルチップス No.9へ
 → ツナガルチップス No.11へ

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

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

吉永　祐太

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

人気ブログランキングに投票

にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.7

2016年9月10日 CSS, HTML, Web background-color, background-image, background-position, background-size, CSS背景, linear-gradient, radial-gradient, チェック柄, ツナガルチップス, 吉永, 水玉 2 by 吉永祐太

こんにちは！！

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

前回の記事はコチラ

これまでに文字装飾に関しては回数を重ねたこともあり、案外CSSでできることが多いんだなと分かりましたね。
今回からはテーマを少し変えて、文字の背景についての装飾手法を学んでいきましょう。
例えば水玉背景にしたり、チェック柄背景にしたり、などなどetc・・・
ってかそもそもそれってできるの？できます。

CSSを使えば。

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

例えばこんな感じ(水玉)

水玉模様のCSSプロパティはこんな感じ。

background-color:#f5f5d1;
background-image:
　radial-gradient(#ceca93 20%, transparent 20%),
　radial-gradient(#ceca93 20%, transparent 20%);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
赤字の箇所が背景の色で、青字の箇所が水玉の色です。

続いてチェック柄です。

例えばこんな感じ(チェック柄)

チェック柄のCSSプロパティはこんな感じ。

background-color:#aed9e6;
background-image:
　linear-gradient(transparent 56.25%, rgba(255,255,0,.75) 56.25%, rgba(255,255,0,.75) 75%, transparent 75%),
　linear-gradient(90deg, transparent 56.25%, rgba(255,255,0,.75) 56.25%, rgba(255,255,0,.75) 75%, transparent 75%),
　linear-gradient(transparent 25%, rgba(255,255,0,.35) 25%, rgba(255,255,0,.35) 31.25%, transparent 31.25%),
　linear-gradient(90deg, transparent 25%, rgba(255,255,0,.35) 25%, rgba(255,255,0,.35) 31.25%, transparent 31.25%);
background-size: 32px 32px;
赤字の箇所が背景の色で、青字の箇所がチェック柄の色です。

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

柄

色

背景色

水玉色

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

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

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

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

吉永　祐太

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

人気ブログランキングに投票

にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.14

ツナガルチップス No.13

ツナガルチップス No.12

ツナガルチップス No.10

ツナガルチップス No.7

elecalize