Gutenberg、だいぶ使いやすくなったので移行中です

CSSでテキストにグラデーション!「Gradient Text Generator」

GradientTextGenerator WEB

さて、グラデーションジェネレーターシリーズも第3段、今回はテキストにCSSでグラデーションをかけられるジェネレーターです。

 

Gradient Text Generator

GradientTextGenerator
Gradient Text Generator

こちらは設定できる項目は少ないのですが、そのぶんシンプルで使いやすいです。

 

Gradient Text Generatorの使い方

Gradient Text Generatorの画面の見方

GradientTextGenerator
インターフェースもシンプルです。

「This is How Gradient Text Looks! 」がプレビュー。
その下の6つの楕円がグラデーションの色サンプル。
楕円の色サンプルの右がグラデーションの方向。
「Gradient CSS/HTML Code」ボタンをクリックするとHTMLコードとCSSコードを書きだしてくれます。

 

色の選択

GradientTextGenerator
楕円の色サンプルをクリックすると、一呼吸おいてプレビューの色が変わります。

表示されている色サンプルに気に入ったものが無い場合は「Load More Gradients」をクリックすると、別のサンプルが6つ表示されます。

 

グラデーションの方向


色サンプルの右、Gradient Orientationはグラデーションの方向です。

・Right Direction…右方向
・Left Direction…左方向
・Bottom Direction…下方向
・Top Direction…上方向

デフォルトは右方向です。

 

生成されたコードをコピペ!

設定ができたら「Gradient CSS/HTML Code」ボタンをクリック。

GradientTextGenerator

ウインドウが開き、CSSとHTMLが表示されます。

GradientTextGenerator

コピペしてテキストを変更するだけ!簡単!

 

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~!

 

コメント

タイトルとURLをコピーしました