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

マーカー風の下線(削除済み)

「class=”markerY”」
「class=”markerO”」
「class=”markerP」
「class=”markerG”」
「class=”markerB”」

下線と背景色のセット「二色マーカー」

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

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

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

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

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

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

丸付きの数字

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

1ケタの数字

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

テスト用 1 2 3 4 5 6 7 8 9 ? 

styleで色を付けた例
1 → 1

2ケタの数字

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

テスト用 10 2.0 3.1 0.4 52 65 71 88 93 ?? 

3ケタの数字

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

テスト用 100 0.32 35.1

1ケタの分数

「class=”msj2f-1″」
35 → 35

テスト用  35 

2ケタ・3ケタの分数

「class=”msj2f-2″」
315 → 315

テスト用  35 315 32115 

四角数字(実験中)

display:inline-blockにしてheightやら指定する

→名前を分かりやすい「3文字+数値-ケタ数」にする

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

1ケタの数字

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

styleで色を付けた例
1 → 1

2ケタの数字

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

3ケタの数字

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

タイトルとURLをコピーしました