animation

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

グラデーション角度

テキスト

テキストサイズ

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