text-shadow

どうも！LSSです！！ 【CSSサンプル】ふりむきカーン【ほぼジョークｗ】 - Little Strange Software でoutlineのオーラが広がって消えていくものを作りましたが、 「text-shadowとanimationを使えば、文字がまとったオーラが動く様子が表現できるのでは？」 と、試してみました^^ text-shadowが霧散するサンプル コード ちょびっとコード解説 text-shadowが霧散するサンプル さぁ、夏のあつさを、ふきとばそう！ コード <style><!--@keyframes txtshda{0%{text-shadow:0px 0px 10px …

text-shadowプロパティの基本的な使い方について書きます。text-shadowプロパティは、テキスト(文字列)に影を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。 記述の仕方 text-shadowプロパティの基本情報 サンプルコード 表示例 表示の比較 まとめ 記述の仕方 /* 記述例 */ セレクタ名{ text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色; } text-shadowプロパティの基本情報 text-shadowプロパティが取る値について説明します。 水平方向の距離 水平方向の影の距離(px、emなど) 正の…

どうも！LSSです！！ 今回は、コード生成ツール「text-shadow調整ツール」を公開します！ ブログなどで「影つき文字」を使いたい時にちょっと手間が省けるかも？なツールです。 text-shadow調整ツール 使い方 …という小ネタなんですが text-shadow調整ツール 文字色 文字サイズ太字 影色 影位置・横影位置・縦影ぼかし コード // サンプルです。'; gamen.innerHTML=txt; code.innerHTML=txt.replace(//g,'>'); } // ]]> 使い方 「文字色 文字サイズ 太字」で、装飾対象となる文字の設定ができます。 「影色 影…

chromeの検証モードを見ながら色々やってみました。 とりあえず、タイトル文字のもやもやの解除と、大きすぎるアイコンを小さくしました。 タイトル文字とアイコンの位置を入れ替えたいのですが、 background-position: left center; の命令が 効いていないようで、今後の課題です。 変更前 変更後 画像部分が収まる範囲のサイズが高さ200px となっていましたので、100pxに縮小し、その大きさに自動で合わせるように画像のサイズ指定を background-size: contain; としました。 ブログタイトルとブログの説明文は、color プロパティにて、文字の色…