[旧版]文字修飾サンプル(マーカー,丸数字,四角数字)

目次(クリックでジャンプ)

表示

上がかすれたような風情にしたのだけど、しっくりこないので、色ごとに様子を変えて観察中。横に3pxのパディングを入れた。

比較用にデフォルトの文字背景色です。

「class=”markerY”」
これはイエローのマーカー風の装飾です。下線幅下から15%から40%まで着色

「class=”markerO”」
これはオレンジのマーカー風の装飾です。

「class=”markerP」
これはピンクのマーカー風の装飾です。着色幅15%から30%でボケも少なめの「タイト」な着色。

「class=”markerG”」
これはグリーンのマーカー風の装飾です。20%から70%まで着色。幅広で着色するとグラデで色相を変位できるのでリッチな雰囲気になるのに気づいた

「class=”markerB”」
これはブルーのマーカー風の装飾です。下一杯0%から20%までグラデ着色で文字に色がかからない。

強く狭い下線と弱く広い背景色で色相をずらせば見やすくリッチになるのでは？との着想から

class=”markerBb”
これは二色ブルーの装飾です。グラデのプロパティが2つで済むし、良いな

class=”markerPp”
これは二色ピンクの装飾です。

class=”markerOo”
これは二色オレンジの装飾です。

class=”markerGg”
これは二色グリーンの装飾です。

class=”markerVv”
これは二色バイオレットの装飾です。

ボーダー線の半径を「50%」にして丸くして1pxのsolidで描画。ケタ数に応じてletter-spacingやfont-sizeを調整。

「class=”msj2-1″」
1 → 1

styleで色を付けた例
1 → 1

「class=”msj2-2″」
10 → 10

「class=”msj2-3″」
100 → 100

丸数字のボーダー半径を無くしたした版。調整中(2019/6/24)

「class=”rected-1″」
1 → 1

styleで色を付けた例
1 → 1

「class=”rected-2″」
10 → 10

「class=”rected-3″」
100 → 100