Unity Shader Graph で画像を表示

※ これは 2020/05/29 時点の Unity 2019.3.15f1 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

Shader Graph が使えるようになったので、とりあえず基礎の確認

入力された画像テクスチャをそのまま出力するグラフを作ってみる

Unity で Shader Graph を作ってみる

※ これは 2020/05/22 時点の Unity 2019.3.14f1 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

CSS はここまでにして、ちょっと自作アプリで必要になったので以前ちょっとだけ触った Unity の Shader Graph を、とりあえず使えるようにするところまで改めて試したい

unity.com

CSS でマウスオーバーで回転アニメする

※ これは 2020/04/10 時点の font awesome v5.13.0 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

CSS で下記のような回転アニメ・・・をカーソルがのっているときだけ行いたい

CSS で囲み枠を装飾する

CSS で囲み枠をもう少し装飾してみたい

・・・というわけでいろいろ試してみます

まずは破線

ねこはどうして箱に入るのが好きなのか？

CSS で囲み枠を描く

※ これは 2020/04/10 時点の font awasome v5.13.0 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

今回は CSS で下記のような囲み枠を描画してみます

ねこは飼い主が思っている以上に人が好き

引用文を CSS でそれっぽく表示する

※ これは 2020/04/10 時点の font awasome v5.13.0 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

ちまたでは12連休だそうですが、こちらはリモートワークなので通常営業です！

今回は Font Awesome を利用して下記のような引用文を CSS で記述してみます

世界を敵に回してもねこを愛してる

部屋はねこのおもちゃまみれ、ねこ吸いは呼吸の一種、ねことの毎日が幸せすぎて…。

アイコンを CSS でテキストのように自由変形 - Font Awesome

※ これは 2020/04/10 時点の font awasome v5.13.0 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

前回お試しした Font Awesome、拡大以外にも実はいろいろできるらしいので試してみる

アイコンを CSS でテキストのように表示 - Font Awesome

※ これは 2020/04/10 時点の font awasome v5.13.0 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

アイコン的なものを CSS に埋め込む場合、普通にやったら画像として参照しないとだめそうです

・・・が、テキストみたいな使い心地でアイコンを埋め込めるサービスがあるらしい！

fontawesome.com

さっそく試してみる

CSS で吹き出しを描画

CSS のお勉強、今回は下記のような吹き出しを CSS で描画したい

吹き出し付き

CSS でテキストの合成効果をつける

前回はグラデーションの背景を画像を使わず CSS で描画したので、さらに応用

上に表示するテキストに背景との合成効果を指定してみたい

単に白色のテキストをのせても下記のようにオーバーレイ効果をかけるとこんな感じに

Overlay