background-size

ツナガルチップス 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.7

こんにちは!!

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

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

吉永 祐太

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




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