ツナガルチップス

ツナガルチップス No.33

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

今回はCSSでできる写真をインスタグラム風に加工する技術を紹介します。

元ネタはこちら Instagram.css -GitHub

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ 元画像これが、→になります。CSSでね。

 

元画像これが、→になります。CSSでね。

 

今回も動作確認用のデモパーツを用意したので遊んでみてください。



 

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

see you

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

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

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

吉永 祐太

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




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

ツナガルチップス No.32

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

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

居酒屋で
ひとり呑み

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

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

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

see you

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

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

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

吉永 祐太

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




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

ツナガルチップス No.31

こんにちは!!エレクアライズ 制作技術局 ハイパーメディアクリエイター(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開発アプリ一覧
リバーシ
4色リバーシ
リバーシプレミアム
4色リバーシプレミアム

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

吉永 祐太

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




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

ツナガルチップス No.30

こんにちは!!

エレクアライズ 制作技術局 ハイパーメディアクリエイター(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開発アプリ一覧
リバーシ
4色リバーシ
リバーシプレミアム
4色リバーシプレミアム

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

吉永 祐太

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




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

ツナガルチップス No.29

こんにちは!!

エレクアライズ 制作技術局 ハイパーメディアクリエイター(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開発アプリ一覧
リバーシ
4色リバーシ
リバーシプレミアム
4色リバーシプレミアム

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

吉永 祐太

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




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

ツナガルチップス No.28

こんにちは!!

エレクアライズ 制作技術局 ハイパーメディアクリエイター(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開発アプリ一覧
リバーシ
4色リバーシ
リバーシプレミアム
4色リバーシプレミアム

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

吉永 祐太

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




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

ツナガルチップス No.27

こんにちは!!

エレクアライズ 制作技術局 ハイパーメディアクリエイター(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開発アプリ一覧
リバーシ
4色リバーシ
リバーシプレミアム
4色リバーシプレミアム

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

吉永 祐太

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




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

ツナガルチップス No.26

こんにちは!!

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background-color:#c0c0c0;
background-image:
radial-gradient(circle at 100% 150%, #c0c0c0 24%, #ffffff 25%, #ffffff 28%, #c0c0c0 29%, #c0c0c0 36%, #ffffff 36%, #ffffff 40%, transparent 40%, transparent),
radial-gradient(circle at 0 150%, #c0c0c0 24%, #ffffff 25%, #ffffff 28%, #c0c0c0 29%, #c0c0c0 36%, #ffffff 36%, #ffffff 40%, transparent 40%, transparent),
radial-gradient(circle at 50% 100%, #ffffff 10%, #c0c0c0 11%, #c0c0c0 23%, #ffffff 24%, #ffffff 30%, #c0c0c0 31%, #c0c0c0 43%, #ffffff 44%, #ffffff 50%, #c0c0c0 51%, #c0c0c0 63%, #ffffff 64%, #ffffff 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, #ffffff 5%, #c0c0c0 6%, #c0c0c0 15%, #ffffff 16%, #ffffff 20%, #c0c0c0 21%, #c0c0c0 30%, #ffffff 31%, #ffffff 35%, #c0c0c0 36%, #c0c0c0 45%, #ffffff 46%, #ffffff 49%, transparent 50%, transparent),
radial-gradient(circle at 0 50%, #ffffff 5%, #c0c0c0 6%, #c0c0c0 15%, #ffffff 16%, #ffffff 20%, #c0c0c0 21%, #c0c0c0 30%, #ffffff 31%, #ffffff 35%, #c0c0c0 36%, #c0c0c0 45%, #ffffff 46%, #ffffff 49%, transparent 50%, transparent);
background-size:100px 50px;

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

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

背景色
マーク色

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

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

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

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

吉永 祐太

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




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

ツナガルチップス No.25

こんにちは!!

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

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

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

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

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

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

吉永 祐太

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




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

ツナガルチップス No.24

こんにちは!!

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

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

前回の記事はコチラ

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

CSSを使えば。

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

例えばこんな感じ

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

background:
radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 50px 0,
radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 50px 0,
radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 0 50px,
radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 0 50px,
radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210,202,171,0) 17%),
radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54,78,39,0) 17%),
radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210,202,171,0) 17%) 50px 50px,
radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54,78,39,0) 17%) 50px 50px;
background-color:#63773F;
background-size:100px 100px;

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

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

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

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

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

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

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

吉永 祐太

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




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