sikaku

CSSのみでカラフルなドット線を描画

itemにて配布しているborderline dottedですが、別に画像を使わなくてもCSSだけで似たような事ができたりします。
なんなら画像を使っていない分、汎用性と自由度が高くさえあります。
じゃあなんで素材配布してるの? って話になりますが、なんででしょうね。

CSSのlinear-gradient関数で遊んでるだけです。

source code

基本

demo
テキスト
HTML
  1. <span class="underline_dotted">テキスト</span>
CSS
  1. .underline_dotted {
  2. background-image:
  3. linear-gradient(to right,transparent 50%,#0f1011 50%),
  4. linear-gradient(to right,#c36f92,#0c99b9,#dc6c85,#0e92a7);
  5. background-repeat: repeat-x;
  6. background-position: left bottom;
  7. background-size: 4px 2px, 120px 2px;
  8. }
調整用情報

#0f1011:表示箇所の背景色と同色を指定

#c36f92,#...:グラデーションに使用したい色を指定

CSSのlinear-gradient関数の仕様を把握しておくと編集しやすいと思います。

サイズ

箇所:

2px:線の太さ(高さ)指定、二ヶ所同値推奨

4px:破線の間隔指定

120px:グラデーションの間隔指定

文字との間隔を調整したい場合はpadding-bottomline-height等を追加し対応するのをお薦めします。

何をやっているのか

透明と背景色交互の背景を、グラデーションの背景の上に、重ねて表示しているだけです。

背景色変更

background-imageプロパティにて,を挟んで複数の値を指定することで複数の背景画像を指定することができます。

linear-gradient関数を利用し作成した二種のグラデーション(透明と背景色の切り抜き用のグラデーションと使用したい色を指定したベタ塗りのグラデーション)を重ねて表示することで実装しています。

編集例

破線のデザイン

dashed風に
CSS
  1. background-size: 8px 2px, 120px 2px;

間隔:太さの比率を4:1にするとborder等プロパティでのdashed指定時っぽくなります

dotted風に
CSS
  1. radial-gradient(circle,transparent 45%,#ffffff 45%),

背景色を使用した切り抜き用のグラデーション生成にradial-gradient関数を使うことでっ丸いドットの線を表示させています。