CSS テキスト効果ジェネレーター

ほとんどの CSS テキスト効果ギャラリーでは、ネオンの輝き 1 つ、3D 押し出し 1 つという固定のプリセットが提供されます。それを選択するかそのままにします。このジェネレーターは、実際に入力したテキストの代わりにパラメーターから CSS を構築します。エフェクト選択からネオングロー、3D 押し出し、活版印刷/エンボス、アウトラインまたはグラデーション塗りつぶしを選択し、そのエフェクト自体のコントロールを調整すると、ライブ プレビューとその下のコピー可能な CSS ブロックが変更のたびに更新されます。

3D 押し出し効果は理解する価値のあるものです。選択した深さ (積み重ねられたレイヤーの数) と角度に対して、レイヤー i は水平方向に i × cos(角度)、垂直方向に i × sin(角度) だけオフセットされます。これは、プリセット角度のルックアップ テーブルから読み取られるのではなく、実際の三角関数を使用して JavaScript で計算されます。 45 度では、45 度のコサインとサインは同じ値であるため、水平オフセットと垂直オフセットはすべてのレイヤーで等しくなります。角度スライダーを回転させて、「text-shadow」レイヤーのスタック全体がリアルタイムで文字の周りを揺れる様子を観察します。各レイヤーは最後より少し暗くなり、明るい 3D 顔を見せかけます。

ネオン グローは、オプションのフリッカーを使用して、選択したカラーでぼかし半径を増加させる 4 つの `text-shadow` レイヤーを積み重ねます。これをオンにすると、不透明度の低下のランダム化されたシーケンスを含む `@keyframes` ルールが生成され、ライブでアニメーション化されます。また、シャッフル ボタンを使用すると、キーフレームを 1 つも手で書かずにパターンを再ロールできます。アウトライン化されたテキストは、それをサポートするブラウザーには `-webkit-text-stroking` を適用し、さらにサポートしないブラウザーには正直な 8 方向の `text-shadow` フォールバックを適用します。両方の行は、コピーされた CSS にその理由に関するメモが同梱されています。 Gradient-fill は、`background-clip: text` を使用してテキスト シェイプに `linear-gradient` をクリップします。これは現在、広範にサポートされている標準プロパティであり、レガシー エンジン用の古い `-webkit-` プレフィックス付き行を維持します。

すべてがブラウザ内でローカルにレンダリングされます。入力したテキストがどこにも送信されることはありません。完成した CSS ブロックを、エフェクトに必要な場合は「@keyframes」ルールを含めてスタイルシートに直接コピーします。