/suto3/UserCSS:強調記法

generated at 11/17/2024, 10:58:39 AM
UserCSS:強調記法
強調
強調記法
文字を大きくする記法
UserCSS:マーカー記法
style.css:root {
  --em-color-0: var(--text-color, #e0e0e0);
  --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);
}

stylexx.css:root {
  --em-color-0: var(--text-color, #e0e0e0);
  --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);
}

stylexx.css:root {
  --em-color-0: var(--text-color, #e0e0e0);
  --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);
}

記法の上書きのテスト
 上書きのテスト おっ、いけるやん。
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%; }
} 

テスト （連打したい）

style.css.deco-\* {
  /* color: #fff; /* 白文字 */
  font-weight: bold; /* */
}

連打したいんじゃーー



影付き文字
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);
}

縁取り + 影付き文字
stylexx.css.line strong.level-2 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                2px 2px var(--em-color-2);
}
.line strong.level-3 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                2px 2px var(--em-color-3);
}
.line strong.level-4 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                2px 2px var(--em-color-4);
}
.line strong.level-5 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                2px 2px var(--em-color-5);
}
.line strong.level-6 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                3px 3px var(--em-color-6);
}
.line strong.level-7 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                3px 3px var(--em-color-7);
}
.line strong.level-8 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                3px 3px var(--em-color-8);
}
.line strong.level-9 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                3px 3px var(--em-color-9);
}
.line strong.level-10 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                3px 3px var(--em-color-10);
}

砂文字
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);
}

縁取り + 砂文字
style.css.line strong.level-2 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                0   0   6px var(--em-color-2);
}
.line strong.level-3 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                0   0   9px var(--em-color-3);
}
.line strong.level-4 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                0   0   12px var(--em-color-4);
}
.line strong.level-5 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                0   0  15px var(--em-color-5);
}
.line strong.level-6 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                0   0  18px var(--em-color-6);
}
.line strong.level-7 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                0   0  21px var(--em-color-7);
}
.line strong.level-8 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                0   0  24px var(--em-color-8);
}
.line strong.level-9 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                0   0  27px var(--em-color-9);
}
.line strong.level-10 span.deco-\*:not(.deco-\|) {
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px 1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px 1px 0px var(--assort-color, #EEE),
                0   0  30px var(--em-color-10);
}
重要.icon 素人質問で恐縮ですが…ゴゴゴ

UserCSS:文字装飾記法
UserCSS:拡張文字装飾記法
UserCSS:マーカー記法
Scrapbox:強調記法