幅いっぱいの画像に与えるさまざまなCSSグラデーションを簡単に生成できる便利ツール -The Hero Generator

サイト構築 -制作

Post on:2020年5月11日

sponsors

Photoshopの「生成塗りつぶし」を文字の加工に活用しよう！ 2024年4月26日金曜日 20時から21時30分

ヒーローヘッダに使用する幅いっぱいの画像に与えるさまざまなグラデーションのスタイルシートを1クリックで生成できるジェネレーターを紹介します。

グラデーションのカスタマイズや自分の画像をアップロードすることもできるので、出来映えを確認しながら生成できます。

The Hero Generator
The Hero Generator -GitHub

使い方は、簡単です。
さっそく試してみました。

ヒーローヘッダに使用されている画像は、「Upload a new image」から画像をアップロードして変更できます。

The Hero Generator

グラデーションの種類やカラー、タイトルやボタンなどはカスタマイズできます。

カスタマイズ後

カスタマイズが完了した後は、「code」ボタンをクリックするだけで、実装コードが生成されます。

コードの生成

生成されたコードは、下記の通りです。

<section class="masthead" role="img" aria-label="Image Description">
  <h1>
    The Hero Generator
  </h1>
</section>

<h1>

The Hero Generator

</h1>

</section>

.masthead {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  width: 100%;
  height: 100vh; /* if you don't want it to take up the full screen, reduce this number */
  overflow: hidden;
  background-size: cover;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(255,255,255,0.65) 100%), url(1.jpeg) no-repeat center center scroll;
}

h1 {
  font-style: normal;
  font-weight: bold;
  color: #eee;
  font-size: 11vmin;
  letter-spacing: 0.03em;
  line-height: 1;
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 40px;
}

.masthead {

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

text-align: center;

width: 100%;

height: 100vh; /* if you don't want it to take up the full screen, reduce this number */

overflow: hidden;

background-size: cover;

background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(255,255,255,0.65) 100%), url(1.jpeg) no-repeat center center scroll;

}

h1 {

font-style: normal;

font-weight: bold;

color: #eee;

font-size: 11vmin;

letter-spacing: 0.03em;

line-height: 1;