UserCSS:強調記法

文字を大きくする記法

code:style.css

:root {

--em-color-1: hsla(180,100%,50%,0.7);

--em-color-2: hsla(120,100%,50%,0.7);

--em-color-3: hsla(60,100%,50%,0.7);

--em-color-4: hsla(0,100%,50%,0.7);

--em-color-5: hsla(300,100%,50%,0.7);

--em-color-6: hsla(240,100%,50%,0.7);

--em-color-7: hsla(180,100%,50%,0.8);

--em-color-8: hsla(120,100%,50%,0.8);

--em-color-9: hsla(60,100%,50%,0.8);

--em-color-10: hsla(0,100%,50%,0.8);

}

code:stylexx.css

:root {

--em-color-1: hsla(180,100%,40%,0.7);

--em-color-2: hsla(120,100%,40%,0.7);

--em-color-3: hsla(60,100%,40%,0.7);

--em-color-4: hsla(0,100%,40%,0.7);

--em-color-5: hsla(300,100%,40%,0.7);

--em-color-6: hsla(240,100%,40%,0.7);

--em-color-7: hsla(180,100%,30%,0.8);

--em-color-8: hsla(120,100%,30%,0.8);

--em-color-9: hsla(60,100%,30%,0.8);

--em-color-10: hsla(0,100%,30%,0.8);

}

code:stylexx.css

:root {

--em-color-1: hsla(180,100%,60%,0.7);

--em-color-2: hsla(120,100%,60%,0.7);

--em-color-3: hsla(60,100%,60%,0.7);

--em-color-4: hsla(0,100%,60%,0.7);

--em-color-5: hsla(300,100%,60%,0.7);

--em-color-6: hsla(240,100%,60%,0.7);

--em-color-7: hsla(180,100%,70%,0.8);

--em-color-8: hsla(120,100%,70%,0.8);

--em-color-9: hsla(60,100%,70%,0.8);

--em-color-10: hsla(0,100%,70%,0.8);

}

記法の上書きのテスト

code:stylexx.css

.deco-\* {

font-weight: bold; /* */

color: white; /* 白文字 */

background-color: orange;

border-radius: 8px;

padding: 0.1em 0.2em 0.1em 0.2em;

}

.deco-\*:not(:hover) {

background: linear-gradient( to right,

red,

/*yellow,*/

orange,

red

) 0% center / 200% auto ; /* グラデーション */

animation: emred 4s linear infinite;

animation-direction: reverse;

}

@keyframes emred {

to { background-position-x: 200%; }

}

code:style.css

.deco-\* {

font-weight: bold; /* */

}

影付き文字

code:stylexx.css

.line strong.level-2 span.deco-\*:not(.deco-\|) {

text-shadow: 2px 2px var(--em-color-2);

}

.line strong.level-3 span.deco-\*:not(.deco-\|) {

text-shadow: 2px 2px var(--em-color-3);

}

.line strong.level-4 span.deco-\*:not(.deco-\|) {

text-shadow: 2px 2px var(--em-color-4);

}

.line strong.level-5 span.deco-\*:not(.deco-\|) {

text-shadow: 2px 2px var(--em-color-5);

}

.line strong.level-6 span.deco-\*:not(.deco-\|) {

text-shadow: 3px 3px var(--em-color-6);

}

.line strong.level-7 span.deco-\*:not(.deco-\|) {

text-shadow: 3px 3px var(--em-color-7);

}

.line strong.level-8 span.deco-\*:not(.deco-\|) {

text-shadow: 3px 3px var(--em-color-8);

}

.line strong.level-9 span.deco-\*:not(.deco-\|) {

text-shadow: 3px 3px var(--em-color-9);

}

.line strong.level-10 span.deco-\*:not(.deco-\|) {

text-shadow: 3px 3px var(--em-color-10);

}

縁取り + 影付き文字

code:stylexx.css

.line strong.level-2 span.deco-\*:not(.deco-\|) {

2px 2px var(--em-color-2);

}

.line strong.level-3 span.deco-\*:not(.deco-\|) {

2px 2px var(--em-color-3);

}

.line strong.level-4 span.deco-\*:not(.deco-\|) {

2px 2px var(--em-color-4);

}

.line strong.level-5 span.deco-\*:not(.deco-\|) {

2px 2px var(--em-color-5);

}

.line strong.level-6 span.deco-\*:not(.deco-\|) {

3px 3px var(--em-color-6);

}

.line strong.level-7 span.deco-\*:not(.deco-\|) {

3px 3px var(--em-color-7);

}

.line strong.level-8 span.deco-\*:not(.deco-\|) {

3px 3px var(--em-color-8);

}

.line strong.level-9 span.deco-\*:not(.deco-\|) {

3px 3px var(--em-color-9);

}

.line strong.level-10 span.deco-\*:not(.deco-\|) {

3px 3px var(--em-color-10);

}

砂文字

code:stylexx.css

.line strong.level-2 span.deco-\*:not(.deco-\|) {

text-shadow: 0 0 3px var(--em-color-2);

}

.line strong.level-3 span.deco-\*:not(.deco-\|) {

text-shadow: 0 0 6px var(--em-color-3);

}

.line strong.level-4 span.deco-\*:not(.deco-\|) {

text-shadow: 0 0 9px var(--em-color-4);

}

.line strong.level-5 span.deco-\*:not(.deco-\|) {

text-shadow: 0 0 12px var(--em-color-5);

}

.line strong.level-6 span.deco-\*:not(.deco-\|) {

text-shadow: 0 0 15px var(--em-color-6);

}

.line strong.level-7 span.deco-\*:not(.deco-\|) {

text-shadow: 0 0 18px var(--em-color-7);

}

.line strong.level-8 span.deco-\*:not(.deco-\|) {

text-shadow: 0 0 21px var(--em-color-8);

}

.line strong.level-9 span.deco-\*:not(.deco-\|) {

text-shadow: 0 0 24px var(--em-color-9);

}

.line strong.level-10 span.deco-\*:not(.deco-\|) {

text-shadow: 0 0 27px var(--em-color-10);

}

縁取り + 砂文字

code:style.css

.line strong.level-2 span.deco-\*:not(.deco-\|) {

0 0 6px var(--em-color-2);

}

.line strong.level-3 span.deco-\*:not(.deco-\|) {

0 0 9px var(--em-color-3);

}

.line strong.level-4 span.deco-\*:not(.deco-\|) {

0 0 12px var(--em-color-4);

}

.line strong.level-5 span.deco-\*:not(.deco-\|) {

0 0 15px var(--em-color-5);

}

.line strong.level-6 span.deco-\*:not(.deco-\|) {

0 0 18px var(--em-color-6);

}

.line strong.level-7 span.deco-\*:not(.deco-\|) {

0 0 21px var(--em-color-7);

}

.line strong.level-8 span.deco-\*:not(.deco-\|) {

0 0 24px var(--em-color-8);

}

.line strong.level-9 span.deco-\*:not(.deco-\|) {

0 0 27px var(--em-color-9);

}

.line strong.level-10 span.deco-\*:not(.deco-\|) {

0 0 30px var(--em-color-10);

}

UserCSS.icon

https://img.shields.io/badge/UserCSS-強調記法-1572B6.svg?logo=css3&style=for-the-badge