CSS
- background-size: 8px 2px, 120px 2px;
CSSのlinear-gradient
関数で遊んでるだけです。
- <span class="underline_dotted">テキスト</span>
- .underline_dotted {
- background-image:
- linear-gradient(to right,transparent 50%,#0f1011 50%),
- linear-gradient(to right,#c36f92,#0c99b9,#dc6c85,#0e92a7);
- background-repeat: repeat-x;
- background-position: left bottom;
- background-size: 4px 2px, 120px 2px;
- }
#0f1011
:表示箇所の背景色と同色を指定
#c36f92,#...
:グラデーションに使用したい色を指定
CSSのlinear-gradient
関数の仕様を把握しておくと編集しやすいと思います。
箇所:
2px
:線の太さ(高さ)指定、二ヶ所同値推奨
4px
:破線の間隔指定
120px
:グラデーションの間隔指定
文字との間隔を調整したい場合はpadding-bottom
やline-height
等を追加し対応するのをお薦めします。
透明と背景色交互の背景を、グラデーションの背景の上に、重ねて表示しているだけです。
背景色変更
background-image
プロパティにて,
を挟んで複数の値を指定することで複数の背景画像を指定することができます。
linear-gradient
関数を利用し作成した二種のグラデーション(透明と背景色の切り抜き用のグラデーションと使用したい色を指定したベタ塗りのグラデーション)を重ねて表示することで実装しています。
- background-size: 8px 2px, 120px 2px;
間隔
:太さ
の比率を4
:1
にするとborder
等プロパティでのdashed
指定時っぽくなります
- radial-gradient(circle,transparent 45%,#ffffff 45%),
背景色を使用した切り抜き用のグラデーション生成にradial-gradient
関数を使うことでっ丸いドットの線を表示させています。