UserCSS:マーカー記法
元ネタ　 scrasobox - /scrasobox/マーカー
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
/* background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%); */
background-color: #ABFF4F;
&:has(span:nth-child(1) > adata-page-title="blue") {
background-color: hsl(from deepskyblue h s l / 35%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="orange") {
background-color: hsl(from orange h s l / 35%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="yellow") {
background-color: hsl(from gold h s l / 35%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="green") {
background-color: hsl(from lime h s l / 35%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="red") {
background-color: hsl(from crimson h s l / 35%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="purple") {
background-color: hsl(from darkmagenta h s l / 35%);
& > span:nth-child(1) > a { display: none; }
}
}
マーカー、蛍光ペン、ハイライター
ハイライト
hata6502 - /hata6502/Webページにマーカーを引く技術
マーカー記法のテスト
blue----------------------マーカー記法のテスト--------------
.
code:style.css
:root{
--marker-color: var(--accent-color, yellow); /* 強調色 */
/* --marker-color: rgba(250,250,0,0.6); /* 黄色 */
}
hover で動作を変える
code:stylexx.css
.line strong:not(class):not(:hover) {
/* font-weight: bold; /* */
background: linear-gradient(
transparent 65%,
var(--marker-color) 0% );
}
code:stylexx.css
.line strong:not(class):hover {
background: linear-gradient( to right,
transparent,
var(--marker-color),
transparent 50%
) 0% center / 400% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: marker 10s linear infinite;
animation-direction: reverse;
}
@keyframes marker {
to { background-position-x: 400%; }
}
タイミングを調整
code:stylexx.css
.line strong:not(class):hover {
background: linear-gradient( to right,
var(--marker-color),
transparent 35%,
transparent 65%,
var(--marker-color)
) 0% center / 400% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: marker 15s linear infinite;
animation-direction: reverse;
}
@keyframes marker {
to { background-position-x: 400%; }
}
code:stylexx.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class):hover {
--color-1 : transparent;
/* --color-2 : yellow; /* */
--color-2 : var(--marker-color); /* */
background: linear-gradient( 30deg,
var(--color-1),
var(--color-2),
var(--color-1),
var(--color-1)
) 0% center / 400% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: emorange 10s linear infinite;
animation-direction: reverse;
}
@keyframes emorange {
to { background-position-x: 400%; }
}
/customize/マーカー記法
あああ
redテキストred
orangeテキストorange
yellowテキストyellow
greenテキストgreen
blueテキストblue
purpleテキストpurple
hideテキスト 伏せ字
code:style.css
.line:not(.cursor-line) .deco-\# {
color: var(--page-text-color, black);
&:has(span:nth-child(1) > adata-page-title="blue") {
background-color: hsl(from deepskyblue h s l / 35%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="orange") {
background-color: hsl(from orange h s l / 35%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="yellow") {
background-color: hsl(from gold h s l / 35%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="green") {
background-color: hsl(from lime h s l / 35%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="red") {
background-color: hsl(from crimson h s l / 35%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="purple") {
background-color: hsl(from darkmagenta h s l / 35%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="hide") {
background-color: var(--page-text-color, black);
& > span:nth-child(1) > a { display: none; }
}
}
重要テキスト - とても重要
大切テキスト - それなりに大切
面白いテキスト - 主観的に面白い
code:style.css
.line:not(.cursor-line) .deco-\# {
&:has(span:nth-child(1) > adata-page-title="重要") {
font-weight: bold ;
color:white ;
background-color: hsl(from crimson h s l / 70%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="大切") {
font-weight: bold ;
background-color: hsl(from gold h s l / 70%);
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="面白い") {
font-weight: bold ;
background-color: hsl(from lime h s l / 70%);
& > span:nth-child(1) > a { display: none; }
}
}
赤テキスト赤
橙テキスト橙
黄テキスト黄
緑テキスト緑
青テキスト青
紫テキスト紫
code:style.css
.line:not(.cursor-line) .deco-\# {
&:has(span:nth-child(1) > adata-page-title="赤") {
color:white ;
background-color: #e60026;
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="橙") {
color:white ;
background-color: #ff8000;
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="黄") {
color:white ;
background-color: #eed200;
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="緑") {
color:white ;
background-color: #009944;
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="青") {
color:white ;
background-color: #1a1aff;
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="紫") {
color:white ;
background-color: #8c1aff;
& > span:nth-child(1) > a { display: none; }
}
}
UserCSS:強調記法
UserCSS:文字装飾記法
メタファ
UserCSS.icon
https://img.shields.io/badge/UserCSS-マーカー記法-1572B6.svg?logo=css3&style=for-the-badge