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

マーカー風の下線(使用停止)

[su_spoiler title=”表示” style=”fancy” icon=”chevron-circle” class=”std no-trn pale”]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

丸付きの数字

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

1ケタの数字

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

styleで色を付けた例
1 → 1

2ケタの数字

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

3ケタの数字

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

 

四角数字(実験中)

丸数字のボーダー半径を無くしたした版。調整中(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をコピーしました