さて、グラデーションジェネレーターシリーズも第3段、今回はテキストにCSSでグラデーションをかけられるジェネレーターです。
Gradient Text Generator
こちらは設定できる項目は少ないのですが、そのぶんシンプルで使いやすいです。
Gradient Text Generatorの使い方
Gradient Text Generatorの画面の見方
インターフェースもシンプルです。
「This is How Gradient Text Looks! 」がプレビュー。
その下の6つの楕円がグラデーションの色サンプル。
楕円の色サンプルの右がグラデーションの方向。
「Gradient CSS/HTML Code」ボタンをクリックするとHTMLコードとCSSコードを書きだしてくれます。
色の選択
楕円の色サンプルをクリックすると、一呼吸おいてプレビューの色が変わります。
表示されている色サンプルに気に入ったものが無い場合は「Load More Gradients」をクリックすると、別のサンプルが6つ表示されます。
グラデーションの方向
色サンプルの右、Gradient Orientationはグラデーションの方向です。
・Right Direction…右方向
・Left Direction…左方向
・Bottom Direction…下方向
・Top Direction…上方向
デフォルトは右方向です。
生成されたコードをコピペ!
設定ができたら「Gradient CSS/HTML Code」ボタンをクリック。
ウインドウが開き、CSSとHTMLが表示されます。
コピペしてテキストを変更するだけ!簡単!
CSSでテキストにグラデーション
上のサンプルのHTMLコードはこうなっています。
デフォルトはh1タグでしたがpタグに変更しています。
<p class="text-gradient"> CSSでテキストにグラデーション </p>
CSSはジェネレーターのコードそのままです。
フォントが太くなり、センタリングされています。こちらはお好みで変更して下さい。
.text-gradient{ font-weight: bold; text-align: center; background: #314dea; /* fallback for old browsers */ background: -webkit-linear-gradient(left, #314dea 15%, #9455dc 40%, #ec5d57 70%, #ec5d57 100%); background: linear-gradient(to left, #314dea 15%, #9455dc 40%, #ec5d57 70%, #ec5d57 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
同じサイト内に2つ以上このジェネレータで作ったコードを使用する場合は、クラス名「text-gradient」をそれぞれ変えてあげて下さいね!
こんな感じです。
CSSでテキストにグラデーション
HTML
<p class="text-gradient2"> CSSでテキストにグラデーション </p>
CSS
.text-gradient2{ font-weight: bold; text-align: center; background: #00416a; /* fallback for old browsers */ background: -webkit-linear-gradient(left, #00416a, #799f0c, #ffe000); background: linear-gradient(to left, #00416a, #799f0c, #ffe000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Gradient Text Generatorまとめ
昔は画像ソフトでグラデーションの文字を作ったり一文字ずつフォント色を指定してグラデっぽく見せたものですが、便利になりましたねCSS~!
コメント