Google Font「Anton」を利用してドラゴンボール漫画風のタイトルを作りました。
文字にグラデーションをかける方法や色分けする方法などを解説します。
GoogleFont「Anton」を利用する
Google Fontより「Anton」を選択し、「link」タグをヘッダーにコピペ。「font-family: 'Anton', sans-serif;」を指定し「Anton」を読み込みます。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<h2>HEADING DESIGN</h2>
h2 {
font-family: 'Anton', sans-serif;
font-size: 90px;
text-align: center;
}文字を二色に色分け
「linear-gradient」で中央から二色に色分けし、「-webkit-background-clip: text;」でグラデを文字に反映させてます。
h2{
background: linear-gradient(
0deg, #7DD9DD 0 50%, #488ABB 50%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
...
}
文字に縁を入れる
「-webkit-text-stroke: 2.5px #000;」で文字に縁を入れて、「border-top」「border-bottom」で二重線を引き完成
h2{
padding: 1rem;
border-top: 6px double #333;
border-bottom: 6px double #333;
-webkit-text-stroke: 2.5px #000;
...
}
