3DテキストのCSS作成ツール
プリセットから立体的なテキストをカスタマイズ可能なCSSジェネレーターです。
プレビュー
<span class="three-d-text">{{text}}</span>.three-d-text {
font-size: {{fontSize}}px;
font-weight: bold;
color: {{textColor}};
text-shadow:
{{generatedTextShadow}};
line-height: 1.0;
}機能・使い方
- CSSの
text-shadowを重ねて、立体的なテキストを作成するツールです。 - プリセットを選択することで、様々な雰囲気の3Dテキストを簡単に適用できます。
- 深さや角度、色を自由に調整してオリジナルのデザインを作成可能です。
CSSプロパティの説明
text-shadow プロパティのみを使用しています。
1pxずつ位置と色をずらした複数の影を定義することで、疑似的な厚み（側面）を表現しています。
最後の影の色を変更することで、側面のグラデーション感を演出しています。
