linear-gradient

ツナガルチップス No.32

2017年12月26日 CSS, HTML, Web -webkit-background-clip, -webkit-text-stroke, animation, background-image, background-size, color, CSS背景, font-size, font-weight, linear-gradient, ツナガルチップス, 吉永 by 吉永祐太

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

今回は前回のテクニックを応用したちょっと特殊な文字例技術をご紹介します。

IE/Edgeは未対応です。是非Chrome/FireFoxなどでご覧ください

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

対応していないブラウザの方はこちらの表示を参考に

居酒屋で
ひとり呑み

少し前にテレビのスーパーやテロップでも見られた、文字の輪郭で背景をくりぬいて、輝度と色相を反転させる手法です。

視認性はあまりよくないですが、こんなことも今はCSSでできるようになっているんですね。

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

see you

← ツナガルチップス No.31へ
 → ツナガルチップス No.33へ

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

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

吉永　祐太

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

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

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

ツナガルチップス No.31

2017年12月21日 CSS, HTML, Web -webkit-background-clip, -webkit-text-stroke, animation, background-image, background-size, color, CSS背景, font-size, font-weight, linear-gradient, ツナガルチップス, 吉永 by 吉永祐太

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

久々の更新ですので、最近感動したCSS技術を一つご紹介します。

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

種明かしすると背景の色をグラデーションさせながらアニメーションしてます。

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

ちなみに「-webkit-background-clip: text;」と「color: transparent;」を組み合わせることでテキストの輪郭で背景を切り抜くことも可能です。

※動作するブラウザの制限はあります。

文字列

色1

色2

色3

色4

色5

色6

色7

色8

グラデーション角度

px

テキスト

テキストサイズ

px

CSSプロパティはここをコピペすると簡単に自分でも使用できますよ。

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

see you

← ツナガルチップス No.30へ
 → ツナガルチップス No.32へ

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

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

吉永　祐太

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

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

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

ツナガルチップス No.30

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

こんにちは！！

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background-color: #eee;
background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000),
linear-gradient(-45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000);
background-size:60px 60px;

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

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

色

背景色
マーク色

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

← ツナガルチップス No.29へ
 → ツナガルチップス No.31へ

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

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

吉永　祐太

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

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

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

ツナガルチップス No.29

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

こんにちは！！

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

前回に引き続き今回も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

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

← ツナガルチップス No.28へ
 → ツナガルチップス No.30へ

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

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

吉永　祐太

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

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

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

ツナガルチップス No.28

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

こんにちは！！

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background:
linear-gradient(-45deg, #fff 25%, transparent 25%, transparent 75%, #000 75%, #000) 0 0,
linear-gradient(-45deg, #000 25%, transparent 25%, transparent 75%, #fff 75%, #fff) 1em 1em,
linear-gradient(45deg, #000 17%, transparent 17%, transparent 25%, #000 25%, #000 36%, transparent 36%, transparent 64%, #000 64%, #000 75%, transparent 75%, transparent 83%, #000 83%) 1em 1em;
background-color: #fff;
background-size: 2em 2em;

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

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

色

背景色
マーク色

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

← ツナガルチップス No.27へ
 → ツナガルチップス No.29へ

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

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

吉永　祐太

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

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

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

ツナガルチップス No.27

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

こんにちは！！

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background-color: #FF7D9D;
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px,
0px 36px, 4px 2px, 29px 6px, 33px 30px;
background-image:
linear-gradient(335deg, #C90032 23px, transparent 23px),
linear-gradient(155deg, #C90032 23px, transparent 23px),
linear-gradient(335deg, #C90032 23px, transparent 23px),
linear-gradient(155deg, #C90032 23px, transparent 23px),

linear-gradient(335deg, #C90032 10px, transparent 10px),
linear-gradient(155deg, #C90032 10px, transparent 10px),
linear-gradient(335deg, #C90032 10px, transparent 10px),
linear-gradient(155deg, #C90032 10px, transparent 10px);

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

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

色

背景色
マーク色

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

← ツナガルチップス No.26へ
 → ツナガルチップス No.28へ

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

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

吉永　祐太

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

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

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

ツナガルチップス No.23

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

こんにちは！！

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background:
radial-gradient(circle, transparent 20%, #708090 20%, #708090 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, #708090 20%, #708090 80%, transparent 80%, transparent) 50px 50px,
linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;
background-color: #708090;
background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;

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

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

色

背景色
マーク色

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

← ツナガルチップス No.22へ
 → ツナガルチップス No.24へ

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

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

吉永　祐太

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

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

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

ツナガルチップス No.22

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

こんにちは！！

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background:
linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px,
linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px,
linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,

linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px,
linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px,
linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background-color: #232927;
background-size: 100px 100px;

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

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

色

背景色
マーク色

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

← ツナガルチップス No.21へ
 → ツナガルチップス No.23へ

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

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

吉永　祐太

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

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

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

ツナガルチップス No.21

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

こんにちは！！

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;

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

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

色

背景色
マーク色1
マーク色2

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

← ツナガルチップス No.20へ
 → ツナガルチップス No.22へ

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

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

吉永　祐太

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

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

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

ツナガルチップス No.15

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

こんにちは！！

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background:
linear-gradient(135deg, #282463 22px, #01cc1f 22px, #01cc1f 24px, transparent 24px, transparent 67px, #01cc1f 67px, #01cc1f 69px, transparent 69px),
linear-gradient(225deg, #282463 22px, #01cc1f 22px, #01cc1f 24px, transparent 24px, transparent 67px, #01cc1f 67px, #01cc1f 69px, transparent 69px)0 64px;
background-color:#282463;
background-size: 64px 128px

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

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

色

背景色

マーク色

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

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

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

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

吉永　祐太

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

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

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

elecalize